undefined this.props.navigation.navigate('screen'), как это исправить?

Question

Я пытаюсь использовать ящик навигации. У меня есть компоненты header.js, которые имеют значок гамбургера, чтобы открыть левое меню навигации

//Header.js

 import React from 'react';
 import { Text, View, Image, TouchableHighlight} from 'react-native';
 import { DrawerNavigator  } from 'react-navigation';


 // Make a component
 const Header = (props, {navigate}) => {
 const { textStyle, viewStyle, imgstyle } = styles;

 return (
<View style={viewStyle}>

  <TouchableHighlight onPress={()=> this.props.navigation.navigate('DrawerToggle')}> //here the error is coming
       <Image style={{width:40, height:40}} 
     source={require('./../media/hamburger.png')}
              />
  </TouchableHighlight>

  <Text style={textStyle}>{props.headerText}</Text>
</View>
 );
};
export default Header;

Вот App.js

    const MyApp = DrawerNavigator({
       Login: {
          screen: Login,
       },
       Signup: {
          screen: Signup,
       },
    });

    export default class App extends React.Component {
       render() {
          return <MyApp />;
       }
    }

Вот один из компонентов Login.js

import React, { Component } from 'react';
import {
  Text, View, StyleSheet
 } from 'react-native';
import Header from './Header';

export default class Login extends Component{
static navigationOptions = {
    drawerLabel: 'Login',
 };
render(){
    return(
        <View >
            <Header headerText={'Login'}/>
            <Text>Login Screen</Text>
        </View>
         );
       }
}

Я не уверен, что мне не хватает, чтобы это исправить. Пожалуйста, проверьте мой код. Я уже пробовал без "этого", как

 props.navigation.navigate('DrawerToggle')

но не мог это исправить.