Невозможно открыть вкладку DrawerNavigator внутри навигатора стека

Я не могу открыть навигатор ящика. Вероятно, кнопке не передаются навигационные реквизиты. Но я понятия не имею, почему это происходит. Навигатор ящика создается внутри stacknavigator, так как он будет отображать гамбургер-меню при нажатии кнопки на главном экране.

создал стек-навигатор для навигации между экранами «Вход», «Регистрация», «Домашний экран» (домашний экран сам по себе является нижней панелью навигации, а домашний компонент по умолчанию отображается на домашнем экране). Навигатор по выдвижным ящикам создается для открытия по щелчку (эта кнопка является частью Домашней страницы), но он не открывается с ошибкой «this2.props.navigation.dispatch, а не функцией / объектом.

Вот мой файл Drawernavigator.js

import React, {Component} from 'react';
import {createAppContainer , createDrawerNavigator } from 'react-navigation';
import {View,Text,Image,TouchableOpacity,Button}  from 'react-native';

//importing customised components from other folders

import Home from '../components/Home';
import AboutPGMEE from './AboutPGMEE';
import FAQ from './FAQ';
import Settings from './Settings';
import ContactPGMEE from './ContactPGMEE';
import Notification from './Notifications';
import LogOut from './LogOut';
import TermsOfUse from '../Screens/InitialScreens/TermsOfUse';
import PrivacyPolicy from './PrivacyPolicy';
import ShareApp from './ShareApp';
import Videos from  '../components/Videos';
import AppContainer from '../FirstNavigator';
import HomeScreen from '../HomeScreen';
const DrawerStack=createDrawerNavigator(
    { 

/*

              HomeScreen:()=><HomeScreen/>,
   //() => <YOUR COMPONENT/> to suppress the error modifications made here into the syntax
     AboutPGMEE:()=>< AboutPGMEE/>,
     FAQ: ()=><FAQ/>,
      Settings:()=><Settings/>,
      ContactPGMEE:()=><ContactPGMEE/>,
      Notification:()=><Notification/>,
     LogOut:()=><LogOut/>,
      TermsOfUse:()=><TermsOfUse/>,
    PrivacyPolicy:()=><PrivacyPolicy/>,
    Home:()=><Home/>,

*/
    //   Home:Home,
        HomeScreen:FAQ,
       AboutPGMEE: AboutPGMEE,
       FAQ:FAQ,
      Settings:Settings,
      ContactPGMEE:ContactPGMEE,
      Notification:Notification,
      LogOut:LogOut,
      TermsOfUse:TermsOfUse,

    PrivacyPolicy:PrivacyPolicy

     },
     {
          initialRouteName:'HomeScreen',
           backBehavior:'initialRoute',
           drawerBackgroundColor:'powderblue',
           drawerPosition:'left',
           drawerWidth:300,
           contentOptions: {
            activeTintColor: '#e91e63',
          },


     }

)

const SideBarNavigator=createAppContainer(DrawerStack);
 export default SideBarNavigator;

Ниже мой Firstnavigator.js

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer,createSwitchNavigator } from 'react-navigation';

import HomeScreen from './HomeScreen';
import LogInScreen from './Screens/InitialScreens/LogInScreen';
import SignUpScreen from './Screens/InitialScreens/SignUpScreen';
import TermsOfUse from './Screens/InitialScreens/TermsOfUse';
import Home from './components/Home';
import SideBarNavigator from './sidebar/DrawerNavigator'
const RootStack = createSwitchNavigator(
  {
    LogInScreen: LogInScreen,
    HomeScreen: HomeScreen,
    SignUpScreen: SignUpScreen,
    TermsOfUse:TermsOfUse,
    Home:Home,
    SideBarNavigator:SideBarNavigator,
  },
  {
    initialRouteName: 'LogInScreen',
  }
);

const AppContainer = createAppContainer(RootStack);

export default AppContainer;

ниже мой Home.js (включен только соответствующий код. Файл большего размера, предположим, что синтаксис в порядке)

import React from 'react';
import {Col, Row, Grid} from 'react-native-easy-grid';
import {View,StyleSheet,Text,ScrollView,Image,TouchableOpacity } from 'react-native';
import Booklist from './BookList';
import {Card} from 'react-native-elements';
import {createStackNavigator,createAppContainer, DrawerActions} from 'react-navigation';
import SideBarNavigator from '../sidebar/DrawerNavigator';

export default class Home extends React.Component {

  render() {

    return (  
  <ScrollView style={{flex:1}}>
  <View style={styles.container}>

           <View style={[styles.boxContainer,styles.bigheader]}>

                    <View style={{flex:1,flexDirection:'column'}}>
                            <View style={{flex:1,flexDirection:'column',backgroundColor:'#8E24AA'}}> 
                                             <View style={{backgroundColor:'#8E24AA'}}>
                                                  <Text>  </Text>

                                                 <View style={{flexDirection:'row',alignContent:'center',                  alignItems:'center',justifyContent:'center'}}> 
                                                      <View style={{flex:1}}>
                                                      <TouchableOpacity  onPress={()=>this.props.navigation.dispatch(DrawerActions.openDrawer())}>

                                                      <Image source={require('./tab.png')} style={{height:30,width:35}}/>
                                                      </TouchableOpacity>

                                                      </View>
                                                       <View style={{flex:12}}>
                                                       <Text style={{fontSize:30,textAlign:'center',fontWeight:'bold',color:'white'}}>
                                                              DASHBOARD
                                                          </Text>

                  #########
                                     </View>

а это HomeScreen.js

import  React  from 'react';
import Home from './components/Home';
import Qbank from './components/Qbank';
import Test from './components/Test';
import Videos from './components/Videos';

import { BottomNavigation } from 'react-native-paper';
//import AppContainers from './components/Home';

const GoToHome=()=>{
  return (<Home/>)
}
const GoToTest=()=>{
  return ( <Test/>)
}

const GoToQbank=()=>{
  return ( <Qbank/>)
}
const GoToVideos=()=>{
  return ( <Videos/>)
}



export default class HomeScreen extends React.Component {

 handleIndexChange=index=>this.setState({index});

 state={index:0,routes:[{key:'Home',title:'Home',icon:'home'},
                        {key:'Qbank',title:'Qbank',icon:'question-answer'},
                       {key:'Test',title:'Test',icon:'timer-off'},
                        {key:'Videos',title:'Videos',icon:"video-call"},
 ],};
renderScene=BottomNavigation.SceneMap({
  Home:GoToHome,
  Test:GoToTest,
  Qbank:GoToQbank,
  Videos:GoToVideos,

});

  render() {
    return (

     <BottomNavigation
  navigationState={this.state}
  onIndexChange={this.handleIndexChange}
  renderScene={this.renderScene}

       />


    )}
  }

Я ожидал, что ящик откроется при нажатии на изображение, упомянутое в Home.js. Но дает ошибку.