React Navigation：如何在BottomTabNavigator外打开WebView页面

我明白你的需求：你想让AdvantageClubScreen（也就是WebView页面）在打开时完全脱离底部的Tab栏，就像一个独立的新页面，而不是嵌套在Tab导航里。下面给你两种可行的方案，推荐第一种，结构更清晰：

方案一：调整导航层级（推荐） #

核心思路是把需要独立的AdvantageClubScreen从Beneficios的StackNavigator中抽出来，放到和BottomTabNavigator同级的根StackNavigator里。这样当你跳转到这个页面时，它会覆盖整个屏幕，底部Tab栏自然就隐藏了。

步骤1：重构导航结构 #

原来的结构是BottomTabNavigator包含Beneficios，而Beneficios是个StackNavigator。现在改成：

• 根导航是一个大的StackNavigator
  • 其中一个页面是你的BottomTabNavigator（包含Home、Beneficios、Repom、Profile）
  • 另一个页面就是独立的AdvantageClubScreen

代码示例：

// 先定义Beneficios的StackNavigator（移除WebView页面）
const AdvantageClubStack = createStackNavigator(
  {
    AdvantageClubSignUp: AdvantageClubSignUpScreen,
    AdvantageClubSignUpConfirm: AdvantageClubSignUpConfirmScreen,
    AdvantageClubTerms: AdvantageClubTermsScreen,
  },
  {
    initialRouteName: 'AdvantageClubSignUp',
    ...noHeader,
  },
);

// 定义BottomTabNavigator（Beneficios指向调整后的Stack）
const BottomTab = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarTestID: 'homeMenuButton',
        tabBarIcon: TabItem('home'),
      },
    },
    Beneficios: {
      screen: AdvantageClubStack,
      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 },
    },
  },
);

// 定义根StackNavigator，包含Tab导航和独立的WebView页面
const RootStack = createStackNavigator(
  {
    MainTabs: BottomTab,
    WebView: AdvantageClubScreen, // 独立存放WebView页面
  },
  {
    mode: 'modal', // 可选：设置为modal可以让页面像弹窗一样打开
    headerMode: 'none', // 根据需求设置是否显示头部
  },
);

// 导出根导航作为应用的导航组件
export default RootStack;

步骤2：跳转方式调整 #

现在从AdvantageClubStack里的任意页面跳转到WebView时，直接使用：

navigation.navigate('WebView');

打开的WebView页面就会完全独立，底部Tab栏不会显示。

方案二：动态隐藏底部Tab栏（适合不想重构结构的场景） #

如果不想调整导航层级，可以通过navigationOptions动态设置tabBarVisible为false，强制在WebView页面隐藏底部栏。

代码修改 #

在AdvantageClub的StackNavigator中，为WebView页面添加专属的导航配置：

const AdvantageClub = createStackNavigator(
  {
    WebView: {
      screen: AdvantageClubScreen,
      navigationOptions: ({ navigation }) => ({
        tabBarVisible: false, // 强制隐藏底部Tab栏
      }),
    },
    AdvantageClubSignUp: AdvantageClubSignUpScreen,
    AdvantageClubSignUpConfirm: AdvantageClubSignUpConfirmScreen,
    AdvantageClubTerms: AdvantageClubTermsScreen,
  },
  {
    initialRouteName: 'AdvantageClubSignUp',
    ...noHeader,
  },
);

不过这种方法有个小局限：WebView仍嵌套在Tab导航的层级里，某些场景下可能出现导航状态的异常，所以更推荐方案一的结构调整。

内容的提问来源于stack exchange，提问作者Flávio Costa