反应导航抽屉没有打开？

Question

我已经创建了MainAppDrwaerNavigator.js

此处是代码：-

import { createDrawerNavigator } from 'react-navigation-drawer';
import CustomDrawer from '../Components/UI/Elements/Drawer';
export default createDrawerNavigator({


  {

    contentComponent: CustomDrawer,
    drawerPosition: 'Left',
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
  }
)

在我的drawer.js页面中：-

import React, { Component } from 'react';
import styles from './customDrawerStyles';
import { NavigationActions } from 'react-navigation';

class CustomDrawer extends Component {
  render() {
    return (
      <View style={styles.container}>

        <ScrollView>
          <View>
            <Text style={styles.sectionHeadingStyle}>
              Setting
            </Text>

            </View>
          </View>
        </ScrollView>
      </View >
    );
  }
}

，然后在我的customDrawer.js中编写一些CSS。 当我单击图标抽屉已打开但无法使用时，我正在主页上使用此抽屉。

mainPage.js代码：-

import React, { Component } from 'react'
import { Text, View, Image, } from 'react-native'
import { Icon } from 'react-native-elements';
import { DrawerActions} from 'react-navigation-drawer';


class Logo extends Component {
    render() {
        const { navigate, ...navigation } = this.props;
        return (
            <React.Fragment >
                <Icon
                    name='menu'
                    iconStyle={{marginLeft:20}}
                    type='materialIcons'
                    onPress={() =>navigation.DrawerActions.openDrawer()}
                     />

            </React.Fragment>
        )
    }
}
export default Logo;