Question

我目前正在我的 react-native 应用程序中实施身份验证流程。我有一个 AppNavigator(bottom-tabs-navigator) 和一个 AuthNavigator (stack-navigator)。在我的 App.js 中，我有一个导航容器，我根据手机中是否存储了身份验证令牌来检查用户当前是否存在。然后我会根据是否有令牌来呈现正确的导航器。

<NavigationContainer ref={navigationRef} theme={MyTheme}>
  {!user ? (
    <AuthNavigator />
  ) : (
    <AppTabNavigator />
  )}
</NavigationContainer>

当用户退出时，我只需删除令牌并将用户变量设置为 null。

  const signout = () => {
    authStorage.removeToken();
    setUser(null);
  };

这一切正常，用户可以登录和退出，并呈现正确的导航器。但是，问题在于，如果用户退出，然后重新登录（作为同一用户或不同的用户），他们看到的第一个选项卡/屏幕是我的 TabNavigator 中的最后一个屏幕。我的导航器中有 5 个选项卡，用户登录时应该在第一个选项卡上，但他们被带到第 5 个选项卡。即使我将“initialRouteName”道具传递给导航器，它仍然会直接进入第 5 个屏幕。但是，用户第一次登录时不会发生此行为。它仅在退出然后重新登录后发生。这让我相信导航器的状态在用户退出后以某种方式持续存在。第 5 个选项卡是个人资料选项卡，这是用户退出的地方。因此，第 5 个选项卡将是用户退出前访问的最后一个选项卡。感谢任何可以提供帮助的人！

Answer 1

在“注销”功能上，就在您调用“注销”之前尝试重置导航器状态。
您可以查看有关重置导航器状态 here 的更多信息。

Answer 2

如果其他人遇到这个问题，我想我找到了一个很好的解决方案，至少目前是这样。在注销功能中，按照 D10S 的建议，我在 setUser(null) 之前重置了导航状态。我实际上从注销函数中完全删除了 setUser() 并将其添加到屏幕组件的 useEffect 清理中。因此，每当屏幕卸载时，清理功能都会检查是否存在身份验证令牌。如果没有令牌，则将用户设置为“空”。由于注销会导致令牌被删除，因此用户将被正确设置。此解决方案似乎在预期行为下运行良好，并且没有反应警告。

当用户退出 react-native 应用程序时，Tab Navigator 不会重置

2 个答案: