React Native在App.js配置全局Header右侧导航时navigation未定义如何解决

你遇到的“Can't find variable: navigation”报错本质是变量作用域不匹配：

• 原来的defaultNavigationOptions被你写成了静态对象，这个配置在导航器初始化阶段就会被加载，此时根本不存在可直接引用的全局navigation变量
• navigation对象的实例只有在每个页面实际被导航栈渲染时，才会作为参数注入到页面的导航配置上下文中，静态写死在配置里自然会触发找不到变量的报错。

要拿到合法的navigation对象，只需要调整defaultNavigationOptions的赋值形式：把原来的静态对象，改成接收导航上下文的函数，系统会自动把包含navigation的上下文作为入参传入，不需要手动传值。
调整后的核心代码逻辑如下：

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
// 补全你原代码缺失的UI组件导入
import { TouchableOpacity } from 'react-native';
import { Feather } from '@expo/vector-icons';

const navigator = createStackNavigator(
  {
    Home: {
      screen: HomeScreen
    },
    Settings: {
      screen: SettingsScreen
    }
  },
  {
    initialRouteName: 'Home',
    // 核心修改：把静态配置改为可接收导航上下文的函数形式
    defaultNavigationOptions: ({ navigation }) => ({
      headerRight: (
        <TouchableOpacity 
          style={{paddingRight: 20}} 
          onPress={() => navigation.navigate('Settings')}
        >
          <Feather name="menu" size={30} color="white" />
        </TouchableOpacity>
      )
    })
  }
);

export default createAppContainer(navigator);

• 这种全局配置的headerRight会自动应用到该栈下所有注册的页面，不需要在每个页面单独写头部按钮逻辑，刚好匹配你统一配置汉堡菜单的需求
• 运行代码前记得补全缺失的导入：你原代码中TouchableOpacity、Feather图标组件都没有显式导入，不导入的话运行时还会触发组件找不到的报错
• 你原有代码里导入的useRoute hook在当前逻辑中没有实际使用，可以删掉这个无效导入，避免打包时的冗余告警
• 不要尝试在导航器初始化阶段提前手动构造navigation对象，该对象的状态完全由react-navigation内部维护，手动构造会引发栈跳转异常的问题

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