react-navigation v6切换鉴权流程栈时如何重置导航栈状态

问题根因 #

你之前的写法无效有两个核心原因：

1. 你调用navigation.reset时使用的是当前页面所属嵌套栈的导航对象，作用域仅覆盖当前嵌套栈（比如你在个人中心页调用，操作的只有ProfileStack的栈状态），无法修改根导航的全局状态
2. React Navigation会默认缓存未渲染的导航栈状态，你切换到鉴权栈后，业务栈的历史状态会被保留，下次切回业务栈时会直接复用缓存状态，所以会回到登出前的页面

解决方案 #

推荐两种可直接落地的方案，优先选第一种，是官方推荐的鉴权流处理方案：

方案1：给NavigationContainer绑定动态key（最简方案） #

给根导航容器加key属性，值依赖用户登录状态，登录状态切换时整个导航容器会重新挂载，自动清空所有历史栈状态，不需要手动操作导航API。
代码修改如下：

const { user } = userContext;

<NavigationContainer key={user ? 'logged-in' : 'logged-out'}>
  {/* 原有导航逻辑完全不需要修改 */}
  {user === null ? (
    <AuthStack.Navigator
      initialRouteName={"SignIn"}
      screenOptions={{ headerShown: false }}
    >
      <AuthStack.Screen name="SignIn" component={SigninScr} />
      <AuthStack.Screen name="SignUp" component={SignupScr} />
      <AuthStack.Screen
        name="EmailVerification"
        component={EmailVerificationScr}
      />
    </AuthStack.Navigator>
  ) : (
    <Tab.Navigator
      initialRouteName={'HomeStack'}
      screenOptions={{ headerShown: false}}
    >
      <Tab.Screen name={'HomeStack'} children={()=><HomeStack />}/>
      <Tab.Screen name={'DiscoverStack'} children={()=><DiscoverStack />}/>
      <Tab.Screen name={'CalendarStack'} children={()=><CalendarStack />}/>
      <Tab.Screen name={'ProfileStack'} children={()=><ProfileStack />}/>
    </Tab.Navigator>
  )}
</NavigationContainer>

登出逻辑直接删除原来的navigation.reset代码，只保留setUser(null)即可，重新登录时会自动触发Tab导航的initialRouteName配置，直接进入首页栈。

方案2：通过根导航ref手动重置状态 #

如果不想让导航容器重新挂载，可以通过全局的根导航ref操作根状态：

1. 先定义根导航的ref

import { NavigationContainer } from '@react-navigation/native';
// 全局定义导航ref
const navigationRef = React.createRef();

// 组件内绑定ref
<NavigationContainer ref={navigationRef}>
  {/* 原有导航逻辑不变 */}
</NavigationContainer>

2. 修改登出逻辑

const { setUser } = this.context;
// 直接操作根导航重置到鉴权栈的登录页
navigationRef.current?.reset({
  index: 0,
  routes: [{ name: 'SignIn' }],
});
setUser(null);

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