react-navigation如何设置Header显示在Drawer上方

核心原理 #

React Navigation 6.x 中默认Drawer Navigator自带的Header层级低于Drawer面板，弹出时会覆盖Header。要实现Header固定在Drawer上方，只需将Drawer Navigator整体作为子路由嵌套在Stack Navigator中，Header由外层Stack提供，Drawer仅负责内部菜单和页面切换即可。

具体修改步骤（基于官方6.x Drawer示例） #

1. 调整导航嵌套结构 #

保留原Drawer内的页面定义，重构根导航结构：

// 引入Stack导航创建方法（官方示例已预装该依赖无需额外安装）
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { TouchableOpacity, Text } from 'react-native';

const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();

// 封装原Drawer逻辑为独立组件，关闭Drawer自带的Header
function DrawerGroup() {
  return (
    <Drawer.Navigator
      screenOptions={{ headerShown: false }}
    >
      {/* 原Drawer下的Screen定义完全保留 */}
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Notifications" component={NotificationsScreen} />
    </Drawer.Navigator>
  );
}

// 根导航改为Stack，对外层Header做自定义配置
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen 
          name="DrawerRoot" 
          component={DrawerGroup}
          options={({ navigation }) => ({
            // 自定义左侧按钮，替换汉堡菜单为返回按钮，点击关闭Drawer
            headerLeft: () => (
              <TouchableOpacity 
                onPress={() => navigation.closeDrawer()}
                style={{ paddingHorizontal: 10 }}
              >
                <Text style={{ fontSize: 16 }}>{'< 返回'}</Text>
              </TouchableOpacity>
            ),
            // 可自定义Header标题、样式等属性
            title: '首页'
          })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 动态同步Header标题（可选） #

如果需要Header标题跟随Drawer当前激活的页面动态变化，可以通过useNavigationState监听Drawer路由状态：

// 在Header组件或者options配置中获取当前Drawer激活的页面名称
const currentDrawerTitle = useNavigationState(state => {
  const drawerState = state.routes.find(r => r.name === 'DrawerRoot')?.state;
  return drawerState ? drawerState.routes[drawerState.index].name : '首页';
});
// 将options中的title替换为currentDrawerTitle即可

效果确认 #

修改后Drawer弹出时不会覆盖顶部Header，点击左上角< 返回按钮可直接关闭Drawer，原有Drawer内的页面切换逻辑完全不受影响。

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