标题左按打开抽屉，未定义不是对象

Question

我的代码行有问题，特别是headerLeft onPress。我想放一个图标，按下它将打开我的简单应用程序的抽屉导航器。

这是我的应用导航.js

//DRAWER NAVIGATOR
const drawerNav = createDrawerNavigator({
  JobFeed: {
screen: MainScreen,
navigationOptions: {drawerLabel: 'Job Feed',}
  },
},
{
  drawerPosition : "left",   contentComponent: CustomDrawerComponent,
});
// Manifest of possible screens
const primaryNav = createStackNavigator({
  LaunchScreen: { 
screen: LaunchScreen,
navigationOptions: {
  title: "Ty, Next",
  headerTitleStyle: {
    textAlign: 'center',
    flex: 1,
    fontFamily: 'CoreSansD65Heavy',
    color: Colors.semiGray,
  }
}
   },
MainScreen: {
        screen: MainScreen,
        navigationOptions: {
          title: "Ty, Next",
          headerTitleStyle: {
            textAlign: 'center',
            flex: 1,
            fontFamily: 'CoreSansD65Heavy',
            color: Colors.semiGray,
            marginBottom: 20,
      }
    }
  },
}, 
{
  // Default config for all screens
  initialRouteName: 'MainScreen',
})

所以这就是问题所在。在我的主屏幕中.js每当我按下按钮时，我都会输入此代码 它说未定义不是一个对象(评估_this2.props.navigation(请帮助我 我被困在这个特定问题上。

static navigationOptions = ({ navigation }) => {
    const { state } = navigation;
    const {} = state;
    return {
        headerStyle:{
            backgroundColor: "Transparent",
            marginRight: 20,
            marginLeft: 20,
        }, 
        headerLeft: (
            <TouchableOpacity onPress={this.props.navigation.openDrawer()}>
                    <Icon name="bars" color={Colors.red} size={30}/>
            </TouchableOpacity>
        ),
        headerLeftStyle: styles.drawerIcon,
        headerRight: (
            <TouchableOpacity>
                    <Icon2 name="sc-telegram" color={Colors.red} size={30} />
            </TouchableOpacity>
        ),
        headerRightStyle: styles.planeIcon,
        headerTransparent:  true,
    };
}

此外，向右滑动时，我什至无法访问抽屉导航器。任何想法为什么会这样？

Answer 1

在您的

主屏幕中.js您的组件是基于类的组件，如果它尝试创建一个胖箭头函数而不是直接调用 onpress prop 并从该函数调用，并且如果您的组件不是基于类的，请先制作它..！