代码之家 › 专栏 › 技术社区 › 3iL

在react navigation中导航到其他堆栈

react-navigation react-native

0

3iL · 技术社区 · 6 年前

我有一个开关导航器和底部标签导航器。Swich Navigator具有登录屏幕,底部选项卡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" }
  }
);

注销时,在底部选项卡导航器中,我想导航到切换导航器(到身份验证屏幕)。如何在react导航中在不同堆栈之间导航?

0 回复 | 直到 6 年前

1

Jebin Benny 6 年前

你能换成以下内容吗?

添加你的 TabNavigation “main bottomstack”位于 SwitchNavigation

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

    transitionConfig
  }
);

然后导航到“Auth”屏幕,如下所示:,

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

2

1

3iL 6 年前

您可以通过在中执行以下操作来实现 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 }
      );
    }
  })
}