React Navigation V6自定义header出现双头部，headerMode:none无效如何解决

问题原因 #

• React Navigation V6 中createNativeStackNavigator已经彻底废弃了headerMode配置项，你之前写的headerMode: "none"不会生效，这是配置无效的核心原因。
• 双头部出现大概率是两种情况：要么你当前Stack的默认头部未正确关闭，同时页面组件内自行实现了自定义头部；要么外层嵌套的父级导航（比如Tab导航、根Stack导航）自带的头部没有关闭，和当前Stack的头部叠加显示。

解决方案 #

方案1：完全关闭当前Stack的默认头部（适合在页面组件内自行实现自定义头部的场景） #

将所有无效的headerMode配置删除，替换为V6专用的headerShown: false配置，示例修改后的导航代码如下：

export const HomeNavigation = () => {  
  const HomeStack = createNativeStackNavigator<RootStackHomeParamList>();
  return (
    <HomeStack.Navigator screenOptions={{headerShown: false}}>
      <HomeStack.Screen
        name="HomeScreen"
        component={HomeScreen}
      />
      <HomeStack.Screen
        name="PlayScreen"
        component={PlayScreen}
      />
    </HomeStack.Navigator>
  );
};

如果只需要关闭单个页面的默认头部，也可以将headerShown: false写在对应Screen的options配置中。

注意：如果外层还有嵌套的父导航，需要同步检查父导航的配置，给父导航也加上headerShown: false，否则依然会出现父导航的头部和页面自定义头部叠加的问题。

方案2：直接在导航配置中自定义头部（适合不想在页面内写头部代码的场景） #

不需要关闭默认头部，直接用header配置项替换默认头部内容，就不会出现叠加问题，示例配置如下：

<HomeStack.Screen
  name="HomeScreen"
  component={HomeScreen}
  options={{
    // 直接在这里返回你的自定义头部组件即可替换默认头部
    header: () => <CustomHeader title="Home" />,
    headerStyle: styles.header
  }}
/>

如果你只是要修改默认头部的样式，不需要完全自定义内容，直接保留你现有headerStyle、headerTitleStyle等配置即可，不要在页面组件内额外写头部代码，就不会出现双头部。

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