如何在react Native中处理多个导航器(react navigation)上的身份验证

Question

这是我在MainNavigator.js、中的选项卡导航器

const MainNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen
name={'Home'}
component={Home} />
<Tab.Screen
name={'About'}
component={About} />
<Tab.Screen
name={'Profile'}
component={Profile} />
</Tab.Navigator>
) 
}

我有一个AuthNavigator.js，它包括一个堆栈导航器，

const AuthNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name={'Login'} component={Login} />
<Stack.Screen name={'Signup'} component={Signup} />
</Stack.Navigator>
}

因此，我在选项卡导航器的配置文件屏幕上有一个注销按钮。我想通过onPress事件导航到AuthNavigator中的登录屏幕。，以下是我尝试的方法

const Profile = ({navigation}) => {
const logoutHandler = () => {
navigation.navigate('Login');
}
<SafeAreaView>
<TouchableOpacity onPress={logoutHandler}>
<Text>Logout</Text>
</TouchableOpacity>
</SafeAreaView>
}

然而，这并不奏效。作为React Native的初学者，我不知道如何将这个Login路由链接到Stack屏幕中。如果有人能救我一天，我真的很感激。非常感谢。

Answer 1

1. 全局管理1个状态(使用redux或其他状态管理工具(，即isAuthenticated。

2. 然后在您的App.js中，或者在您定义了根导航器的地方，进行类似的更改：-

<NavigationContainer>
{ isAuthenticated ? <AuthRoutes /> : <UnAuthRoute />
</NavigationContainer>

3. 登录和注销时，您必须更新此isAuthenticated状态，然后根据状态处理路由