HeaderLeft onPress, чтобы открыть ящик, undefined не является объектом

Question

У меня проблема с моей строкой кода, особенно с headerLeft onPress.Я хотел поставить иконку, где при нажатии она откроет ящик Навигатора моего простого приложения.

это мой AppNavigation.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',
})

, так что вот в чем проблема.В мой MainScreen.js я помещаю этот код, всякий раз, когда я нажимаю кнопку. Он говорит, что undefined не является объектом (оценка _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

В вашем mainscreen.js ваш компонент является компонентом на основе классов, если он пытается создать жирную стрелку вместо прямого вызова onpress prop и вызова из этой функции, и если ваш компонент не основан на классах, сделайте это первым ..!