来自另一个文件的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中查看接受的答案。

How to create a Drawer Component and adding it to multiple screens

正如我在其中解释的那样尝试理解该概念并且不要复制语法。

与您的配置进行比较，您会发现问题。