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

Question

我正在使用 [email protected] 在我的React Native应用中，有一个叫做 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 而不是 Login.

什么是最好的方式来处理这个问题，以便点击 Log out 从 TabNavigator_1 和 TabNavigator_2 带我回到 Login?

Answer 1

你可以尝试使用.NET技术。

this.props.navigation.navigate("Login")

基于这个文档。

React Navigation 4.x

如果你在用户点击注销按钮后清除asyncStorage会更好。

Answer 2

首先像这样创建TabNavigator_1:-。

const TabNavigator1 = createBottomTabNavigator({
 Home: HomeScreen,
Settings: SettingsScreen,
});

创建第二个TabNavigator_2，就像这样:-。

const TabNavigator2 = createBottomTabNavigator({
 Home: HomeScreen,
 Settings: SettingsScreen,
});

然后堆栈导航器:-

  const StackNavigator = createStackNavigator(
{
  Login: LoginScreen,
  Tab1: TabNavigator1,
  Tab2: TabNavigator2,
},
{
  initialRouteName: 'Login',
}
);

一个主导航器:-

{this.state.isLogin ? <StackNavigator/> : <TabNavigator1/>}

在注销时，你可以像这样：-

onPress=()=>{this.props.navigation.navigate('Login')}

或者

onPress=()=>{this.props.navigation.push('Login')}

希望能帮到你!!!

Answer 3

使用

this.props.navigation.goBack()

回到登录界面对我来说是非常糟糕的模式。

我推荐的模式是

1) 登录成功后，将登录的用户(只有id和基本信息)保存在asyncstorage中。

2)在按下注销按钮后，你从asyncStorage中清除该凭证。

在你的初始页面

检查asyncStorage内是否有登录的用户信息。

如果是->则进入tabNavigator界面。

否则 -> 进入登录界面

粗略演示

<Stack.Navigator>
  {isLoggedIn ? (

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

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