如何向React Navigation抽屉自定义头部NavHeader传递参数？

直接上可行的修改方案：

1. 补全必要的依赖导入 #

先把需要的工具和组件导入进来，包括抽屉操作工具和图标组件（用图标库或纯文本符号均可）：

import { View, TouchableOpacity, Text } from 'react-native';
import { DrawerActions } from '@react-navigation/native';
// 若使用图标库，需先安装react-native-vector-icons，再导入对应图标（示例用Ionicons）
import Ionicons from 'react-native-vector-icons/Ionicons';

2. 修改自定义头部组件NavHeader #

React Navigation会自动给自定义header组件传入navigation对象，直接用它触发抽屉打开操作即可。把触发按钮加到头部结构里：

function NavHeader({ navigation }) {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center', paddingLeft: 16, height: 60, backgroundColor: '#fff' }}>
      {/* 抽屉触发按钮 */}
      <TouchableOpacity 
        onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
        style={{ padding: 8 }}
      >
        {/* 用图标或文本符号都可以 */}
        <Ionicons name="menu" size={24} color="#333" />
        {/* 没装图标库的话，可用文本代替：<Text style={{ fontSize: 28 }}>☰</Text> */}
      </TouchableOpacity>
      {/* 这里放置你原来的头部内容，比如标题、其他功能按钮 */}
    </View>
  );
}

3. 保持导航器配置不变 #

你原有的Stack导航器配置无需改动，自定义header已经能自动获取到navigation参数：

<Stack.Navigator
  initialRouteName="Page1"
  screenOptions={{
    headerShown: true,
    headerTransparent: false,
    header: NavHeader
  }}
>
     <Stack.Screen name="Page1" component={Page1} />
     <Stack.Screen name="Page2" component={Page2} />
</Stack.Navigator>

额外注意事项 #

• 必须确保你的根导航是Drawer.Navigator，且当前Stack导航器嵌套在抽屉导航器内部，否则DrawerActions无法生效。
• 如果需要给不同页面的头部传递额外参数，可在对应Stack.Screen的options里单独配置：

  <Stack.Screen 
    name="Page1" 
    component={Page1} 
    options={{ header: (props) => <NavHeader {...props} extraParam="自定义内容" /> }}
  />
  

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