react-native - React-Navigation Drawer メニューを画面に追加するには?

Question

React-Navigation 3.x で構築されたホーム画面があります。ヘッダー、いくつかのナビゲーション アイコン、および下部のタブ メニューがあります。うまく機能していますが、画面に引き出しメニューを追加し、右上隅に引き出しを切り替えるアイコンを追加したいと考えています。

これは、私のホーム画面 (App.js) の簡易バージョンです。

import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import Activity1 from './Activity/Activity1';
import Activity2 from './Activity/Activity2';
import Activity3 from './Activity/Activity3';
import Calendar from './Screens/Calendar';
import Graph from './Screens/Graph';
import DrawerMenu from './components/DrawerMenu';

class HomeScreen extends React.Component {
   static navigationOptions = {
      title: 'Home',
      headerRight: (<Button onPress={() => this.props.navigation.toggleDrawer()} title='Menu' />)
    };

    render() {
       return (
          <View style={styles.container}>
             <View style={styles.iconContainer}>
                <Icon name='icon1' onPress={this.navToActivity1} />
                <Icon name='icon2' onPress={this.navToActivity2} />
                <Icon name='icon3' onPress={this.navToActivity3} />
             </View>
             <View>
                <DrawerMenu />
             </View>
          </View>
       );
    }
}

//create my main navigation stacks here 
const Home = createStackNavigator({
   HomeScreen,
   Activity1,
   Activity2,
   Activity3,
});

//The following two are for the bottom tab bar only
const Calendar = createStackNavigator({ Calendar });
const Graph = createStackNavigator({ Graph });

const BottomTabNav = createBottomTabNavigator({
    Home, Calendar, Graph
});

export default createAppContainer(TabNavigator);

DrawerMenu.js のコードは次のとおりです。

import { Dimensions } from 'react-native';
import { createDrawerNavigator, createAppContainer } from 'react-navigation';
import Settings from './Settings';
import Profile from './Profile';

const SCREENWIDTH = Dimensions.get('window').width;

const DrawerConfig = {
  drawerWidth: SCREENWIDTH * 0.5,
  drawerPosition: 'right',
};

const DrawerMenu = createDrawerNavigator({
       Settings: { screen: Settings },
       Profile: { screen: Profile },
   },
   DrawerConfig
);

export default createAppContainer(DrawerMenu);

引き出しを動かせませんでした。ホーム画面の右上隅にある [メニュー] ボタンをクリックして toggleDrawer() を呼び出すと、「undefined is not an object (evaluating 'ae.props.navigation')」というエラーが表示されました。

ジェスチャでも引き出しを起動できないので、正しく追加していないと思います。ここで何が間違っていましたか？ありがとう！！