React Native实现用户认证时登录成功后无法找到导航路由跳转

React Native应用实现认证流程时，用户登录成功后无法跳转至主屏幕。

• 实现逻辑为判断AsyncStorage中存储的登录凭证，条件渲染两套导航器：未登录状态渲染登录/注册相关的Stack导航，已登录状态渲染包含主页面的Drawer导航
• 登录操作完成后，应用无法识别else分支渲染的Drawer导航，跳转流程中断
• 此前的排查判断认为问题出在App.js的useEffect执行逻辑上

• 双认证状态数据源不同步：App.js用本地state token 作为导航渲染的判断依据，AuthContext又单独维护了一套token状态，两套状态无任何联动。登录操作只更新了AuthContext的全局token，没有同步触发App.js的setToken，导致App.js的token状态始终为空，永远停留在未登录的Stack导航分支，Drawer导航根本不会被挂载。
• 判断条件与初始值不匹配：本地token初始值设置为空字符串""，但渲染判断条件写的是token == null，空字符串与null不相等，会导致初始渲染逻辑完全不符合预期。
• useEffect缺少依赖配置：useEffect没有设置依赖数组，会在每次组件重渲染时重复执行readData逻辑，频繁读取AsyncStorage赋值token，甚至覆盖登录后设置的正确凭证。
• 导航跳转时序错误：login方法在dispatch登录action、写入AsyncStorage后立刻执行RootNavigation.navigate("Episodes")，此时App还未根据新的token状态重新渲染出Drawer导航，导航栈中根本没有注册"Episodes"路由，跳转自然失败。
• AuthReducer存在语法漏洞：reducer的default分支只写了state没有return，会在触发未知action时导致全局状态为undefined，引发渲染报错。

• 统一认证状态数据源：删除App.js中单独维护的本地token state，直接从AuthContext读取全局token状态作为导航渲染的判断依据，保证状态单一来源，避免多状态不同步的问题。
• 修正初始状态与判断逻辑：将token初始值设为null，渲染判断条件改为!token，完全匹配已登录/未登录的分支渲染规则。
• 修复useEffect执行逻辑：给应用启动时的初始化逻辑加上空依赖数组[]，保证只在应用首次加载时执行一次本地token读取，完成初始状态校验。
• 调整导航逻辑：条件渲染的导航器不需要手动调用路由跳转，当token状态从null变为有值时，NavigationContainer会自动从Stack导航切换为Drawer导航，自动落到初始路由。删除login、logout、tryLocalLogin方法里所有手动RootNavigation.navigate的代码，避免导航器未挂载导致的跳转报错。
• 增加启动加载态：异步读取AsyncStorage的过程中不渲染任何导航器，避免渲染闪烁、临时路由跳转等问题。
• 修正reducer漏洞：在default分支补上return语句，保证未匹配到action时直接返回原状态。

App.js:

import { useContext, useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { AuthProvider, Context as AuthContext } from './AuthContext';
import { PaperProvider } from 'react-native-paper';
// 引入屏幕组件
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import VerifyScreen from './screens/VerifyScreen';
import HomeScreen from './screens/HomeScreen';
import EpisodeListScreen from './screens/EpisodeListScreen';
import AccountScreen from './screens/AccountScreen';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <AuthProvider>
      <PaperProvider theme={theme}>
        <RootNavigator />
      </PaperProvider>
    </AuthProvider>
  );
}

function RootNavigator() {
  const { state, tryLocalLogin } = useContext(AuthContext);
  const [isAuthLoaded, setIsAuthLoaded] = useState(false);

  useEffect(() => {
    // 仅在应用启动时执行一次本地凭证校验
    const initAuth = async () => {
      await tryLocalLogin();
      setIsAuthLoaded(true);
    };
    initAuth();
  }, []);

  // 异步校验完成前不渲染导航容器，避免闪烁
  if (!isAuthLoaded) return null;

  return (
    <NavigationContainer>
      {!state.token ? (
        <Stack.Navigator
          initialRouteName="Login"
          screenOptions={{ headerShown: false }}
        >
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="Register" component={RegisterScreen} />
          <Stack.Screen name="Verify" component={VerifyScreen} />
        </Stack.Navigator>
      ) : (
        <Drawer.Navigator initialRouteName="Home">
          <Drawer.Screen name="Home" component={HomeScreen} />
          <Drawer.Screen name="Episodes" component={EpisodeListScreen} />
          <Drawer.Screen name="Account" component={AccountScreen} />
        </Drawer.Navigator>
      )}
    </NavigationContainer>
  );
}

AuthContext.js核心修复点：

• 删除所有登录、登出、本地登录校验方法里的手动RootNavigation.navigate调用
• 修正reducer的default分支为default: return state;
• 登录成功后仅更新AsyncStorage和全局token状态，路由切换完全由导航容器根据状态变化自动完成

内容的提问来源于stack exchange，提问作者Joe B.