React Navigation v5 自定义导航栏头部按钮如何配置路由跳转？

你可以通过以下两种方式实现跳转需求，优先使用第一种即可：

方法1：通过screenOptions回调获取navigation实例 #

screenOptions 支持传入回调函数，回调的参数中会自动注入当前导航的 navigation 和 route 实例，你可以直接取用完成跳转逻辑。

修改后的代码如下：

const Stack = createStackNavigator();

const myStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        // 改为回调形式，拿到navigation参数
        screenOptions={({ navigation }) => ({
          headerRight: () => (
            <Button
              title='Gears'
              onPress={() => navigation.navigate('Settings')}
            />
          ),
        })}
      >
        <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>
  );
}

注意：navigate 方法传入的页面名称必须和你注册 Stack.Screen 时的 name 属性完全一致，大小写也需要匹配。

方法2：通过NavigationContainer的ref获取导航实例（适用于导航组件外部调用场景） #

如果后续你有在导航树外部调用导航逻辑的需求，可以通过给NavigationContainer绑定ref的方式拿到全局导航实例：

import { useRef } from 'react';
const Stack = createStackNavigator();

const myStack = () => {
  // 创建导航ref
  const navigationRef = useRef(null);
  return (
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator
        screenOptions={{
          headerRight: () => (
            <Button
              title='Gears'
              onPress={() => navigationRef.current?.navigate('Settings')}
            />
          ),
        }}
      >
        {/* 页面注册逻辑不变 */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

内容的提问来源于stack exchange，提问作者Sentienta Sins