React Native+React Navigation：如何隐藏TabNavigator中的指定页面

这问题我太熟啦！核心思路就是把Tab导航器嵌套到一个Stack导航器里面，把那些不需要在Tab栏显示的页面放在Stack导航器中，这样跳转到这些页面时Tab栏会自动隐藏，完美符合你的需求。具体操作步骤如下：

1. 调整导航器结构 #

首先，我们需要先保留原有的TabNavigator（只放那5个要显示的页面），然后用一个StackNavigator把它和隐藏页面包裹起来：

// 导入需要的导航器（适配React Navigation v2/v3版本）
import { TabNavigator, StackNavigator } from 'react-navigation';

// 第一步：定义你的Tab导航栏，只保留需要显示的5个页面
const MainTabs = TabNavigator({
  Dashboard: { screen: DashboardContainer },
  NotificationContainer: { screen: NotificationContainer },
  Movements: { screen: MovementsContainer },
  TopOwners: { screen: TopOwnersContainer },
  Menu: { screen: MenuContainer },
});

// 第二步：创建主Stack导航器，把Tab导航和隐藏页面都加入进来
const AppNavigator = StackNavigator({
  // 把Tab导航作为Stack的一个主入口页面
  MainTabs: { screen: MainTabs },
  // 下面是你需要隐藏的页面，直接加到Stack里即可
  Screen6: { screen: Screen6Container },
  Screen7: { screen: Screen7Container },
  Screen8: { screen: Screen8Container },
}, {
  // 可选：如果不需要Stack导航的顶部标题栏，可以设置为none
  headerMode: 'none',
});

// 导出这个主导航器
export default AppNavigator;

2. 修改主入口的渲染组件 #

把原来直接渲染TabNavigator的地方，改成渲染我们新创建的AppNavigator：

const App = () => (
  <Root>
    <Provider store={store}>
      {/* 现在渲染主Stack导航器 */}
      <AppNavigator />
    </Provider>
  </Root>
);

3. 如何跳转到隐藏页面 #

在任何Tab栏页面里，只需要用navigation.navigate就能直接跳转到隐藏页面，比如在DashboardContainer中：

// 示例：跳转到Screen6
this.props.navigation.navigate('Screen6');

为什么这样有效？ #

当你跳转到Stack导航器里的隐藏页面时，这个页面会成为导航栈的栈顶元素，而原来的TabNavigator处于栈的下层，所以底部Tab栏会自动隐藏，完全符合你的需求。

如果你的项目用的是React Navigation v5+（新版本），语法会稍有不同，但核心逻辑还是一样的：用createBottomTabNavigator创建Tab导航，再用createStackNavigator把它和隐藏页面嵌套起来即可。

内容的提问来源于stack exchange，提问作者marcus-linmarkson