React Native не может прочитать свойство 'state' undefined

Question

У меня есть файл маршрутизатора, который определяет stackNavigation и TabBarNavigation следующим образом:

Router.JS

const Homestack = createStackNavigator({
    Home: {screen: Home},
    Region: {screen: Detail}
});


const Tabs = createBottomTabNavigator({
    Home: {screen: HomeStack},
    Region: {screen: Settings}
});

export default Tabs 

И я создаю appContainer в моем индексном файле следующим образом:

index.js

import Tabs from './src/Config/router'


const AppIndex = createAppContainer(Tabs)
const App = () => {
  const {viewStyle} = styles;
    return <AppIndex />;
};

Но когда я компилирую, я получаю

Невозможно прочитать свойство 'state' undefined

Но это прекрасно работает, если я не использую stackNavigation следующим образом:

const Tabs = createBottomTabNavigator({
    Home: {screen: Home},
    Region: {screen: Settings}
});

export default Tabs 

Пожалуйста, позвольте мне помочь понять, что может быть причиной проблемы.

Edit:

Я попробовал следующий способ добавления StackNavigation в TabNavigation, но все равно не получилось:

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

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button onPress={() => this.props.navigation.navigate('DetailScreen')} title="Home"/>

      </View>
    );
  }
}

class DetailScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>

      </View>
    );
  }
}
class SettingsScreen extends React.Component {
    render() {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Settings!</Text>

        </View>
      );
    }
  }

const Homestack = createStackNavigator({
  Home: {screen: HomeScreen},
  Region: {screen: DetailScreen}
});


const Tabs = createBottomTabNavigator({
    Home: {screen: Homestack},
    Region: {screen: SettingsScreen}
});


export default Tabs