Реквизиты React Native Drawer Navigator undefined

Я пытаюсь создать навигатор по выдвижным ящикам, я считаю, что все делаю правильно, но я получаю эту ошибку, когда пытаюсь открыть ящик, undefined не является объектом (оценка '_this2.props.navigation.navigate'). Я сделал несколько журналов консоли и обнаружил, что this.props пуст для каждого класса, включая класс в App.js, даже после того, как я зарегистрирую экраны. Может ли кто-нибудь помочь или узнать, действительно ли это ошибка?

заранее спасибо

Как воспроизвести

App.js

import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
import Map from './screen'
import Home1 from './home';
// You can import from local files
import AssetExample from './components/AssetExample';
import Nav from './nav';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '@expo/vector-icons';
import { createDrawerNavigator, DrawerItems, Navigation } from 'react-navigation';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    console.info(this.props);
    return (
      <View style = {styles.container}>
        <Home1 {...this.props} />
      </View>
    );
  }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: StatusBar.currentHeight,
        backgroundColor: '#FFF',
    },
    innerContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
    header: { padding: 15, paddingTop: 22 },
});

home.js

import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
import Map from './screen'
// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '@expo/vector-icons';
import { DrawerNavigator, DrawerItems, Navigation } from 'react-navigation';

export default class Home1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  static navigationOptions = {
    drawerLabel: 'Home'
  };
  render() {
    return (
      <View style = {styles.container}>
      <StatusBar barStyle = "dark-content" />
      <View style = {styles.header}>
      <TouchableOpacity
    onPress = {() => {
              console.info(this.props); 
              console.info(this.props.navigation); 
    this.props.navigation.navigate('DrawerToggle');}}>
        <Icon name = "md-menu" size = {30} />
    </TouchableOpacity>
                </View>
        <Text> 'hi' </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: StatusBar.currentHeight,
        backgroundColor: '#FFF',
    },
    innerContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
    header: { padding: 15, paddingTop: 22 },
});

screen.js

import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '@expo/vector-icons';
import { DrawerNavigator, DrawerItems, Navigation } from 'react-navigation';

export default class Map extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }
  static navigationOptions = {
    drawerLabel: 'Map'
  };

  render() {
    return (
      <View>
      <StatusBar barStyle = "dark-content" />
      <View style = {styles.header}>
       <TouchableOpacity
    onPress = {() => {
              console.info(this.props); 
              console.info(this.props.navigation); 
    this.props.navigation.navigate('DrawerToggle');}}>

    <Icon name = "md-menu" size = {30} />
    </TouchableOpacity>
         <Text> 'hello' </Text>
      </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: StatusBar.currentHeight,
        backgroundColor: '#FFF',
    },
    innerContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
    header: { padding: 15, paddingTop: 22 },
});

nav.js

import * as React from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';
import Map from './screen'
import Home1 from './home';
// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
import { Ionicons as Icon } from '@expo/vector-icons';
import { createDrawerNavigator, DrawerItems, Navigation } from 'react-navigation';

const Nav = createDrawerNavigator({
  Home: {
    screen: Home1
  },
  Map: {
    screen: Map
  },
 });

 export default Nav;

Ваше окружение

"реагировать на родную бумагу": "2.1.3", "реагировать-навигация": "2.18.2"

Запуск кода онлайн здесь https://snack.expo.io/