React Native中useNavigation报错：无法找到导航对象问题求助

错误原因 #

你在Navigation组件中直接调用useNavigation，但该组件是渲染NavigationContainer的父级——此时NavigationContainer尚未完成挂载，导航上下文还没创建，钩子自然无法获取到有效的navigation对象。

解决方法 #

方案一：将认证逻辑移到NavigationContainer内部的组件中 #

创建一个专门的初始化组件，放在NavigationContainer内部，这样就能正常使用useNavigation钩子：

import React, { useEffect } from 'react';
import { ActivityIndicator, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack';
import AuthManager from './components/AuthManager';
import SignUpScreen from './components/SignUpScreen';
import LoginScreen from './components/LoginScreen';
import ForgotPasswordScreen from './components/ForgotPasswordScreen';
import HomeNavigator from './components/HomeNavigator'

const Stack = createStackNavigator();

// 初始化屏：负责检查认证状态并跳转
const InitialScreen = () => {
  const navigation = useNavigation();
  
  useEffect(() => {
    const checkAuth = async () => {
      try {
        const hasToken = await AuthManager.isServiceTokenAvailable();
        console.log(hasToken);
        
        if (hasToken) {
          navigation.reset({
            index: 0,
            routes: [{ name: 'HomeNavigator' }],
          });
        } else {
          navigation.navigate('Login');
        }
      } catch (error) {
        console.log('Error checking authentication:', error);
        navigation.navigate('Login');
      }
    };
    
    checkAuth();
  }, []);

  // 可以返回加载动画提升用户体验
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ActivityIndicator size="large" />
    </View>
  );
};

const Navigation = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
          headerBackground: {} 
        }} >
        <Stack.Screen name="Initial" component={InitialScreen} />
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="SignUp" component={SignUpScreen} />
        <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
        <Stack.Screen name="HomeNavigator" component={HomeNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Navigation;

方案二：使用NavigationContainer的ref获取导航实例 #

通过useRef绑定NavigationContainer，直接获取导航对象来执行跳转：

import React, { useEffect, useRef } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AuthManager from './components/AuthManager';
import SignUpScreen from './components/SignUpScreen';
import LoginScreen from './components/LoginScreen';
import ForgotPasswordScreen from './components/ForgotPasswordScreen';
import HomeNavigator from './components/HomeNavigator'

const Stack = createStackNavigator();

const Navigation = () => {
  const navigationRef = useRef(null);

  useEffect(() => {
    const checkAuthentication = async () => {
      try {
        const hasToken = await AuthManager.isServiceTokenAvailable();
        console.log(hasToken);
        
        if (hasToken && navigationRef.current) {
          navigationRef.current.reset({
            index: 0,
            routes: [{ name: 'HomeNavigator' }],
          });
        }
      } catch (error) {
        console.log('Error checking authentication:', error);
      }
    };
    
    checkAuthentication();
  }, []);

  return (
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
          headerBackground: {} 
        }} >
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="SignUp" component={SignUpScreen} />
        <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
        <Stack.Screen name="HomeNavigator" component={HomeNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Navigation;

方案对比 #

• 方案一符合React Navigation的上下文使用规范，逻辑隔离清晰，适合需要展示加载状态的场景。
• 方案二更简洁，无需额外组件，适合简单的认证跳转需求。

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