Javascript react-native:undefined不是带有react-navigation的对象（评估'；_this2.props.navigation'；）

我刚开始在react native中开发，我遇到了一个错误，我的应用程序中包含了抽屉导航，当它在内容视图中点击时，侧菜单栏打开，但当它在那里点击时

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

下面是我的剧本

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;

import React，{Component}来自'React'；
从“react native”导入{平台、样式表、文本、视图、按钮、TouchableOpacity}；
导入{容器，
标题，
内容,，
列表
列表项，
左边
偶像
身体，
标题
右}来自“本机基”；
类主屏幕扩展组件{
静态导航选项={
标题:"家",，
头型：{
背景颜色：“#28608c”，
},
标题颜色：“#fff”，
头饰样式：{
fontWeight:'粗体'，
},
左校长：(
this.props.navigation.toggleDrawer（）}
样式={{填充：10}}>
),
头灯：(
)
};
render（）{
返回(
this.props.navigation.toggleDrawer（）}>主屏幕
);
}
}
导出默认主屏幕；

从react导航：

尝试在

导航选项

中使用

this.props可能很有诱惑力，但由于它是组件的静态属性，
this
不引用组件的实例，因此没有可用的props。相反，如果我们将
navigationOptions
作为一个函数，那么React-Navigation将使用包含
{Navigation，navigationOptions，screenProps}

因此，您需要更改
导航选项
，如下所示：

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...
      };
  };

静态导航选项=（{navigation}）=>{
返回{
//剪断。。。
左校长：(
navigation.toggleDrawer（）}//删除此处的“this.props”
样式={{填充：10}}>
),
//剪断。。。
};
};
该变量不是称为navigationOptions而不是options吗？
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...
      };
  };