React Native useNavigation报错：无法找到导航对象的解决咨询

问题背景 #

开发React Native MERN聊天应用时，新增个人资料页，尝试通过菜单按钮结合useNavigation实现页面跳转，出现错误：

Couldn't find a navigation object. Is your component inside NavigationContainer?

按钮实际处于NavigationContainer内部，且无菜单时跳转逻辑可行，但带菜单时失效。

错误原因 #

1. 无效的useNavigation调用位置：在App组件顶层使用useNavigation()，但App是NavigationContainer的父组件，不在导航上下文范围内，无法获取有效的navigation对象。
2. MenuItem的onPress写法错误：直接写navigation.navigate('Profile')会在组件渲染时立即执行跳转，而非点击菜单时触发。

解决方法 #

步骤1：移除无效的useNavigation调用 #

删除App组件中的const navigation = useNavigation();代码，该组件不在导航上下文内，无法正确获取导航对象。

步骤2：从Screen的options参数中获取navigation #

在Home页面的Stack.Screen配置中，通过options函数的参数解构出navigation对象，这是在header组件中获取导航实例的正确方式。

步骤3：修正MenuItem的onPress逻辑 #

用箭头函数包裹跳转代码，确保点击菜单时才执行跳转，同时可添加关闭菜单的逻辑提升用户体验。

修改后的代码示例 #

import React from 'react';
import storage from './storage';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { LogBox, ActivityIndicator, Button, TouchableOpacity, View } from 'react-native';
import { Menu, MenuItem, MenuDivider } from 'react-native-material-menu';
import Icon from 'react-native-vector-icons/Entypo';
import ProfileScreen from './Profile.Screen';
// rest of the imports...

const Stack = createNativeStackNavigator();

export default function App() {
  const [savedData, setSavedData] = React.useState(null)
  const [fetching, setFetching] = React.useState(false)
  const [receiver, setReceiver] = React.useState(null)
  const [visible, setVisible] = React.useState(false);

  // 移除了无效的useNavigation调用

  // rest of the code...

  return (
    <ThemeProvider>
      <NavigationContainer>
        <Stack.Navigator>
          {isSignedIn && <>
            <Stack.Screen 
              name="Home" 
              component={ChatList} 
              initialParams={params} 
              options={({ navigation }) => ({ // 从参数解构navigation
                title: "myApp", 
                headerRight: () => (
                  <View style={{ marginRight: 3 }}>
                    <Menu
                      visible={visible}
                      anchor={
                        <Icon
                          name="dots-three-vertical"
                          size={20}
                          color="black"
                          onPress={() => setVisible(true)}
                        />
                      }
                      onRequestClose={() => setVisible(false)}
                    >
                      {/* 箭头函数包裹跳转逻辑，点击时执行 */}
                      <MenuItem onPress={() => {
                        navigation.navigate('Profile');
                        setVisible(false); // 点击后关闭菜单
                      }}>My Profile</MenuItem>
                      <MenuItem onPress={changeTheme}>Change Theme</MenuItem>
                      <MenuItem onPress={() => handleLogout(user)}>Log Out</MenuItem>
                    </Menu>
                  </View>
                )
              })} 
            />
            <Stack.Screen name="Chat" component={Chat} initialParams={params} options={() => ({ title: receiver })} />
            <Stack.Screen name="Users" component={UsersScreen} initialParams={params} />
            <Stack.Screen name="Profile" component={ProfileScreen} initialParams={params} options={{ title: 'My Profile' }} />
          </>)}

          {!isSignedIn && <>
            <Stack.Screen name="SignIn" component={SignInScreen} initialParams={{ onSignIn }} options={() => ({ title: "myApp" })} />
            <Stack.Screen name="ForgotPassword" component={ForgetPassword} />
          </>)}
        </Stack.Navigator>
      </NavigationContainer>
    </ThemeProvider>
  )
}

关键说明 #

• 导航上下文仅存在于NavigationContainer内部的组件中，App作为外层组件无法直接获取，需通过Stack.Screen的options参数传递。
• 所有需要点击触发的事件逻辑，必须用箭头函数或绑定函数包裹，避免组件渲染时立即执行。

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