如何实现Bottom tab全页面显示及header设为false仍展示问题

底部Tab全局渲染问题 #

你当前的路由结构应该是将Tab导航嵌套在了Stack导航的单页面下，仅Tab导航内部的页面会渲染底部Tab，跳转到Stack根层级的其他页面时Tab自然会消失。要实现所有页面都常驻显示底部Tab，调整路由结构即可：

• 将根导航调整为Tab导航，原有的全部Stack导航作为Tab导航某一项的子路由
• 所有需要展示Tab的页面都放到Tab导航下的子Stack路由中，不要直接在根层级配置独立Stack页面
  代码参考：

// 错误路由结构（仅Tab下的页面能看到底部Tab）
<Stack.Navigator>
  <Stack.Screen name="TabRoot" component={TabNavigator} />
  <Stack.Screen name="SecondPage" component={SecondPage} />
</Stack.Navigator>

// 正确路由结构（所有子Stack页面都能看到底部Tab）
<Tab.Navigator screenOptions={{ headerShown: false }}>
  <Tab.Screen name="MainStack" component={MainStack} />
  <Tab.Screen name="OtherTab" component={OtherTabStack} />
</Tab.Navigator>

// 子Stack内包含所有需要跳转的页面
const MainStack = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="SecondPage" component={SecondPage} />
    </Stack.Navigator>
  )
}

调整后不需要将第二页单独设置为Tab项，也能在该页面正常显示底部Tab。

header隐藏失效问题 #

header设置headerShown: false后仍显示，通常是配置层级不匹配导致的：

• 检查headerShown: false的配置位置：如果是嵌套路由，需要在对应页面所属的上层导航的screenOptions中配置，仅在子页面内部配置不会生效
• 如果同时存在Tab导航和Stack导航，两个导航的header是独立的，需要分别给Tab.Navigator和Stack.Navigator设置headerShown: false才能完全隐藏所有header
• 不要仅给单个Screen配置该属性，要确保目标页面所属的导航全局配置或该页面单独配置已经覆盖到

内容的提问来源于stack exchange，提问作者Justin Priede