React 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而不是Login。

解决此问题的最佳方法是什么，以便单击TabNavigator_1和TabNavigator_2中的Log out将我带回Login？

Answer 1

使用

this.props.navigation.goBack()

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

我推荐的模式：

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

2(按下注销按钮后，您可以从异步存储中清除该凭据。

在你的初始尖叫声中

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

如果是 ->必须进入选项卡导航器屏幕

否则 ->转到登录屏幕

粗略演示

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

Answer 2

您可以尝试使用：

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

基于此文档：

反应导航 4.x

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

Answer 3

首先创建这样的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 4

调度reset操作并导航到登录屏幕：

import { CommonActions } from "@react-navigation/native";
....
navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [{ name: "LoginScreen" }],
})
);

这样可以避免意外行为，例如辅助选项卡保持选中状态。