React Native 导航显示两个header问题：自定义header与Tab默认Header同时出现

问题根因 #

你当前使用的是栈导航嵌套底部标签导航的结构，外层栈导航已经配置了自定义头部，但底部标签导航默认会开启自带头部渲染，因此出现了两个头部重叠展示的问题。

解决方案 #

在底部标签导航的全局配置中关闭自带头部的渲染即可，修改Tab.Navigator的screenOptions配置，新增headerShown: false属性：

const TabBar = () => (
  <Tab.Navigator
    tabBar={(props) => {
      return (
        <View>
          <BottomTabBar {...props} />
        </View>
      );
    }}
    screenOptions={{
      // 新增这一行关闭Tab导航自带的头部
      headerShown: false,
      tabBarStyle: [{ display: 'flex' }],
      tabBarShowLabel: true,
      tabBarLabelStyle: {
        paddingBottom: 6,
        color: '#333',
      },
    }}>
    {/* 原有Tab.Screen内容保持不变 */}
    <Tab.Screen name="Home" component={Home} {/* 原有配置 */} />
    <Tab.Screen name="News" component={News} {/* 原有配置 */} />
  </Tab.Navigator>
);

补充说明 #

如果后续需要给个别Tab页面单独配置头部，不需要改全局配置，直接给对应Tab.Screen的options单独设置headerShown: true以及对应的头部属性即可。

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