时间戳

首页 > 解决方案 > React Navigation：实现注销导航的最佳方式？

reactjs - React Navigation：实现注销导航的最佳方式？

问题描述

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

解决此问题的最佳方法是什么，以便单击并Log out带我回到？TabNavigator_1TabNavigator_2Login

标签： reactjsreact-nativereact-navigationreact-navigation-stackstack-navigator

解决方案

使用

this.props.navigation.goBack()

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

我推荐的模式：

1）成功登录后，您将登录用户（仅 id 和 Essentials 凭据）存储在您的 asyncstorage 中。

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

在您的初始屏幕中

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

如果是 -> 进入 tabNavigator 屏幕

else -> 进入登录界面

粗略演示

<Stack.Navigator>
  {isLoggedIn ? (

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

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

推荐阅读