reactjs - 如何访问 Stack Navigator 的 screenOptions 属性中的导航 Prop ？

Question

我想使用堆栈导航器中的通用标题按钮导航到特定屏幕。

 <NavigationContainer>
  <RootStack.Navigator 
    mode="modal"
    screenOptions={{
      headerTitleAlign: 'center',
      headerTitle: () => <SpreeLogo />,
      headerRight: (props) => <MaterialIcons style={{
        marginHorizontal: 10,
      }}
      onPress={() => console.log(props)}
      name="clear" size={28} color="black" />
    }}
  >

在标题右侧图标中，我想访问导航 Prop 。我试过控制台记录 Prop ，但没有 Prop 作为导航。如何访问它？

Answer 1

根据文档，您可以为 screenOptions 提供如下所示的功能，让您可以访问导航，并且您应该可以从那里跳转到任何屏幕

<NavigationContainer>
  <RootStack.Navigator 
    mode="modal"
    screenOptions={({ route, navigation }) => ({
      headerTitleAlign: 'center',
      headerTitle: () => <SpreeLogo />,
      headerRight: (props) => <MaterialIcons style={{
        marginHorizontal: 10,
      }}
      onPress={() => console.log(route, navigation)}
      name="clear" size={28} color="black" />
    })}
  >...

在此处阅读文档 https://reactnavigation.org/docs/stack-navigator并搜索 screenOptions。

祝你好运