React-Native中如何成功登出并跳转回应用主屏幕？

核心问题定位 #

• 你在OrgTabs组件中额外加了带independent={true}的NavigationContainer，导致子Tab导航和父级RootStack导航完全隔离，内部的navigation对象只能识别Tab内的4个页面，找不到父级的Welcome等路由
• 当前RootStack的路由分组逻辑冗余，没有利用Redux状态驱动导航自动切换的特性，反而增加了路由冲突概率

分步修复方案 #

1. 修复OrgTabs嵌套导航配置 #

删掉OrgTabs里多余的独立NavigationContainer，直接返回Tab.Navigator即可，全局只需要保留RootStack里的一个NavigationContainer：

// 修改后的OrgTabs.js
import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {Octicons} from '@expo/vector-icons';

//screens
import OrgSettings from '../../screens/org/OrgSettings';
import OrgHomeScreen from '../../screens/org/OrgHomeScreen';
import OrgAnalytics from '../../screens/org/OrgAnalytics';
import OrgChat from '../../screens/org/OrgChat';

const Tab = createBottomTabNavigator();

export default function OrgTabs() {
  return (
      <Tab.Navigator
        screenOptions={{
          tabBarShowLabel: false,
          tabBarStyle: {
            position: 'absolute',
            backgroundColor: '#f38484', 
            borderTopRightRadius: 2,
            borderTopLeftRadius: 2,
          },
          headerTransparent : true,
          headerShown: false,
          tabBarActiveBackgroundColor: '#d64547',
        }}
      >
        <Tab.Screen 
          name="Settings" 
          component={OrgSettings}
          options={{
            tabBarIcon: () => <Octicons name='gear' size={25} color='white'/>
          }}
        />
        <Tab.Screen 
          name="Home" 
          component={OrgHomeScreen}
          options={{
            tabBarIcon: () => <Octicons name='home' size={25} color='white'/>
          }} 
        />
        <Tab.Screen 
          name="Chat" 
          component={OrgChat} 
          options={{
            tabBarIcon: () => <Octicons name='comment-discussion' size={25} color='white'/>
          }}
        />
        <Tab.Screen 
          name="Analytics" 
          component={OrgAnalytics} 
          options={{
            tabBarIcon: () => <Octicons name='graph' size={25} color='white'/>
          }}
        />
      </Tab.Navigator>
  );
}

2. 优化RootStack路由分组逻辑 #

简化分组，只保留对应状态下必要的路由，利用Redux token状态自动切换导航树，token清空后会自动回退到未登录组的第一个页面（Welcome），不需要手动跳转：

// 修改后的Rootstack.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

//screens
import Welcome from '../screens/Welcome';
import SignIn from '../screens/SignIn';
import UserSignIn from '../screens/UserSignIn.js';
import StaffSignIn from '../screens/StaffSignIn';
import StaffSignUp from '../screens/StaffSignUp';
import OrgSignIn from '../screens/OrgSignIn';
import OrgSignUp from '../screens/OrgSignUp';
import OrgTabs from '../components/molecules/OrgTabs';
import TestScreen from '../screens/org/TestScreen';

// selecetors and hooks
import { useSelector } from 'react-redux';
import { selectToken } from '../features/user/userSlice';

const Stack = createStackNavigator();
const RootStack = () => {
    const token = useSelector(selectToken)
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerShown: true,
                    headerTitle:'',
                    headerTransparent: true
                }}
            >
                { token ?
                    // 已登录状态仅保留需要鉴权的路由
                    (<Stack.Group>
                        <Stack.Screen name="OrgTabs" component={OrgTabs} />
                        <Stack.Screen name="TestScreen" component={TestScreen} />
                    </Stack.Group>)
                    :
                    // 未登录状态仅保留认证相关路由，第一个为默认进入页
                    (<Stack.Group screenOptions={{ headerShown: false }}>
                        <Stack.Screen name="Welcome" component={Welcome} />
                        <Stack.Screen name="SignIn" component={SignIn} />
                        <Stack.Screen name="UserSignIn" component={UserSignIn} />
                        <Stack.Screen name="StaffSignIn" component={StaffSignIn} />
                        <Stack.Screen name="StaffSignUp" component={StaffSignUp} />
                        <Stack.Screen name="OrgSignIn" component={OrgSignIn} />
                        <Stack.Screen name="OrgSignUp" component={OrgSignUp} />
                    </Stack.Group>)
                }
            </Stack.Navigator>
        </NavigationContainer>
      );
}

export default RootStack;

3. 新增清空token的Redux action #

在userSlice中添加清空token的reducer，同时修正之前StaffSignIn里storeToken方法将refreshToken错误存入token字段的问题：

// userSlice.js 新增代码
const userSlice = createSlice({
  name: 'user',
  initialState: {
    token: null,
    refreshToken: null
  },
  reducers: {
    setToken: (state, action) => {
      state.token = action.payload
    },
    setRefreshToken: (state, action) => {
      state.refreshToken = action.payload
    },
    // 新增清空鉴权信息的方法
    clearAuth: (state) => {
      state.token = null
      state.refreshToken = null
    }
  }
})

export const { setToken, setRefreshToken, clearAuth } = userSlice.actions

4. 实现登出逻辑 #

比如在OrgSettings页面的登出按钮点击事件中写如下逻辑，清空本地存储和Redux状态后，导航会自动切换到Welcome页：

// OrgSettings.js 登出逻辑示例
import { useDispatch } from 'react-redux';
import * as SecureStore from "expo-secure-store";
import { clearAuth } from '../features/user/userSlice';

const OrgSettings = () => {
  const dispatch = useDispatch()

  const handleLogout = async () => {
    // 清空本地存储的鉴权信息
    await SecureStore.deleteItemAsync('token')
    await SecureStore.deleteItemAsync('refreshToken')
    // 清空Redux中的鉴权状态
    dispatch(clearAuth())
  }

  return <Button onPress={handleLogout} title="登出" />
}

可选：全局导航跳转方案 #

如果确实需要在任意位置手动跳转路由，可以配置全局NavigationRef，不受当前导航层级限制：

// Rootstack.js 新增全局导航ref
import { createNavigationContainerRef } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef()

// NavigationContainer绑定ref
<NavigationContainer ref={navigationRef}>
  {/* 原有导航配置 */}
</NavigationContainer>

// 任意位置调用跳转，不需要当前组件的navigation对象
import { navigationRef } from './Rootstack';
navigationRef.navigate('Welcome')

内容的提问来源于stack exchange，提问作者Mbami Luka