错误：“找不到导航对象。您的组件在 NavigationContainer 内吗？”在 React Native 中使用 useNavigation

Question

我正在尝试创建类似登录屏幕的东西。但如果用户有一个活跃的令牌。他们不必重新进行身份验证。

``

import React, { useEffect } from 'react';
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 Navigation = () => {
  const navigation = useNavigation();
  
    useEffect(() => {
    checkAuthentication(navigation); 
  }, []);

  const checkAuthentication = async (navigation) => {
    try {
      const hasToken = await AuthManager.isServiceTokenAvailable();

      console.log(hasToken);

      if (hasToken) {

        navigation.reset({
          index: 0,
          routes: [{ name: 'HomeNavigator' }],
        });
        
      }
    } catch (error) {
      console.log('Error checking authentication:', error);
    }
  };

  return (
    <NavigationContainer>
      <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 Native 应用程序中使用来自 @react-navigation/native 的 useNavigation 挂钩时遇到错误。我有一个封装在 NavigationContainer 中的组件，并且我正在尝试使用 useNavigation 挂钩在函数内导航。但是，我收到错误消息“无法找到导航对象。您的组件在 NavigationContainer 内吗？”当函数 r

Answer 1

您的 return 语句有一个 NavigationContainer。但你说该组件被包装在一个 NavigationContainer 中。你知道这不是一回事吗？为了能够使用 useNavigation()，您的导航组件需要包装在 navigationContainer 中。因此，无论在哪里使用它，大概是 App.ts，您都应该将其包装在 NavigationContainer 中：

const App = () => {
  return (
      <NavigationContainer> 
        <Navigation />
      </NavigationContainer>
  );
};
export default App;

你做到了吗？那么在这里也有一个 navigationContainer 可能就没有意义了。除非你想使用嵌套导航。但我认为你不需要这样做。