React Native嵌套导航如何避免重复头部？自定义侧边栏导航遇双头部

嘿，我之前在自定义侧边栏导航时也踩过双头部的坑，给你几个实用的排查和解决方向：

1. 确认headerMode/headerShown的设置位置是否正确 #

不同版本的React Navigation写法有区别，先对应你的版本调整：

• React Navigation 4及更早：headerMode: 'none'需要放在StackNavigator的全局配置里，而不是单个屏幕的选项中：

  const YourStack = createStackNavigator(
    {
      // 你的屏幕列表
      CategoryDetail: CategoryDetailScreen,
    },
    {
      headerMode: 'none', // 全局关闭栈导航的头部
    }
  );
  

• React Navigation 6+：改用headerShown: false，放在单个屏幕的options里：

  <Stack.Screen
    name="CategoryDetail"
    component={CategoryDetailScreen}
    options={{ headerShown: false }} // 关闭当前屏幕的导航头部
  />
  

2. 检查是否手动渲染了重复的Header组件 #

从你的代码片段看，你已经在屏幕里手动添加了<Header>组件，如果此时导航自带的头部没有完全关闭，就会出现双头部。解决思路二选一：

• 彻底关闭导航自带的头部（按上面的方法），保留你手动写的<Header>；
• 把自定义Header整合到导航的头部配置中，不再手动渲染：

  // 以React Navigation 4为例，在屏幕的navigationOptions里配置
  navigationOptions: {
    header: () => (
      <Header>
        <Button transparent onPress={() => this.openMenu()}>
          <Icon style={{color: '#ffffff', fontSize: 25, paddingTop:10}} name="bars" />
        </Button>
      </Header>
    )
  }
  

3. 排查导航嵌套层级问题 #

如果你的侧边栏是DrawerNavigator，里面又嵌套了StackNavigator，很可能是Stack的头部和Drawer的头部叠加了。这时候需要：

• 给DrawerNavigator设置headerMode: 'none'（旧版本），或者在Stack的根屏幕关闭头部；
• 把自定义Header放到DrawerNavigator的全局配置中，避免重复。

先试试前两个方法，应该能解决大部分双头部问题，如果还有问题可以补充下你的完整导航结构代码哦～

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