Ящик React-навигации не открывается?

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'
  }
)

И в моем ящике . js page: -

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;