Как мне решить эту проблему: 'TypeError: undefined не является объектом (оценка' _this.props.navigationProps.toggleDrawer ')'

Question

Через несколько дней в React-Native я пытаюсь внедрить блок навигации в мое приложение. Тем не менее, я не могу решить ошибку TypeError: undefined is not an object (evaluating '_this.props.navigationProps.toggleDrawer'), когда я касаюсь компонента TouchableOpacity, который должен вызвать ящик.

Ниже приведен код, который я использовал:

Заголовок. js

import React, { Component } from 'react';
import { View, StyleSheet, Image, TouchableOpacity, Platform } from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
import Screen1 from '../pages/screen1';
import Screen2 from '../pages/screen2';
import Screen3 from '../pages/screen3';


import logo from '../assets/logo.png';
import profileView from '../assets/profileIcon.png';
import menuDots from '../assets/3DotsMenu.png';

import { StatusBarHeight } from '../components/StatusBarHeight';
const statusBarHeight = StatusBarHeight

class Header extends Component {

  toggleDrawer = () => {
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (

      <View>
        <CreateDrawer />
        <View style={styles.header} />
        <View style={styles.headerContainer}>
          <View style={styles.imageHolder}>

            <TouchableOpacity
              activeOpacity={0.6}
              onPress={this.toggleDrawer.bind(this)}
            >
              <View>
                <Image style={styles.menu} source={menuDots} />
              </View>
            </TouchableOpacity>

            <TouchableOpacity activeOpacity={0.6}>
              <View>
                <Image style={styles.logo} source={logo} />
              </View>
            </TouchableOpacity>

            <TouchableOpacity activeOpacity={0.6}>
              <View>
                <Image style={styles.profile} source={profileView} />
              </View>
            </TouchableOpacity>

          </View>
        </View>
      </View>

    );
  };
}

const FirstActivity_StackNavigator = createStackNavigator({
  First: {
    screen: Screen1,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 1',
      headerLeft: () => <Header navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
}
  ,
  {
    headerMode: "none"
  }
);

const Screen2_StackNavigator = createStackNavigator({
  Second: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 2',
      headerLeft: () => <Header navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
},
  {
    headerMode: "none"
  }
);

const Screen3_StackNavigator = createStackNavigator({
  Third: {
    screen: Screen3,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 3',
      headerLeft: () => <Header navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const DrawerNavigator = createDrawerNavigator({

  Screen1: {

    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 1',
    },
  },
  Screen2: {

    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 2',
    },
  },
  Screen3: {

    screen: Screen3_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 3',
    },
  },
});

const styles = StyleSheet.create({
  header: {
    width: '100%',
    height: statusBarHeight,
    backgroundColor: '#E6E3E2',
    flexDirection: 'row',
  },
  headerContainer: {
    height: 60,
    backgroundColor: '#E6E3E2',
    justifyContent: 'center',
    alignItems: 'center'

  },
  imageHolder: {
    flexDirection: "row",
    justifyContent: 'space-between',
    width: '95%'
  },
  menu: {
    marginTop: 15,
    width: 27,
    height: 19,
    resizeMode: "stretch"
  },
  logo: {
    width: 140,
    height: Platform.OS === 'ios' ? 50 : 50,
  },
  profile: {
    marginTop: 3,
    height: 38,
    width: 35
  }
});

const CreateDrawer = createAppContainer(DrawerNavigator);

export default Header;

Приложение. js

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";

import Header from './components/Header';

export default class App extends Component {
  render() {
    return (
      <View style={{flex:1}} >
        <View style={{backgroundColor: 'blue'}}>
          <Header />
        </View>
      </View>
    );
  }
}

Answer 1

Используйте export default withNavigation(Header); при экспорте для стека навигации.