如何实现主屏幕无Tab标签，其余页面使用TabNavigator？

我之前也碰到过一模一样的情况，你的问题根源在于导航层级的设置错误——你把HomeStackNav直接放进了TabNavigator里，这就意味着它是Tab的一个标签页，底部Tab自然会一直显示。要实现“主屏幕无Tab，其余页面用Tab导航”的需求，我们需要调整导航的嵌套结构：

具体步骤 #

1. 重构TabNavigator：把HomeScreen从Tab导航里移除，只保留需要显示Tab的页面：

const TabNav = TabNavigator({
  Dashboard: { screen: DashboardStackNav },
  Add: { screen: AddStackNav },
  Profile: { screen: ProfileStackNav },
}, {
  tabBarPosition: 'bottom',
  tabBarOptions: {
    activeTintColor: 'salmon',
    activeBackgroundColor: '#c0c1c4',
    inactiveTintColor: '#f4af55',
    inactiveBackgroundColor: 'white',
    // 你的其他tabBar配置（比如labelOptions等）继续保留
  }
});

2. 创建根StackNavigator：把HomeStackNav和TabNav作为根导航的两个同级页面，让HomeScreen处于最外层的导航层级：

const RootNav = StackNavigator({
  Home: { screen: HomeStackNav },
  MainTabs: { screen: TabNav },
}, {
  // 设置APP启动时默认加载HomeScreen
  initialRouteName: 'Home',
  // 如果不需要根导航的头部，可以设置为none
  headerMode: 'none'
});

3. 页面跳转逻辑：当你需要从HomeScreen跳转到带Tab的页面（比如Dashboard），直接调用：

this.props.navigation.navigate('MainTabs', { screen: 'Dashboard' });

这样调整后，HomeScreen作为根导航的初始页面，完全脱离Tab导航的层级，底部Tab就不会显示了；而其他页面都在TabNav里，会正常显示底部Tab标签。

内容的提问来源于stack exchange，提问作者Christian Lessard