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

Question

我有一个定义 stackNavigation 和 TabBarNavigation 的路由器文件，如下所示：

路由器.JS

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


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

export default Tabs 

我正在我的索引文件中创建 appContainer，如下所示：

索引.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

标签： javascriptreact-nativereact-navigation