React Native调用useNavigation报错找不到navigation对象问题求助

错误Couldn't find a navigation object. Is your component inside NavigationContainer?触发原因是：useNavigation()钩子仅可在被NavigationContainer包裹、且已注册到导航器路由表的组件子树内调用，你当前的LoginButton所在组件树未接入React Navigation的导航上下文，因此无法获取导航实例。

方案1：标准路由注册（最推荐） #

这是React Navigation的标准用法，改动最小：

1. 在应用根组件（通常为App.js）外层套NavigationContainer，同时完成路由注册，示例代码如下：

// App.js
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginItem from './components/LoginItem/LoginItem'; // 替换为你实际的LoginItem存放路径
import HomeScreen from './screens/Home';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginItem} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 删除LoginItem.js中冗余的const Stack = createNativeStackNavigator();代码，该行不需要在业务组件内定义。

完成以上操作后，LoginItem已成为注册的路由页面，其所有子组件（包括LoginButton）都可以正常调用useNavigation()获取导航对象，原有LoginButton的代码无需修改即可正常运行。

方案2：Props透传导航对象 #

如果业务逻辑不需要将LoginItem注册为路由页，可以通过props逐层传递导航对象：

1. 在上层可以正常获取navigation的组件中，调用LoginItem时传递参数：

<LoginItem navigation={navigation} />

2. 在LoginItem中调用LoginButton时继续透传参数：

<LoginButton navigation={props.navigation} />

3. 修改LoginButton代码，直接使用props传入的导航对象，无需调用useNavigation()：

import React from "react";
import { View, Text, Pressable } from "react-native";
import styles from "./styles";

const LoginButton = (props) => {
  return (
    <View style={styles.container}>
      <Pressable
        onPress={() => props.navigation.navigate("Home")}
        style={styles.button}
      >
        <Text style={styles.buttontext}>Login</Text>
      </Pressable>
    </View>
  );
};

export default LoginButton;

方案3：全局NavigationRef适配非路由组件 #

如果LoginItem嵌套层级过深，逐层透传props成本较高，可以使用全局导航引用方案：

1. 新建navigationRef.js文件：

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

export const navigationRef = createNavigationContainerRef();

export function navigate(name, params) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  }
}

2. 修改根组件App.js，将全局引用绑定到NavigationContainer：

import { navigationRef } from './navigationRef';
// 其余导入保持不变

export default function App() {
  return (
    <NavigationContainer ref={navigationRef}>
      {/* 原有路由配置保持不变 */}
    </NavigationContainer>
  );
}

3. 修改LoginButton代码，直接导入全局导航方法使用：

import React from "react";
import { View, Text, Pressable } from "react-native";
import { navigate } from '../navigationRef'; // 替换为你实际的文件路径
import styles from "./styles";

const LoginButton = () => {
  return (
    <View style={styles.container}>
      <Pressable
        onPress={() => navigate("Home")}
        style={styles.button}
      >
        <Text style={styles.buttontext}>Login</Text>
      </Pressable>
    </View>
  );
};

export default LoginButton;

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