reactjs - react 导航 : best way to implement logout navigation?

Question

我在我的 React Native 应用程序中使用 react-navigation@4.0.10，并且有一个 Login 屏幕和两个 TabNavigator 屏幕.从 Login 屏幕登录会将我带到 TabNavigator_1，如果我从 TabNavigator_1 注销，我只需使用 this.props.navigation .goBack()。问题是，为了到达 TabNavigator_2，我点击了 TabNavigator_1 中的一个按钮，它触发了 this.props.navigation.navigate('TabNavigator_2')，所以 TabNavigator_2 现在位于堆栈的顶部，调用 this.props.navigation.goBack() 只会带我回到 TabNavigator_1 登录。

解决此问题的最佳方法是什么，以便从 TabNavigator_1 和 TabNavigator_2 单击Log out 返回Login?

Answer 1

使用

this.props.navigation.goBack()

返回登录屏幕对我来说是非常糟糕的模式。

我推荐的模式:

1) 成功登录后，您将登录用户(仅 id 和基本凭据)存储在您的异步存储中。

2) 按下注销按钮后，您将从 asyncStorage 中清除该凭据。

在您的初始屏幕中

检查asyncStorage中是否有登录用户信息

If yes -> got to tabNavigator screen

else -> go to login screen

粗略演示

<Stack.Navigator>
  {isLoggedIn ? (

    <Stack.Screen name="Home" component={TabNavigator} />

  ) : (
    <Stack.Screen name="SignIn" component={LogInScreen} />
  )}
</Stack.Navigator>