React Native 如何访问堆栈导航器的screenOptions属性中的导航属性？

aurhwmvo 于 2023-01-21 发布在 React

关注(0)|答案(2)|浏览(191)

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

<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 。如何访问它？

react-native

来源：https://stackoverflow.com/questions/63597753/how-to-access-the-navigation-prop-in-the-stack-navigators-screenoptions-attribu

2条答案

按热度按时间

gcuhipw91#

根据文档，您可以为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的文档并搜索屏幕选项。
祝你好运

赞(0）回复(0）举报 2023-01-21

h79rfbju2#

在React Navigation V6中，您可以为选项提供函数

<Stack.Screen
    name="Screen"
    component={Screen}
    options={({ route, navigation }) => ({
      headerTitleAlign: "center",
      headerLeft: () => (
        <Icon
          name="arrow-back"
          onPress={() => navigation.goBack()}
          color="#fff"
          size={25}
        />
      ),

    })}
  />

赞(0）回复(0）举报 2023-01-21

我来回答

React Native 如何访问堆栈导航器的screenOptions属性中的导航属性？

2条答案

相关问题

热门标签

最新问答