React Navigation v6抽屉嵌套Stack导航出现双头部该如何修复？

问题原因 #

React Navigation v6 中嵌套的导航器默认都会开启自身头部的显示，你当前的导航结构是抽屉导航（Drawer）嵌套了两个独立的 NativeStack 导航，两个层级的导航器都渲染了头部，所以会出现重复的两个导航头。v5 和 v6 的头部默认配置存在差异，这就是你跟着 v5 教程写 v6 代码无法复现效果的原因。

修复方案 #

你可以根据自己的产品需求选择以下任意一种方案：

方案1：保留子Stack导航的头部，隐藏Drawer导航的头部（推荐） #

这个方案适合子Stack内部页面跳转时需要头部自动变化（比如进入详情页自动显示返回按钮）的场景，也是嵌套导航的常用方案，只需给 Drawer 全局添加隐藏头部的配置即可：

export default function App() {
  return (
    <NavigationContainer>
      {/* 全局配置Drawer所有页面隐藏头部，也可以单独给每个Drawer.Screen的options属性加headerShown: false */}
      <Drawer.Navigator screenOptions={{ headerShown: false }}>
        <Drawer.Screen name="Home" component={HomeScreenStack} />
        {/* 额外优化：原来的第二个Drawer.Screen命名和子Stack内的路由重名了，修改为Archived避免后续跳转冲突 */}
        <Drawer.Screen name="Archived" component={ArchivedScreenStack} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

方案2：保留Drawer的头部，隐藏子Stack导航的头部 #

这个方案适合仅需要全局统一的抽屉头部，子页面不需要单独控制头部的场景，只需给两个子Stack导航添加隐藏头部的配置即可：

// 给Home的Stack导航加隐藏头部配置
const HomeScreenStack = ({ navigation }) => {
  return (
    <StackHome.Navigator screenOptions={{ headerShown: false }}>
      <StackHome.Screen name="Home" component={HomeScreen} />
      <StackHome.Screen name="NotesDetails" component={NotesDetails} />
    </StackHome.Navigator>
  );
};

// 给归档的Stack导航加隐藏头部配置
const ArchivedScreenStack = ({ navigation }) => {
  return (
    <StackArchived.Navigator screenOptions={{ headerShown: false }}>
      <StackArchived.Screen name="Home" component={Archived} />
    </StackArchived.Navigator>
  );
};

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