React-navigation 从底部导航中打开屏幕答案

【问题标题】：React-navigation open screen out of bottomNavigationReact-navigation 从底部导航中打开屏幕
【发布时间】：2020-04-29 13:56:25
【问题描述】：

我有一个带有一些屏幕组的底部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') 时，底部菜单保持在屏幕上。

【问题讨论】：

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

标签： react-native react-navigation stack-navigator

【解决方案1】：

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

我猜它是 V4，然后在嵌套的 StackNavigator “AdvantageClub”中，您可以使用 navigationOptions 中的 tabBarVisible 属性，如下所示：

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

【讨论】：