另一个文件的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

我已经在下面的link中解释了DrawerNavigator的配置。

查看以下link中已接受的答案。

如何创建抽屉组件并将其添加到多个屏幕

正如我在中所解释的，尽量理解这个概念，不要复制语法。

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