React Navigator自定义Header中navigation未定义，调用toggleDrawer报错

问题原因 #

你在Drawer.Navigator的screenOptions中定义自定义Header时，没有把React Navigation传递给header函数的props（包括navigation、route等）传递给<Header />组件，导致Header内部的navigation参数为undefined，调用toggleDrawer()时触发错误。

解决方案 #

方案1：传递Header函数的props给自定义组件 #

修改App.js中的screenOptions，将header函数接收的props展开传递给Header组件：

screenOptions={{ 
  header: (props) => <Header {...props} options={{headerStyle: {height: 200}}} /> 
}}

这样React Navigation提供的navigation、route等属性就会被传入Header组件，你可以继续通过props解构获取navigation。

方案2：使用useNavigation钩子获取navigation对象 #

在Header组件中直接使用React Navigation的useNavigation钩子，无需依赖props传递：

1. 先导入钩子：

import { useNavigation } from '@react-navigation/native';

2. 在组件内部获取navigation：

const Header = ({ options, back }) => {
  const navigation = useNavigation(); // 直接获取navigation对象
  const [fontsLoaded] = useFonts({Kanit_400Regular, Kanit_500Medium, Kanit_700Bold})
  if (!fontsLoaded) return <LoadingSpinner />
  
  return (
    <View style={options.headerStyle}>
      <View style={styles.headerContainer}>
        <TouchableOpacity 
          style={styles.hamburgerContainer} 
          onPress={() => navigation.toggleDrawer()}
        >
          <View>
            <View style={styles.hamburgerLine}></View>
            <View style={styles.hamburgerLine}></View>
            <View style={styles.hamburgerLine}></View> 
          </View>
        </TouchableOpacity>
      </View>
    </View>
  )
} 

这种方式更灵活，适合独立的自定义Header组件，不受props传递的限制。

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