React Native this.props.navigation.navigate не работает при использовании его в createBottomTabNavigator

Question

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

import React, { Component } from 'react';
import { StyleSheet, Text, View } from "react-native";

import { createBottomTabNavigator } from "react-navigation"
import Icon from 'react-native-vector-icons/Ionicons'

import HomeTab from './HomeTab'
import SettingsTab from './SettingsTab'

export default createBottomTabNavigator({
  Home:{
    screen: HomeTab,
    navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon:({tintColor})=>(
          <Icon name="ios-home" color={tintColor} size={24}/>
        )
    }
  },
  Settings:{
    screen: SettingsTab,
    navigationOptions: {
        tabBarLabel: 'Settings',
        tabBarIcon:({tintColor})=>(
          <Icon name="ios-settings" color={tintColor} size={24}/>
        )
    }
  }
},
{
  //router config
  initialRoutName: 'Home',
  order: ['Home', 'Settings'],
  //navigation for complete tab navigator
  navigationOptions:{
    tabBarVisible:true
  },
  tabBarOptions:{
    activeTintColor:'red',
    inactiveTintColor:'grey'
  }
});

в моем HomeTab Я определил FlatList и для каждого из элементов списка я хотел добавить событие onPress .Для этого я решил использовать навигационный реквизит .Для этого я реализовал этот компонент следующим образом:

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    Button,
    FlatList,
    Image,
    ActivityIndicator,
    TouchableOpacity,
    ToastAndroid
} from "react-native";

import * as firebase from 'firebase';

export class HomeTab extends Component{
  constructor(){
    super()
    this.state = {
        dataSource: [],
        isLoading: true
    }
  }

  renderItem = ({item}) => {
      return (
        <TouchableOpacity style={{ flex: 1, flexDirection: 'row', marginBottom: 3 }}
            onPress = {() => {this.props.navigation.navigate("ComeHere")}}>
            <Image style={{ width: 40, height: 40, margin: 5 }}
            source={{ uri: 'https://cdn2.iconfinder.com/data/icons/IconsLandVistaMapMarkersIconsDemo/256/MapMarker_Marker_Outside_Azure.png' }}
            />
            <View style={{ flex: 1, justifyContent: 'center' }}>
                <Text style={{ fontSize: 16, color: 'green' }}>
                    {item.city}, {item.zipCode}
                </Text>
                <Text style={{ fontSize: 13, marginBottom: 15 }}>
                    {item.address}
                </Text>
            </View>
            <View style={{justifyContent: 'flex-end', justifyContent: 'center', marginRight: 10}}>
                <Text style={{ fontSize: 16, fontWeight: 'bold' }}>
                    ({item.numberOfMailItems})
                </Text>
            </View>
        </TouchableOpacity>
      )
  }

  renderSeparator = () => {
    return (
        <View
            style={{height: 1, width: '100%', backgroundColor: 'black'}}>
        </View>
    )
  }

  componentDidMount(){
    // Fetch some server data
  }

  render(){
    return (
      this.state.isLoading
      ?
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ActivityIndicator size="large" color="green" animating />
      </View>
      :
      <View style={styles.container}>
        <FlatList style={{marginTop: 30}}
            data={this.state.dataSource}
            renderItem={this.renderItem}
            keyExtractor={(item, index) => item.mailboxId}
            ItemSeparatorComponent={this.renderSeparator}
        />
      </View>
    )
  }
}

export default HomeTab;

И когда я щелкаю элемент, ничего не происходит.Проблема не в том, что событие не запускается, потому что когда я добавляю console.log ('что-то') , это работает.

Интересно, что когда я добавляю это

console.log(JSON.stringify(this.props))

к событию onPress я получаю следующее:

{"navigation": {"state": {"key": "Home","routeName": "Home"}, "actions": {}}}

Я имею в виду, я не вижу .navigate , определенных там вообще.

Здесь вы можете увидеть закуски: https://snack.expo.io/HJuo0e5ZE

Когда я запускаю его там, я получаю сообщение об ошибке:

Устройство: (3: 3587) Нарушение инварианта:Для этого навигатора отсутствует навигационная опора.В реакции-навигации 3 вы должны настроить контейнер приложения напрямую.Дополнительная информация: https://reactnavigation.org/docs/en/app-containers.html

Когда я попытался применить то, что описано здесь (обернутый createBottomTabNavigator в createAppContainer), я начал получать сообщение о том, что

(0, _reactNavigation.createAppContainer) не является функцией (In '(0, _reactNavigation.createAppContainer) (AppNavigator)', '(0, _reactNavigation.createAppContainer)' не определено)