React Native无法读取未定义的“状态”属性

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 />;
};

但是当我编译时我会得到

  

无法读取“状态”未定义的属性

但是，如果我不按如下方式使用stackNavigation，它就可以正常工作：

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

export default Tabs 

请让我了解导致问题的原因。

编辑：

我尝试了以下将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