React Native中react-navigation多导航器间认证跳转失败求助

你的问题核心是两个导航器处于完全独立的上下文：MainNavigator（Tab导航）和AuthNavigator（Stack导航）没有被整合到同一个根导航容器中，导致Profile页面的navigation只能识别Tab导航器内的路由，无法访问另一个导航器里的Login页面。

解决步骤 #

1. 创建根导航器整合两个导航器

在项目主入口文件（如App.js）中，用一个Stack导航器作为根容器，将AuthNavigator和MainNavigator作为它的顶层屏幕，让所有导航器共享同一个导航上下文。

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import MainNavigator from './MainNavigator';
import AuthNavigator from './AuthNavigator';
import { useState } from 'react';

const Stack = createStackNavigator();

export default function App() {
  // 用状态管理登录状态，初始值根据实际登录情况设置
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        {/* 根据登录状态切换显示的导航器 */}
        {isLoggedIn ? (
          <Stack.Screen name="Main" component={MainNavigator} />
        ) : (
          <Stack.Screen name="Auth" component={AuthNavigator} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 修改登出逻辑，重置导航栈

在Profile页面的登出方法中，需要通过navigation.reset()清空当前导航栈并切换到Auth导航器，同时更新登录状态，避免用户通过返回键回到主页面。

const Profile = ({ navigation, route }) => {
  const logoutHandler = () => {
    // 1. 更新登录状态为未登录
    route.params.setIsLoggedIn(false);
    // 2. 重置导航栈，切换到Auth导航器
    navigation.reset({
      index: 0,
      routes: [{ name: 'Auth' }],
    });
  };

  return (
    <SafeAreaView>
      <TouchableOpacity onPress={logoutHandler}>
        <Text>Logout</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

3. 传递登录状态更新方法

在MainNavigator的Profile屏幕中，把App.js里的setIsLoggedIn作为参数传递过去：

// MainNavigator.js
<Tab.Screen
  name={'Profile'}
  component={Profile}
  initialParams={{ setIsLoggedIn: setIsLoggedIn }}
/>

关键说明 #

• 不要直接跳转Login路由，因为它是AuthNavigator内部的子路由，根导航器只识别Auth和Main这两个顶层路由。
• 使用reset()而非navigate()，是为了清除之前的导航历史，确保用户登出后无法返回主页面。

内容的提问来源于stack exchange，提问作者Mishen Thakshana