如何在React Native中使用抽屉导航器？

我正在尝试在我的本机应用程序中实现抽屉导航器。我在应该打开抽屉的组件中使用了openDrawer（）函数。但是，在单击组件时，抽屉会直接启动抽屉内的屏幕，而不是简单地打开抽屉。我使用导航器的方式是否错误？任何帮助，将不胜感激。

Navigator.js

import React from 'react';
import { createAppContainer,createSwitchNavigator} from 'react-navigation';
import {createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack';
import {View,Platform,StatusBar} from 'react-native';
import LoginForm from './Components/LoginForm';
import TheatreList from './Components/TheatreList';
import Menu from './Components/Menu';
import EmployeeEdit from './Components/EmployeeEdit';
import CartScreen from './Components/CartScreen';
import Screen from './Components/Screen';
import ShoppingCartIcon from './Components/ShoppingCartIcon';
import PaymentScreen from './Components/PaymentScreen';
import Screen1 from './Screen/Screen1';
import Screen2 from './Screen/Screen2';

import * as Expo from 'expo';


const Navigator = createStackNavigator({

       TheatreList:{
        screen:TheatreList
    } , 

       Login: {
      screen:LoginForm
    },


    Menu: {
        screen:Menu
    },
    Cart: {
        screen:CartScreen
    },
    PaymentScreen:{
      screen:PaymentScreen
    }, 
  },
{
    headerMode: 'none',
      navigationOptions: {
        header: null,
    },
},
{
    initialRouteName: 'TheatreList'
  }
  );

const AppDrawerNavigator=createDrawerNavigator(
{
  Navigator,
    Screen1:{
      screen:Screen1
    },
    Screen2:{
      screen:Screen2
    }
});

const RootNav=createSwitchNavigator({

  Navigator,
  AppDrawerNavigator

});

export default createAppContainer(RootNav);

ProfileIcon.js

import React, { Component } from 'react';
import { View, Text, Picker,Button } from 'react-native';
import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/Entypo';
import { Actions } from 'react-native-router-flux';
import { DrawerActions } from 'react-navigation-drawer';

const ProfileIcon = (props) => (
  <View style ={{
        position:'absolute',
        top:0,
        left:0,
        right:5,
       // padding:7,
        width: 40,
        height: 40,
        borderRadius: 40/2,
        border: '1px solid #c45653',
        justifyContent: 'center',
        marginLeft: 15,padding:7}}>
     <Icon name="menu" onPress={() => props.navi.dispatch(DrawerActions.openDrawer())}  style ={{fontSize:50, position:'absolute', top:0, right:0,width:40, color:'#fe003a'}} />
</View>
)

export default ProfileIcon;