Drawer侧边菜单显示异常：Header内容覆盖菜单问题求助

嘿，我之前也踩过完全一样的坑！这问题根源出在你设置的headerMode: 'float'上——这个模式会让Stack导航的Header始终悬浮在所有导航组件的最上层，包括你的Drawer侧边菜单，所以菜单打开时Header的所有元素都会叠在上面。

给你几个实用的解决方案，按需选就行：

方案1：修改StackNavigator的headerMode（最推荐） #

把headerMode: 'float'改成headerMode: 'screen'，这样每个路由的Header会绑定到对应的屏幕上，Drawer打开时就会被菜单自然遮挡。

需要注意的是，你得给DrawerNav这个路由配置对应的navigationOptions，用来添加打开Drawer的按钮和其他Header元素：

const PrimaryNav = StackNavigator(
  {
    LoginScreen: { 
      screen: LoginScreen, 
      navigationOptions : {header: null} 
    },
    DrawerNav: { 
      screen: DrawerNav,
      navigationOptions: ({ navigation }) => ({
        title: '扫描页面',
        headerRight: (
          <TouchableOpacity 
            onPress={() => navigation.toggleDrawer()}
            style={{marginRight: 16}}
          >
            <Icon name="menu" size={24} color="#000" />
          </TouchableOpacity>
        ),
        // 这里可以继续添加你的Header图片、Logo等元素
      })
    },
  }, 
  { 
    headerMode: 'screen' // 替换原有的float模式
  }
);

方案2：将Header移到DrawerNavigator内部 #

如果不想改动Stack的headerMode，可以把Header直接集成到DrawerNavigator的每个页面里，或者给DrawerNavigator全局配置Header，这样Header就属于Drawer导航的一部分，打开菜单时会和页面一起被滑到侧边。

示例代码：

const DrawerNav = DrawerNavigator(
  { 
    WEB: { 
      screen: ScanScreen,
      navigationOptions: ({ navigation }) => ({
        header: (
          <View style={{height: 60, backgroundColor: '#fff', borderBottomWidth: 1, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16}}>
            {/* 你的Header元素：Logo、图片、图标等 */}
            <Image source={require('./path/to/logo.png')} style={{width: 40, height: 40}} />
            <View style={{flex: 1}} />
            <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
              <Icon name="menu" size={24} />
            </TouchableOpacity>
          </View>
        )
      })
    }, 
  },
  { 
    initialRouteName: 'WEB', 
    drawerPosition: 'right', 
  }
);

// StackNavigator保持原有配置即可
const PrimaryNav = StackNavigator(
  {
    LoginScreen: { screen: LoginScreen, navigationOptions : {header: null} },
    DrawerNav: { screen: DrawerNav },
  }, 
  { headerMode: 'float' }
);

方案3：检查Header的z-index样式 #

如果你的Header是自定义组件，可能不小心设置了过高的zIndex，导致它在Drawer菜单之上。可以检查Header的样式，确保没有设置zIndex，或者把它设为比Drawer更低的值（Drawer默认zIndex通常是10左右）：

const styles = StyleSheet.create({
  customHeader: {
    // 去掉或者降低zIndex
    zIndex: 1,
    height: 60,
    backgroundColor: '#fff',
    // 其他样式
  }
});

这几个方法里，方案1最符合React Navigation的设计逻辑，结构也更清晰，优先试试这个！

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