React Native TabNavigation多头部问题：如何正确设置headerShown: false

核心原因 #

多头部问题基本都是导航嵌套层级重复生成头部导致的（比如Stack嵌套在Bottom Tab/Drawer里，或多层Stack嵌套），每个导航栈默认都会渲染自己的头部，所以需要在对应层级隐藏多余的头部。

正确设置headerShown: false的位置 #

1. 全局隐藏某导航栈的头部

如果整个导航栈都不需要头部，直接在导航的screenOptions里设置（不需要route参数时用对象形式）：

const HomeStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator
      screenOptions={{ headerShown: false }}
    >
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Detail" component={DetailScreen} />
    </HomeStack.Navigator>
  );
}

2. 根据路由动态控制头部显示

如果需要依据当前路由决定是否显示头部（比如仅隐藏Home页面的头部），把screenOptions写成接收route参数的函数：

<HomeStack.Navigator
  screenOptions={({ route }) => ({
    headerShown: route.name !== 'Home' // 除Home页面外都显示头部
  })}
>
  {/* 页面配置 */}
</HomeStack.Navigator>

3. 仅隐藏单个页面的头部

如果只需要隐藏某一个页面的头部，直接在该页面的Screen配置的options里设置：

<HomeStack.Screen 
  name="Home" 
  component={HomeScreen}
  options={{ headerShown: false }}
/>

为什么在HomeScreen组件内设置会出问题 #

直接在组件里用navigation.setOptions({ headerShown: false })容易和上层导航的头部逻辑冲突，尤其是嵌套导航场景下，上层导航的头部可能依然会渲染，导致多头部问题。优先在导航配置层面设置，而非组件内部。

排查方向 #

先梳理你的导航嵌套结构：

• 检查是否存在多层Stack嵌套
• 确认Bottom Tab/Drawer的每个子页面是否都是独立的Stack，如果是，需要在子Stack里隐藏头部

内容的提问来源于stack exchange，提问作者Carl Rudling