反应原生抽屉问题 - 导航图标中未打开抽屉菜单

我是React Native的新手，我想在我的应用程序中集成反应原生抽屉菜单 . 所以我实现下面的代码

我使用下面的抽屉https://www.npmjs.com/package/react-native-drawer-menu

MenuScreen.js

import React,{Component} from 'react'
 import {View,
    Text,
    StyleSheet,
    Easing,
    Alert,
    ScrollView,
    Image,
    ActivityIndicator,
    TouchableOpacity,
    TouchableWithoutFeedback,
    AsyncStorage,
    Dimensions,
    StatusBar,Share,
    Platform,
    BackHandler,
    BackAndroid} from 'react-native';

  import Drawer from 'react-native-drawer-menu';
  import {NavigationActions} from 'react-navigation'
  import {Actions} from 'react-native-router-flux';
  var DeviceInfo = require('react-native-device-info');
  var iPad = DeviceInfo.getModel()

  import HeaderBackgroundImage from '../Component/HeaderBackgroundImage';
  import HomeScreen from '../Screen/HomeScreen'
  import ScreenOne from '../Screen/ScreenOne'
  import ScreenTwo from '../Screen/ScreenTwo'
  import ScreenThree from '../Screen/ScreenThree'

  import { ScreenFourStack } from '../AppSpecific/Route';

  var {height, width} = Dimensions.get('window');

  IMAGES = require('../AppSpecific/Images');
   COLORS = require('../AppSpecific/Color')

 APPCONSTANTS = require('../AppSpecific/AppContsants'); 
 TAG = 'MenuScreen : '
 var _this = null;
 var isWsCall = false;
 var isDrawerOpen = false;
 var TAG = 'MenuScreen';


 export default class MenuScreen extends Component{

 static myd = null;
 constructor(){
  super()
  _this = this;
}

state={
 viewID:0,

}



 setView(id) {
 BackHandler.removeEventListener('hardwareBackPress', this._handleBackPressInDrawer);
switch (id){

  case 0:
    return(
      <HomeScreen />
    )

  case 1:
    return(
      <ScreenOne />
    )
  case 2:
    return(
      <ScreenTwo />
    )
  case 3:
    return(
      <ScreenThree />
    )
    case 4:
    return(
      <ScreenFourStack />
    )
     break;
  default:
     //this.logout()
  }
}
 logout(){
 MenuScreen.myd && MenuScreen.myd.openDrawer();
 Alert.alert(APPCONSTANTS.APP_NAME, APPCONSTANTS.LOGOUT, [{text: 'Cancel', onPress: () => {console.log("Cancle Pressed");}, style: 'cancel'}, {text: 'OK', onPress: () => {this.okPress()}}],{ cancelable: false })

  }



 _handleBackPressInDrawer() {
  if (isDrawerOpen) {
    isDrawerOpen = false;
    MenuScreen.myd && MenuScreen.myd.closeDrawer();
    BackHandler.removeEventListener('hardwareBackPress', this._handleBackPressInDrawer);
    return true;
  }
  return false;
  }


  userEmailDisplay(){
   return(
   <View style={Styles.emailStyleView}>
    <Text style={Styles.emailStyle} numberOfLines={1}>adam@mail.com</Text>
   </View>
    )
  }


  drawerContent(){
    return(
     <View style={Styles.content}>

        <TouchableOpacity onPress={() => {this.setState({viewID:10})}}>
          <View style={{width: '100%',height:(height * 20)/100,justifyContent: 'center'}}>
            <HeaderBackgroundImage />

            <View style={{width:'100%',height:60,flexDirection:'row'}}>
              <Image style={Styles.profileImage} defaultSource={IMAGES.AVATAR} source={IMAGES.AVATAR} onError={(error) =>
                        this.setState({ profileImageURL: IMAGES.AVATAR})}/>
              <Text style={Styles.usernameStyle} numberOfLines={2}  ellipsizeMode="tail">Adam Jhons</Text>
            </View>
          </View>
        </TouchableOpacity>

      <View style={Styles.leftBottom}>
        <ScrollView>

          <TouchableWithoutFeedback onPress={() => {this.setState({viewID:0})}}>
            <View style={[Styles.row,{backgroundColor: this.state.viewID === 0 ? COLORS.DRAWERSELECTEDBG : COLORS.WHITECOLOR}]}>
              <Image style={Styles.imageStyle} source={IMAGES.DRAWER.ACTIVITY} />
              <Text style={Styles.textStyle}>{APPCONSTANTS.MENU_TITLES.HOME}</Text>
            </View>
          </TouchableWithoutFeedback>

          <TouchableWithoutFeedback onPress={() => {this.setState({viewID:1})}}>
            <View style={[Styles.row,{backgroundColor: this.state.viewID ===1 ? COLORS.DRAWERSELECTEDBG : COLORS.WHITECOLOR}]}>
              <Image style={Styles.imageStyle} source={IMAGES.DRAWER.GOALS} />
              <Text style={Styles.textStyle}>{APPCONSTANTS.MENU_TITLES.SCREEN1}</Text>
            </View>
          </TouchableWithoutFeedback>

          <TouchableWithoutFeedback onPress={() => {this.setState({viewID:2})}}>
            <View style={[Styles.row,{backgroundColor: this.state.viewID === 2 ? COLORS.DRAWERSELECTEDBG : COLORS.WHITECOLOR}]}>
              <Image style={Styles.imageStyle} source={IMAGES.DRAWER.POLL} />
              <Text style={Styles.textStyle}>{APPCONSTANTS.MENU_TITLES.SCREEN2}</Text>
            </View>
          </TouchableWithoutFeedback>

          <TouchableWithoutFeedback onPress={() => {this.setState({viewID:3})}}>
            <View style={[Styles.row,{backgroundColor: this.state.viewID === 3 ? COLORS.DRAWERSELECTEDBG : COLORS.WHITECOLOR}]}>
              <Image style={Styles.imageStyle} source={IMAGES.DRAWER.TASK} />
              <Text style={Styles.textStyle}>{APPCONSTANTS.MENU_TITLES.SCREEN3}</Text>
            </View>
          </TouchableWithoutFeedback>

          <TouchableWithoutFeedback onPress={() => {this.setState({viewID:4})}}>
            <View style={[Styles.row,{backgroundColor: this.state.viewID === 4 ? COLORS.DRAWERSELECTEDBG : COLORS.WHITECOLOR}]}>
              <Image style={Styles.imageStyle} source={IMAGES.DRAWER.TASK} />
              <Text style={Styles.textStyle}>{APPCONSTANTS.MENU_TITLES.SCREEN4}</Text>
            </View>
          </TouchableWithoutFeedback>
        </ScrollView>
      </View>
    </View>
   )
 }

 drawerOpen(){
   isDrawerOpen = true;
}

 render(){

   return(

    <Drawer
      ref={(comp) => {MenuScreen.myd = comp}}
      disabled={false}
      drawerWidth= {(Platform.OS === 'ios') ? ((iPad.indexOf('iPad')!=-1) ? (width / 2) : width - 75) : ((DeviceInfo.isTablet())? (width / 2)  : width - 75)}
      drawerContent={this.drawerContent()}
      type={Drawer.types.Overlay}
      panCloseMask={1}
      panOpenMask={0}
      onDrawerOpen = {() => { this.drawerOpen() }}
      showMask = {true}
      maskAlpha ={0.5}
      drawerPosition={Drawer.positions.Left}
      easingFunc={Easing.linear}>
      {this.setView(this.state.viewID)}

   </Drawer>
    )
  }
}
 const Styles = StyleSheet.create({
 content: {
 flex: 1,
height: '100%',
marginTop:(Platform.OS === 'ios') ? 20 : 0,
//marginTop : 100,
alignSelf: 'stretch',
backgroundColor: COLORS.WHITECOLOR,
 },
 usernameStyle: {

flex:1,
backgroundColor: COLORS.TRANSPARENTCOLOR,
color: COLORS.WHITECOLOR,
marginLeft:10,
fontSize: (Platform.OS === 'ios') ? ((iPad.indexOf('iPad')!=-1) ? APPCONSTANTS.IPAD_FONT_SIZE.FONT_SIZE_MEDIUM :  APPCONSTANTS.MOBILE_FONT_SIZE.FONT_SIZE_EXTRA_LARGE): (DeviceInfo.isTablet())? APPCONSTANTS.IPAD_FONT_SIZE.FONT_SIZE_MEDIUM : APPCONSTANTS.MOBILE_FONT_SIZE.FONT_SIZE_EXTRA_LARGE,
fontFamily: APPCONSTANTS.FONTS.LATO_REGULAR,
 alignSelf:'center',
 },
 emailStyleView :{
 width:'100%',
 height:50,
 marginTop:0,
 backgroundColor:'rgb(87,87,96)',
  justifyContent:'center',
 },
 emailStyle : {
 backgroundColor: COLORS.TRANSPARENTCOLOR,
color: COLORS.WHITECOLOR,
fontSize: (Platform.OS === 'ios') ? ((iPad.indexOf('iPad')!=-1) ? APPCONSTANTS.IPAD_FONT_SIZE.FONT_SIZE_SMALL :  APPCONSTANTS.MOBILE_FONT_SIZE.FONT_SIZE_EXTRA_LARGE): (DeviceInfo.isTablet())? APPCONSTANTS.IPAD_FONT_SIZE.FONT_SIZE_SMALL : APPCONSTANTS.MOBILE_FONT_SIZE.FONT_SIZE_EXTRA_LARGE,
 fontFamily: APPCONSTANTS.FONTS.LATO_REGULAR,
 marginLeft:30
 },
 profileImage:{
height:60,
width:60,
marginLeft:30,
borderRadius : 30 ,
borderWidth:2,
borderColor :COLORS.WHITECOLOR,
},
leftTop: {
height: '30%',
justifyContent: 'space-around',
alignItems: 'stretch',
alignSelf: 'stretch',
backgroundColor: '#8ad8dd'
},
leftBottom: {
flex : 1,
alignSelf: 'stretch',
backgroundColor: COLORS.WHITECOLOR,
 },
row:{
flexDirection : 'row',
borderBottomWidth: 1,
borderBottomColor: COLORS.BLACKCOLOR,
 },
badgeStyle:{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
marginRight:20,
},
imageStyle:{
height : (Platform.OS === 'ios') ? ((iPad.indexOf('iPad')!=-1) ? 30 :  20): (DeviceInfo.isTablet())? 30 : 20,
width : (Platform.OS === 'ios') ? ((iPad.indexOf('iPad')!=-1) ? 30 :  20): (DeviceInfo.isTablet())? 30 : 20,
alignSelf:'center',
marginLeft:20
},
textStyle:{
color: COLORS.BLACKCOLOR,
fontSize: (Platform.OS === 'ios') ? ((iPad.indexOf('iPad')!=-1) ? APPCONSTANTS.IPAD_FONT_SIZE.FONT_SIZE_SMALL :  APPCONSTANTS.MOBILE_FONT_SIZE.FONT_SIZE_LARGE): (DeviceInfo.isTablet())? APPCONSTANTS.IPAD_FONT_SIZE.FONT_SIZE_SMALL : APPCONSTANTS.MOBILE_FONT_SIZE.FONT_SIZE_LARGE,
marginLeft:35,
marginTop:15,
marginBottom:15,
...Platform.select({
   ios: { fontFamily: 'Arial', },
   android: { fontFamily: 'Roboto' }
    })
   }
})

HomeScreen.js

import React,{Component} from 'react'
import { StyleSheet, Text, View, Image,TouchableOpacity,Platform,StatusBar } from 'react-native'
import CustomNavigationBar from '../../App/Component/CustomNavigationBar/CustomNavigationBar';
import HeaderLeft from '../Component/CustomNavigationBar/HeaderLeft';
import HeaderRight from '../Component/CustomNavigationBar/HeaderRight'
import MenuScreen from './MenuScreen';
COLORS=require('../AppSpecific/Color');
export default class HomeScreen extends Component {


componentWillMount(){
}

render() {

 return (
    <View style={styles.container}>
    {(Platform.OS === 'ios') ? <View  style={{width:'100%',height:20,backgroundColor:COLORS.HEADERBACKGROUNDCOLOR}} /> :  <StatusBar backgroundColor= {COLORS.HEADERBACKGROUNDCOLOR} barStyle="light-content" />
    }

    <View style= {{width:'100%'}}>
      <CustomNavigationBar title={APPCONSTANTS.SCREEN_TITLES.TITLE_HOME}
        headerLeft = {<TouchableOpacity onPress ={() => {MenuScreen.myd && MenuScreen.myd.openDrawer();}}>
            <HeaderLeft leftImg = {IMAGES.HOME.NAV}/>
          </TouchableOpacity>
        }

        headerRight = {<HeaderRight rightImg = {null} />}

     />
    </View>
    <View style={styles.text}>
    <Text>HomeScreen</Text>
    </View>

  </View>
    )
   }
 }

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',

},
text:{
alignItems: 'center',
justifyContent: 'center',
flex:1
  }
})

当我运行上面的代码时，单击HOmescreen.js文件中的导航图标，我无法打开抽屉菜单 {MenuScreen.myd && MenuScreen.myd.openDrawer();}

知道怎么解决这个问题？你的所有建议都很明显 .