当用户在 react-native 应用程序中注销时，选项卡导航器不会重置

Posted 2023-02-19

【中文标题】当用户在 react-native 应用程序中注销时，选项卡导航器不会重置

【英文标题】：Tab Navigator is not resetting when user signs out in react-native app

【发布时间】：2021-09-23 05:20:14

【问题描述】：

我目前正在我的 react-native 应用程序中实现身份验证流程。我有一个 AppNavigator（底部标签导航器）和一个 AuthNavigator（堆栈导航器）。在我的 App.js 中，我有一个 navigationContainer，我根据手机中是否存储了身份验证令牌来检查用户当前是否存在。然后我根据是否有令牌来渲染正确的导航器。

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

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

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

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

【问题讨论】：

你能不能说在注销时他应该再次导航到登录屏幕？

我不确定你的意思。当用户退出时，他们被导航到登录屏幕。那部分工作正常。问题是，如果用户重新登录，他们不会导航到 TabNavigator 中的初始路由。

假设登录屏幕是一个 StackNavigator，如果用户登录到选项卡导航器。在注销时，您导航到 StackLogin，然后您只登陆必须重新登录的地方，这就是我在应用程序中设置它的方式

【参考方案1】：

在“注销”功能上，在您调用“注销”之前尝试重置导航器状态。 你可以看到更多关于重置导航器状态here。

【讨论】：

我尝试了这个解决方案，虽然它确实解决了最初的问题，但它会导致“无法在未安装的组件上执行状态更新”警告。我相信这是因为我重置了卸载当前屏幕的导航器，然后我尝试 setUser()。我不确定该警告在这种情况下是否非常重要，因为它运行正常并且状态似乎已正确更新，但我想找到一个尽可能不给我此警告的解决方案。

如果你试图把它放在“signout”之后呢？

如果我要在“退出”之后执行此操作，那么我会收到有关导航器未准备好的错误，因为一旦用户设置为 null，组件就会卸载。如果您有兴趣看一下，我提供了我在此答案下方提出的解决方案。

【参考方案2】：

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