DrawerNavigator из другого файла не работает

Question

У меня следующий код в App.js

import React, { Component } from 'react';
import { Text, View,} from 'react-native';
import{DrawerNavigator, DrawerActions} from 'react-navigation';


import { Menu} from './src/components/menu';

 export default class MainView extends Component {
   render(){
     return(
       <View>
       <Menu />
          <Text>  WHAT ??? </Text>
       </View>
     );
   }
 }

и следующий код в src / components / menu.js

'use strict';
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ScrollView} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
import{DrawerNavigator, DrawerActions} from 'react-navigation';


export  class Menu extends Component {
  render(){
    return(
      <View style= {styles.navContainer}>
        <View style= {styles.navContainerFlexing}>
          <View>
            <Icon name="bars" size={25} color= 'black' style={{marginLeft: 10, fontWeight: '200' }} 	onPress={() => this.props.navigation.dispatch(DrawerActions.toggleDrawer())}  />
         </View>
          <Text style={[styles.whiteText, styles.navItem]}>Home</Text>
      </View>
      </View>
    );
  }
}

export  const Drawer = DrawerNavigator(
  {
    Menu: Menu,
  },
  {
    // initialRouteName: 'Home',
  },
  {
    drawerPosition: 'left',
		 initialRouteName: 'Home',
		 drawerBackgroundColor: 'white',
		 drawerWidth: 300,

 }
 );

const styles= StyleSheet.create({
  navContainer: {
    height: 55,
    backgroundColor: '#3ba558',
    alignItems: 'center',
    // flex: 1,
    flexDirection: 'row',
    // justifyContent: 'flex-start'
  },
  navContainerFlexing: {
    flex: 2,
    flexDirection: 'row',
      backgroundColor: '#3ba558',
      paddingLeft: 20
  },
  whiteText: {
    color: 'white',
  },
  navItem: {
    alignItems: 'center',
    marginTop: 'auto',
    marginBottom: 'auto',
    marginLeft: 10

  },
});

Теперь я хочу, чтобы мой класс Menu отображался в App.js, который отображается, но я также хочу, чтобы он работал в DrawerNavigator на домашней странице, прямо сейчас ящик выдаёт:

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

Answer 1

Я объяснил конфигурацию DrawerNavigator в следующем link.

Посмотрите на принятый ответ ниже link.

Как создатьКомпонент Drawer и добавление его на несколько экранов

Как я объяснил в нем , попытайтесь понять концепцию и не копируйте синтаксис .

ДелатьСравнение с вашей конфигурацией, вы найдете свою проблему.