React native 无法从react navigation中获取选项卡栏

我想使用

react导航

库在我的

react native

应用程序中显示选项卡栏。我已经尝试了一个新版本的代码。然而，当我在iOS模拟器上运行代码时，屏幕显示为空白，选项卡栏不加载

这是我到目前为止的代码

TabNavigator.js

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

class HomeScreen 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 TabNavigator = createBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
  },
  {  
    initialRouteName: "Home"
  }  
);

export default createAppContainer(TabNavigator);

从“React”导入React；
从“react native”导入{Text，View}；
从“react navigation”导入{CreateBoottomTabNavigator，createAppContainer}；
类主屏幕扩展了React.Component{
render（）{
返回(
回家！
);
}
}
类设置屏幕扩展React.Component{
render（）{
返回(
设置！
);
}
}
const TabNavigator=createBottomTabNavigator(
{
主页：主屏幕，
设置：设置屏幕，
},
{  
初始路由名称：“主页”
}  
);
导出默认createAppContainer（TabNavigator）；

App.js

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
import TabNavigator from './components/TabNavigator';

const App = () => {
  return (
    <View>
      <TabNavigator />
    </View>
  );
};

export default App;

import React，{Component}来自'React'；
从“react native”导入{View，Text，StyleSheet}；
从“react navigation”导入{CreateBoottomTabNavigator}；
从“./components/TabNavigator”导入TabNavigator；
常量应用=（）=>{
返回(
);
};
导出默认应用程序；

查看App.js代码时，您忘记将flex:1放在视图中，这是

react导航

在其文档中讲述的常见错误之一

 const App = () => {
      return (
       <View style={ { flex:1} }>
         <TabNavigator />
       </View>
      );
    };

const-App=（）=>{
返回(
);
};

资料来源：