React Native应用如何移除多余Header？Header显示原因及解决方法

问题原因 #

你当前使用的是嵌套导航结构：外层为底部标签导航（Tab.Navigator），每个标签页对应内部独立的栈导航（FeedStack/ProfileStack等）。React Navigation 的底部标签导航默认会为每个标签页自动生成顶部 Header，而你内部的栈导航已经单独配置了各页面的自定义 Header，因此外层标签导航生成的 Header 就是你看到的多余内容。

解决方法 #

直接关闭外层底部标签导航的 Header 显示即可，操作步骤如下：

1. 打开 AppStack.js 文件，找到 Tab.Navigator 的配置代码
2. 在 screenOptions 配置项中添加 headerShown: false，修改后代码如下：

<Tab.Navigator
  screenOptions={{
    activeTintColor: '#2e64e5',
    // 新增该行，全局关闭Tab导航自带的Header
    headerShown: false
  }}>
  {/* 原有Tab.Screen内容保持不变 */}
</Tab.Navigator>

3. 重启项目验证即可，修改后外层自动生成的多余 Header 会消失，内部栈导航配置的各页面自定义 Header 可以正常显示。

如果不需要全局关闭所有标签页的 Header，也可以单独给需要隐藏 Header 的 Tab.Screen 的 options 中添加 headerShown: false 属性即可。

内容的提问来源于stack exchange，提问作者Miguel Espeso