Блог

Я пытаюсь добавить кнопку «Шестеренка» в headerRight заголовке навигации для всех экранов моего приложения. Я добавил кнопку ScreenOptions Stack.Navigator внутри a NavigationContainer в свой App.js , чтобы у всех Stack.Screens внутри этого стека была эта кнопка в заголовке.

Теперь мне нужно нажать эту кнопку, чтобы перейти на другой экран (экран настроек). Я не могу добавить 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>
  );
}
 

Как этого можно достичь? Заранее спасибо!

Варианты экрана получат навигационную опору и опору маршрута для каждого экрана см. Здесь

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

})}