如何使用 react-navigation 从 header 中的按钮“导航”到新屏幕？

Question

我正在使用 react-navigation 并想在我的 header 右侧添加一个按钮，用于导航到不同的屏幕。但是在设置 navigationOptions 时，我想知道如何在按下按钮时调用的回调中访问 navigate 函数：

const RootNavigationStack = StackNavigator({
  PokemonList: {
    screen: PokemonListWrapper,
    navigationOptions: {
      title: ({state}) => `Pokedex`,
      header: ({ state, setParams }) => {
        return {
          visible: true,
          right: (
            <Button
              title={'Add'}
              onPress={() => // navigate to new screen here
            />
          ),
        }
      }
    },
  },
, {
  headerMode: 'screen'
})

知道如何实现吗？我正在考虑使用 withNavigation，但我仍然不太清楚它是如何工作的。

Answer 1

试试这个。

    header: ({ navigate }) => ({
       right: (
          <Button onPress={() => navigate('screen2')}  />
       )
    }),

Answer 2

我用这个解决了同样的问题（在 Screen/Component Class 内）

static navigationOptions = ({navigation}) => {
  return {
    title: 'Next',
    headerRight: <Button
                     title="Next"

                     onPress={ () => navigation.navigate('RegPasswordScreen')} />

  };
};

Answer 3

另一个答案适用于旧版本的 React Navigation。

对于新版本，试试这个：

static navigationOptions = ({ navigation }) => ({
        headerRight: (
            <Button 
                title='Setting' 
                onPress={ () => navigation.navigate('RouteName') }                
                backgroundColor= "rgba(0,0,0,0)"
                color="rgba(0,122,255,1)"
            />
        )});

Answer 4

在最新版本中，您可以通过挂钩来完成此操作。

import { useNavigation } from '@react-navigation/native';

const CustomHeaderComponent = (props) => {
  const navigation = useNavigation();
  return <Button onPress={() => navigation.navigate('screen2')} />;
}

如何使用 react-navigation 从 header 中的按钮“导航”到新屏幕？

How to `navigate` to new screen from button in header with react-navigation?

javascript

reactjs

react-navigation