react-native: undefined 不是带有反应导航的对象（评估“_this2.props.navigation”）

Question

我刚刚开始在 React Native 中进行开发，但遇到了错误，我在我的应用程序中包含了抽屉导航，当它在内容视图中被点击时，侧边菜单栏会打开，但是当它被点击时

<TouchableOpacity onPress={() =>this.props.navigation.toggleDrawer()}
                 style={{padding:10}}>
             <Icon  size={27} name='ios-menu' color='#fff' />
             </TouchableOpacity>

它抛出一个错误。

undefined is not an object (evaluating '_this2.props.navigation')

下面是我的脚本

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TouchableOpacity} from 'react-native';
import {Container, 
        Header, 
        Content, 
        List, 
        ListItem, 
        Left, 
        Icon, 
        Body,
        Title,
        Right} from 'native-base';

class HomeScreen extends Component{


    static navigationOptions = {
        title: 'Home',
        headerStyle: {
          backgroundColor: '#28608c',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
        headerLeft:(
          <TouchableOpacity onPress={() =>this.props.navigation.toggleDrawer()}
             style={{padding:10}}>
         <Icon  size={27} name='ios-menu' color='#fff' />
         </TouchableOpacity>

        ),
        headerRight:(
          <TouchableOpacity style={{padding:10}}>
           <Icon size={27}  name='search' color='#fff' />
          </TouchableOpacity>

        )
      };
  render() {
    return (
        <Container>
        <Content contentContainerStyle={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center'
        }}>
        <Text onPress={() =>this.props.navigation.toggleDrawer()}>HomeScreen</Text>
        </Content>
      </Container>
    );
  }
}

export default HomeScreen;

Answer 1

从反应导航文档：

尝试在navigationOptions使用this.props可能很诱人，但由于它是组件的静态属性，因此this不引用组件的实例，因此没有可用的道具。 相反，如果我们使navigationOptions成为一个函数，那么 React Navigation 将使用包含{ navigation, navigationOptions, screenProps }的对象调用它

因此，您需要将navigationOptions更改为如下所示：

static navigationOptions = ({ navigation }) => {
    return {
        // snip...

        headerLeft:(
          <TouchableOpacity onPress={() => navigation.toggleDrawer()} // remove "this.props" here
             style={{padding:10}}>
             <Icon  size={27} name='ios-menu' color='#fff' />
         </TouchableOpacity>
        ),

        // snip...
      };
  };