React Native应用登录后无法跳转至首页问题求助

• 确认导航对象是否正确获取
  在LoginScreen组件中，需保证能拿到有效的navigation对象。如果是函数组件，可通过两种方式获取：

  // 方式1：使用useNavigation钩子
  import { useNavigation } from '@react-navigation/native';
  
  function LoginScreen() {
    const navigation = useNavigation();
    const handleLogin = () => {
      // 验证邮箱密码后执行导航
      navigation.navigate('Home');
    };
  }
  
  // 方式2：通过props接收
  function LoginScreen({ navigation }) {
    const handleLogin = () => {
      navigation.navigate('Home');
    };
  }
  

• 核对路由名称是否完全匹配
  检查导航容器中注册的首页路由名称，必须和navigate方法里传入的名称完全一致（比如注册的是HomeScreen，就不能写成navigate('Home')）。

• 异步登录需等操作完成再跳转
  如果登录涉及接口请求等异步逻辑，要确保导航操作在异步任务成功后执行：

  const handleLogin = async () => {
    try {
      await yourLoginApi(email, password); // 执行登录请求
      navigation.navigate('Home'); // 登录成功后再跳转
    } catch (error) {
      console.error('登录失败', error);
    }
  };
  

• 嵌套导航场景可重置导航栈
  若LoginScreen嵌套在子导航器中，直接navigate可能无效，可通过重置导航栈将首页设为根路由：

  navigation.reset({
    index: 0,
    routes: [{ name: 'Home' }],
  });
  

• 检查导航容器是否正确包裹根组件
  确保整个应用的根组件被NavigationContainer包裹，否则导航功能无法正常工作：

  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  
  const Stack = createStackNavigator();
  
  export default function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Login">
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
  

对照你的项目，优先排查LoginScreen中登录按钮的点击事件是否正确调用导航方法，再核对路由配置，基本就能解决问题。

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