如何修复未找到不是一个对象 - 'this.navigation.openDrawer'

Question

由于

某种原因，当您单击打开菜单时会出现错误，我不清楚为什么会发生这种情况。

"反应导航"： "^3.5.1">

这是为了打开我的菜单抽屉与按下。

```
import React, { Component } from 'react';
import { Text, View, Image } from 'react-native';
import { Avatar } from 'react-native-elements';
import { Left, Icon } from 'native-base';
import { DrawerActions } from 'react-navigation';

  class Header extends Component {
    render() {
      return (
        <View style={styles.viewStyle}>
          <Left>
            <Icon
              name='menu'
              style={styles.menu}
              onPress={() => this.props.navigation.openDrawer()}
            />
          </Left>
          <Text style={styles.textStyle}>Episodes</Text>
        </View>
      );
    }
  }
export default Header;
```

```
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { Right, Left, Icon } from 'native-base';
import EpisodeList from '../components/EpisodeList';
import Header from '../components/header';
class HomeScreen extends Component {
  static navigationOptions = {
    drawerIcon: ({ tintColor }) => (
      <Icon name='home' style={{ fontSize: 24, color: tintColor }} />
    )
  };
  render() {
    return (
      <View style={styles.container}>
        <Header />
        <View>
          <Image
            source={{
              uri:
                'https://images.pexels.com/photos/754082/pexels-photo-754082.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
            }}
            style={{ width: 400, height: 700, position: 'absolute' }}
          />
          <EpisodeList />
        </View>
      </View>
    );
  }
}
export default HomeScreen;
```

我希望当我按下菜单按钮时抽屉会打开

标头是我传递给另一个组件的组件，该组件是从那里激活.

Answer 1

您需要将导航道具传递给子组件才能使用此类功能。

<Header  navigation={this.props.navigation} />

或在头文件中执行此操作，

import {withNavigation} from "react-navigation";
....
...
...
export default withNavigation(Header);

Answer 2

你试过以下方法吗？

this.props.navigation.dispatch(DrawerActions.openDrawer());

不要忘记导入，

import { DrawerActions } from "react-navigation";

Answer 3

请在主屏幕中尝试此操作

<Header {...this.props}/>