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

Posted 2021-04-04

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

“react-navigation”：“^ 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;

```

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

标头是我传递到另一个组件的组件，它从那里激活。

答案

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

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

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

import {withNavigation} from "react-navigation";

....
...
...

export default withNavigation(Header);

另一答案

你试过以下吗？

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

别忘了导入，

import { DrawerActions } from "react-navigation";

另一答案

请在您的HomeScreen中试试这个

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