Реагируй навигацией на открытом экране из нижней части навигации

Question

У меня есть bottomTabNavigator с несколькими группами экранов:

  {
    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,
      },
    },
  },
); 

Внутри "Benefi cios" (screen: AdvantageClub) у меня есть один StackNavigator:

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

Мне нужно открыть этот WebView (AdvantageClubScreen) из моего bottomTabNavigator, как новое окно. Когда я использую navigator.navigate ('WebView'), нижнее меню остается на экране.

Answer 1

Какую версию реагирования-навигации вы используете?

Я думаю, это V4, тогда в вашем вложенном StackNavigator "AdvantageClub" вы можете использовать свойство tabBarVisible в navigationOptions с чем-то вроде этого:

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