React-navigation开屏出底层导航。

Question

我有一个底部的TabNavigator，里面有一些屏幕组。

  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarTestID: 'homeMenuButton',
        tabBarIcon: TabItem('home'),
      },
    },
    Beneficios: {
      screen: AdvantageClub,
      navigationOptions: {
        tabBarTestID: 'beneficiosMenuButton',
        tabBarIcon: TabItem('loyalty'),
        tabBarLabel: 'Benefícios',
      },
    },
    Repom: {
      screen: RepomScreen,
      navigationOptions: {
        tabBarTestID: 'saldoMenuButton',
        tabBarIcon: TabItem('attach-money'),
        tabBarLabel: 'Saldo',
      },
    },
    Profile: {
      screen: Profile,
      navigationOptions: {
        tabBarTestID: 'profileMenuButton',
        tabBarIcon: TabItem('person'),
        tabBarLabel: 'Perfil',
      },
    },
  },
  {
    initialRouteName: 'Home',
    tabBarOptions: {
      activeTintColor: colors.blue.primary,
      inactiveTintColor: colors.blue.secondary,
      style: {
        height: 64,
        borderTopWidth: 0,
        paddingVertical: 0,
      },
      tabStyle: {
        paddingVertical: 8,
      },
    },
  },
); 

在 "Beneficios"（屏幕：AdvantageClub）里面，我有一个StackNavigator。

const AdvantageClub = createStackNavigator(
  {
    WebView: AdvantageClubScreen,
    AdvantageClubSignUp: AdvantageClubSignUpScreen,
    AdvantageClubSignUpConfirm: AdvantageClubSignUpConfirmScreen,
    AdvantageClubTerms: AdvantageClubTermsScreen,
  },
  {
    initialRouteName: 'AdvantageClubSignUp',
    ...noHeader,
  },
);

我需要从我的bottomTabNavigator中打开这个WebView(AdvantageClubScreen)，就像打开一个新窗口一样。当我使用navigator.navigate('WebView')时，底部菜单一直在屏幕上。

Answer 1

你使用的是什么版本的 react-navigation ?

我猜是V4，那么在你的嵌套StackNavigator "AdvantageClub "中你可以使用 tabBarVisible 财产 navigationOptions 像这样

AdvantageClub.navigationOptions = ({navigation}) => {
    const routes = navigation.state.routes;
    const tabBarVisible = routes[routes.length -1].routeName === 'WebView'
    return {tabBarVisible};
};