在反应导航中导航到不同的堆栈

Question

我有一个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" }
  }
);

在注销时，在底部选项卡导航器中，我想导航到切换导航器（到Auth屏幕）。如何在反应导航中的不同堆栈之间导航？

Answer 1

你能改成以下吗？

将你的TabNavigation'mainBottomStack'添加到SwitchNavigation

const RootStack = createSwitchNavigator(
  {
    AuthLoadingScreen: AuthLoadingScreen,
    Auth: AuthStack,
    AADB2CLogin: AADB2CLogin,
    Home: mainBottomStack,
    TabNavigation: mainBottomStack
  },
  {
    initialRouteName: "AuthLoadingScreen",

    transitionConfig
  }
);

然后导航到'Auth'屏幕，如下所示，

this.props.navigation.navigate("Auth");

Answer 2

您可以通过在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 }
      );
    }
  })
}