React Native使用React Navigation跨导航栈跳转及登出跳转失败问题求解

• 导航栈配置逻辑错误：登录状态为true时，导航栈中未注册Main、Enter等授权页面，调用navigation.navigate('Main')时无法找到目标页面，导致跳转失败；未登录状态下同理没有内部页面的注册，也无法跳转至Run等页面。
• 登录状态未同步：登出操作仅清空了AsyncStorage，没有更新App组件中控制导航栈的loggedIn状态，父组件不会触发重渲染，导航栈自然不会切换。
• 初始化逻辑错误：getUserEmail直接写在组件顶层，每次组件渲染都会重复触发异步查询，release模式下时序不稳定更容易出现状态异常。
• 登出逻辑实现不合理：将LogOut作为Drawer页面指向Run组件，依赖路由参数触发登出的方式易出现参数丢失、逻辑漏判的问题。

明确回答你的两个疑问：既需要拆分两个独立导航栈实现逻辑隔离，也需要通过状态同步触发父组件重渲染更新导航栈，这是React Navigation官方推荐的认证流实现方式，具体修改步骤如下：

步骤1：拆分独立导航栈 #

将授权页和内部页完全拆分为两个独立导航栈，避免不同分类的页面混布，登录状态切换时直接替换整个导航栈，无需手动跳转：

• 未登录时仅返回授权栈，仅包含Main、Enter两个授权页面
• 登录后仅返回内部应用栈，包含Drawer导航和所有登录后可访问的页面

步骤2：实现登录状态同步 #

通过React Context将父组件的setLoggedIn方法传递给子页面，子页面执行登录/登出操作后直接调用该方法更新状态，触发父组件重渲染自动切换导航栈。

步骤3：优化Drawer登出逻辑 #

自定义Drawer内容，将LogOut作为独立按钮实现，无需绕到Run组件处理逻辑，避免参数依赖问题。

App.js #

import { createContext, useContext, useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';
// 导入你的页面组件
import Main from './Main';
import Enter from './Enter';
import Run from './Run';
import History from './History';
import Profile from './Profile';
import OtherRunners from './OtherRunners';
import Details from './Details';

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

// 自定义Drawer内容，新增LogOut按钮
function CustomDrawerContent(props) {
  const { setLoggedIn } = useContext(AuthContext);
  const handleLogout = async () => {
    await AsyncStorage.clear();
    setLoggedIn(false);
  };
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem label="LogOut" onPress={handleLogout} />
    </DrawerContentScrollView>
  );
}

// 登录后内部Drawer导航
function MenuDraw() {
  return (
    <Drawer.Navigator
      drawerContent={(props) => <CustomDrawerContent {...props} />}
      // 保留你原来的Drawer配置项
      drawerContentOptions={{}}
      drawerType={}
      drawerStyle={{}}
    >
      <Drawer.Screen name="Run" component={Run} options={{}} />
      <Drawer.Screen name="History" component={History} options={{}} />
      <Drawer.Screen name="Profile" component={Profile} options={{}} />
      <Drawer.Screen name="OtherRunners" component={OtherRunners} options={{}} />
    </Drawer.Navigator>
  );
}

// 登录后内部栈
function LoggedInStack() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName="MenuDraw">
      <Stack.Screen name="MenuDraw" component={MenuDraw} />
      <Stack.Screen name="Details" component={Details} />
    </Stack.Navigator>
  );
}

// 未登录授权栈
function AuthStack() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName="Main">
      <Stack.Screen name="Main" component={Main} />
      <Stack.Screen name="Enter" component={Enter} />
    </Stack.Navigator>
  );
}

const App = () => {
  const [loggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    // 初始化获取登录状态，仅执行一次
    async function getUserEmail() {
      const email = await AsyncStorage.getItem('@email');
      setLoggedIn(!!email);
    }
    getUserEmail();
  }, []);

  return (
    <AuthContext.Provider value={{ setLoggedIn }}>
      <NavigationContainer>
        {loggedIn ? <LoggedInStack /> : <AuthStack />}
      </NavigationContainer>
    </AuthContext.Provider>
  );
};

export default App;

登录页（Enter.js）补充逻辑 #

登录成功后调用Context中的setLoggedIn方法切换导航栈，无需手动跳转：

import { useContext } from 'react';
import { AuthContext } from './App';

// Enter组件内部登录成功后的逻辑
const Enter = () => {
  const { setLoggedIn } = useContext(AuthContext);
  const handleLoginSuccess = async (email) => {
    await AsyncStorage.setItem('@email', email);
    setLoggedIn(true);
  };
  // 其他逻辑
}

Run.js修改 #

删除原来依赖路由参数判断登出的逻辑，该部分已经移到自定义Drawer中实现。

修改后无需再手动调用navigation.navigate跨分类跳转页面，登录状态更新后会自动切换对应的导航栈，初始路由会自动生效，完全避免了跨栈找不到页面的问题，release模式下的时序异常问题也会同步解决。

内容的提问来源于stack exchange，提问作者K.Igor