React Navigation 5.x升级6.x后出现double header双头部问题如何解决

你遇到的双头部问题是React Navigation 6.x的默认逻辑调整导致的：6.x版本中，嵌套导航的父级（此处为你定义的AppTabs底部标签导航）的每个Screen默认会自动渲染头部，而你的每个标签页又嵌套了独立的Stack导航、配置了自己的头部，因此出现两层头部叠加的情况。上层头部就是Tabs导航自带的，下层是你Stack里配置的。你之前给Stack的Screen加headerShown: false只会隐藏下层Stack的头部，就是因为配置加在了子导航层级，要隐藏上层头部需要在父级Tabs的配置中修改。

方案1：全局隐藏所有Tabs页面的上层头部（推荐） #

直接在AppTabs.Navigator的全局配置中关闭头部显示，一劳永逸适配你当前的导航结构，同时还可以顺便把6.x废弃的tabBarOptions配置迁移到规范的screenOptions中：

const AppTabsScreen = props => {
  return (
    <AppTabs.Navigator
      // 6.x版本所有全局导航配置统一放到screenOptions中
      screenOptions={{
        // 关闭所有Tabs页面自带的上层头部
        headerShown: false,
        // 原来的tabBarOptions配置迁移到这里，加tabBar前缀
        tabBarActiveTintColor: '#00D084',
        tabBarInactiveTintColor: '#C6CDD7',
      }}>
      {/* 原有Tabs.Screen代码不变 */}
      <AppTabs.Screen
        name="Home"
        component={HomeStackScreen}
        options={{
          tabBarIcon: props => (
            <Icon.Ionicons name="home" size={props.size} color={props.color} />
          ),
        }}
      />
      {/* 剩下的Cart、Account配置不变 */}
    </AppTabs.Navigator>
  );
};

方案2：单独隐藏指定Tabs页面的上层头部 #

如果你只需要隐藏个别Tabs页面的上层头部，不需要全局配置，可以直接给对应AppTabs.Screen的options加headerShown: false即可，比如你提到的Home标签冲突，修改如下：

<AppTabs.Screen
  name="Home"
  component={HomeStackScreen}
  options={{
    // 仅隐藏当前Home标签的上层头部
    headerShown: false,
    tabBarIcon: props => (
      <Icon.Ionicons name="home" size={props.size} color={props.color} />
    ),
  }}
/>

其他标签如果有同样问题，对应添加该配置即可。

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