时间戳

首页 > 解决方案 > 来自另一个文件的 DrawerNavigator 不起作用

android - 来自另一个文件的 DrawerNavigator 不起作用

问题描述

我在 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')

标签： androidreact-nativereact-navigation

解决方案

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

在下面查看接受的答案link。

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

正如我在其中解释的那样，尝试理解这个概念，不要复制语法。

和你的配置做个对比，你会发现你的问题。

推荐阅读