React Native 如何移除 Drawer navigator 的头部仅保留菜单图标

问题原因 #

React Navigation的Drawer Navigator默认头部是占据布局位置的，仅设置headerStyle.backgroundColor: transparent只会让头部背景变为透明，但默认的头部阴影还会存在，且头部本身不会悬浮在页面内容上方，透明后透出的是导航容器的底色，不是你的页面内容，所以看起来没有生效。

解决方法 #

分两种实现方案，可根据需求选择：

方案1：保留默认头部，仅保留汉堡唤起图标，背景全透明

在Drawer.Screen的options中补充两个核心属性headerTransparent和headerShadowVisible即可，完整配置如下：

<Drawer.Navigator
  drawerContent={props => <DrawerContent {...props} />}>
    <Drawer.Screen
      name="Home"
      component={HomeScreen}
      options={{
        // 核心：让头部悬浮在页面内容上方，不占布局位置
        headerTransparent: true,
        // 去掉头部默认的底部阴影
        headerShadowVisible: false,
        headerStyle: {
          backgroundColor: 'transparent',
        },
        // 隐藏头部默认标题，只保留汉堡图标
        headerTitle: '',
        // 可选：调整汉堡图标的左边距
        headerLeftContainerStyle: {
          paddingLeft: 16,
        }
      }}
    />
</Drawer.Navigator>

方案2：完全移除默认头部，在页面内自定义唤起按钮

如果不想用默认头部，可直接隐藏默认头部后在页面组件内自己添加汉堡按钮控制侧边栏唤起：

1. 先修改导航配置，隐藏默认头部：

<Drawer.Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerShown: false
  }}
/>

2. 在HomeScreen组件内添加自定义唤起按钮：

import { useNavigation, TouchableOpacity } from '@react-navigation/native';
import Ionicons from 'react-native-vector-icons/Ionicons'; // 可替换为你用的图标库

const HomeScreen = () => {
  const navigation = useNavigation();
  return (
    <View style={{flex: 1}}>
      {/* 自定义汉堡按钮，悬浮在页面左上角 */}
      <TouchableOpacity 
        onPress={() => navigation.toggleDrawer()}
        style={{
          position: 'absolute',
          top: 40, // 适配状态栏高度可自行调整
          left: 16,
          zIndex: 999
        }}
      >
        <Ionicons name="menu" size={24} color="#000" />
      </TouchableOpacity>
      {/* 你的其他页面内容 */}
    </View>
  )
}

效果示意 #

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