React Native嵌套StackNavigator登录跳转报错求助

错误原因 #

你当前的主导航器采用条件渲染Screen的方式：未登录时只渲染AuthNavigation，MainNavigation并未被加入导航栈。因此在LoginScreen中调用navigation.navigate('MainNavigation')时，导航器找不到该路由，触发报错。

解决方案 #

方案一：修改主导航结构，同时注册两个子导航 #

将两个子导航同时注册到主导航栈中，通过initialRouteName控制初始显示的页面，确保两个导航都存在于导航树内。

修改后的StackNavigation代码：

import React, {useEffect, useState} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import storage from '../services/storage';
import {useDispatch, useSelector} from 'react-redux';
import {setUser} from '../store/reducers/auth';
import AuthNavigation from './AuthNavigation';
import MainNavigation from './MainNavigation';

const {Navigator, Screen} = createStackNavigator();

const StackNavigation = () => {
  const [isLogged, setIsLogged] = useState(false);
  const dispatch = useDispatch();
  
  const loadUser = async () => {
    try {
      const data = await storage.get('USER');
      if (data !== null && data !== '') {
        console.log('Hello user', data);
        dispatch(setUser(data));
        setIsLogged(true);
      }
    } catch (error) {
      console.log('APP JS ERROR', error.message);
    }
  };

  useEffect(() => {
    loadUser();
  }, []);

  return (
    <Navigator 
      screenOptions={{headerShown: false}}
      initialRouteName={isLogged ? 'MainNavigation' : 'AuthNavigation'}
    >
      <Screen name="AuthNavigation" component={AuthNavigation} />
      <Screen name="MainNavigation" component={MainNavigation} />
    </Navigator>
  );
};

export default StackNavigation;

在LoginScreen登录成功后，使用reset方法跳转（避免用户返回登录页）：

// 登录成功逻辑执行完成后
navigation.reset({
  index: 0,
  routes: [{name: 'MainNavigation'}],
});
// 同时更新isLogged状态（如果用本地state）或redux状态
setIsLogged(true);

方案二：通过状态更新自动切换主导航 #

保持原条件渲染结构，登录成功后直接更新isLogged状态，主导航会自动重新渲染并切换到MainNavigation，无需手动调用导航方法。

例如在LoginScreen中：

// 登录成功后
const handleLoginSuccess = async (userData) => {
  await storage.set('USER', userData);
  dispatch(setUser(userData));
  // 更新isLogged状态（若用redux，需在StackNavigation中监听redux的auth状态）
  setIsLogged(true);
};

注意：如果使用redux管理登录状态，建议在StackNavigation中直接从redux获取isLogged，而非本地state，确保状态同步：

// StackNavigation中替换本地state
const isLogged = useSelector(state => state.auth.isLogged);

内容的提问来源于stack exchange，提问作者Salman Afzal