React Navigation v5：如何为自定义导航 header 按钮编写导航路线？

Question

我正在尝试为我的应用程序的所有屏幕在导航 header 的 headerRight 上添加一个“齿轮”按钮。我在我的 App.js 中的 NavigationContainer 中添加了 Stack.Navigator 的 ScreenOptions 按钮，以便此堆栈中的所有 Stack.Screens 都将在 [=26= 上显示此按钮].

现在我需要按此按钮导航到另一个屏幕 (settingsScreen)。我无法像在屏幕上那样将 navigation.navigate('settingsScreen') 添加到按钮的 onPress 事件上，因为 App.js 文件中没有可用的导航道具。这是我的代码片段。

const Stack = createStackNavigator();

const myStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerRight: () => (
            <Button
              title='Gears'
              onPress={() => {}}   // no navigation prop available on this file
            />
          ),
        }}
      >
        <Stack.Screen
          name='Home'
          component={HomeScreen}
          options={{ title: 'Home' }}
        />
        <Stack.Screen
          name='Add new expense'
          component={AddNewExpense}
        />
        <Stack.Screen
          name='Settings'
          component={SettingsScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

如何实现？提前致谢！

Answer 1

screenOptions 将接收每个屏幕的导航道具和路线道具，请参阅 here

screenOptions={({ navigation}) => ({
   //you can use navigation now
   headerRight: () => (
     <Button
     title='Gears'
     onPress={() => navigation.navigate('settingsScreen')} 
     />
   ),

})}

React Navigation v5：如何为自定义导航 header 按钮编写导航路线？

React Navigation v5: How to write a navigation route for a custom Navigation header button?

reactjs

react-native

react-navigation