react-native - 使用 react-navigation 切换身份验证流堆栈时如何重置堆栈

Question

我有一个使用 react-navigation v6 的 React Native 项目。这是导航结构：

const { user } = userContext;

<NavigationContainer>
  {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>

本质上，有两个堆栈：

• 身份验证堆栈
  • 登录屏幕，注册屏幕等...
• 常规堆栈
  • 4 个嵌套堆栈（主堆栈、发现堆栈、日历堆栈、配置文件堆栈）

我正在使用 React Context 从身份验证堆栈切换到常规堆栈（或常规堆栈到身份验证堆栈）

问题是当用户注销并重新登录时，他们的堆栈从未被重置，他们被定向到他们注销的屏幕。例如，用户 A 登录并进入配置文件屏幕，然后按注销。用户 A 现在重新登录，而不是被发送到主屏幕，而是被发送回个人资料屏幕。

我希望在用户注销时重置常规堆栈的导航状态。我试过这样做，但它不起作用（用户仍然被发送到配置文件屏幕）：

const { setUser } = this.context;
const { navigation } = this.props
navigation.reset({
  index: 0,
  routeNames: ['Home'],
  routes: [{ name: 'Home' }],
});
setUser(null);

切换堆栈以进行身份​​验证流时，如何完全重置堆栈？

作为参考，这是常规堆栈中的堆栈之一的样子：

const HomeStack = () => (
  <Stack.Navigator screenOptions={{
    headerTintColor: 'white',
    headerTitleStyle: { color: 'white' },
    headerStyle: { backgroundColor: colors.primary0 },
  }}
  >
    <Stack.Screen name={'HomeScr'} component={HomeScr} />
    ...
  </Stack.Navigator>
);

实际行为：

预期行为：