我有一个Switch Navigator和Bottom Tab Navigator。 Swich Navigator具有登录屏幕,Bottom Tab Navigator具有主屏幕和注销屏幕。
Switch Navigator:
const RootStack = createSwitchNavigator(
{
AuthLoadingScreen: AuthLoadingScreen,
Auth: AuthStack,
AADB2CLogin: AADB2CLogin,
Home: mainBottomStack
},
{
initialRouteName: "AuthLoadingScreen",
transitionConfig
}
);
底部标签导航器:
const mainBottomStack = createBottomTabNavigator(
{
Home: mainStack,
MedicalRecord: MedicalRecordStack,
//MedicalRecord: PatientDetails,
Visit: VisitStack,
Alerts: AlertStack,
Profile: PatientDetails,
//Settings: Logout
Logout: {
screen: () => null,
navigationOptions: {
tabBarOnPress: () => {
Alert.alert(
"Logout",
"Are you sure you want to logout?",
[
{
text: "No",
style: "cancel"
},
{
text: "Yes",
onPress: () => {
console.log("logout");
//I want to navigate to switch navigator's Auth screen here...
}
}
],
{ cancelable: false }
);
}
}
}
},
{
transitionConfig,
initialRouteName: "Home",
barStyle: { backgroundColor: "#694fad" }
}
);
注销后,在底部标签导航器中,我想导航到“切换”导航器(“身份验证”屏幕)。如何在反应导航中的不同堆栈之间导航?
答案 0 :(得分:0)
您可以更改以下内容吗?
将您的TabNavigation
'mainBottomStack'添加到SwitchNavigation
const RootStack = createSwitchNavigator(
{
AuthLoadingScreen: AuthLoadingScreen,
Auth: AuthStack,
AADB2CLogin: AADB2CLogin,
Home: mainBottomStack,
TabNavigation: mainBottomStack
},
{
initialRouteName: "AuthLoadingScreen",
transitionConfig
}
);
然后导航到“验证”屏幕,如下所示,
this.props.navigation.navigate("Auth");
答案 1 :(得分:0)
您可以通过在createBottomTabNavigator
中执行以下操作来使其起作用:
Logout: {
screen: () => null,
navigationOptions: ({ navigation }) => ({
tabBarOnPress: () => {
Alert.alert(
"Logout",
"Are you sure you want to logout?",
[
{
text: "No",
style: "cancel"
},
{
text: "Yes",
onPress: () => {
//console.log("logout");
AsyncStorage.setItem("token", null);
navigation.navigate("Auth");
}
}
],
{ cancelable: false }
);
}
})
}