如何修复this.props.navigation.navigate未定义问题（抽屉导航场景）

我来帮你排查并解决这个问题，你遇到的this.props.navigation未定义情况，主要是组件参数处理错误和navigation props传递不到位导致的，下面分步骤给你修复方案：

1. 修正Header组件的参数与调用逻辑 #

你的Header是函数组件，函数组件没有this，而且你对props的解构写法也有误。应该把navigation从第一个props参数里直接取出，而非单独作为第二个参数。

修改后的Header.js代码：

// Header.js
import React from 'react';
import { Text, View, Image, TouchableHighlight} from 'react-native';
import { DrawerNavigator } from 'react-navigation';

// 函数组件直接接收props，从props中获取navigation
const Header = (props) => {
  const { textStyle, viewStyle, imgstyle } = styles;
  
  return (
    <View style={viewStyle}>
      {/* 直接使用props.navigation，无需this */}
      <TouchableHighlight onPress={() => props.navigation.navigate('DrawerOpen')}>
        {/* 替换成你的汉堡图标资源 */}
        <Image source={require('./path-to-hamburger-icon.png')} style={imgstyle} />
      </TouchableHighlight>
      <Text style={textStyle}>页面标题</Text>
    </View>
  );
};

// 补全你的样式定义
const styles = {
  viewStyle: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 60,
    paddingHorizontal: 15
  },
  textStyle: {
    fontSize: 18,
    marginLeft: 10
  },
  imgstyle: {
    width: 24,
    height: 24
  }
};

export default Header;

2. 确保在导航屏幕中正确传递navigation props #

当你在某个导航屏幕中使用Header组件时，需要把当前屏幕的navigation props传递给它：

// 示例：你的首页屏幕组件
const HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1 }}>
      {/* 把navigation传递给Header */}
      <Header navigation={navigation} />
      {/* 屏幕其他内容 */}
    </View>
  );
};

3. 进阶：用withNavigation高阶组件自动注入navigation #

如果Header需要在多个页面复用，不想每次手动传递navigation，可以用react-navigation提供的withNavigation高阶组件自动注入：

首先导入withNavigation：

import { DrawerNavigator, withNavigation } from 'react-navigation';

然后在导出Header时用它包裹：

export default withNavigation(Header);

之后无论在哪里使用Header，都无需手动传navigation，它会自动获取当前上下文的navigation对象。

额外注意：抽屉的触发动作 #

在react-navigation v1版本中，打开抽屉的默认动作是DrawerOpen（关闭为DrawerClose），如果你自定义了抽屉路由名称，要对应修改navigate的参数。

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