Reactjs React导航不工作需要完美的解决方案

我正在使用React导航和expo sdk创建React本机应用程序

这是我的my app.js页面代码：

import React from 'react';
import Expo from 'expo';
import { StyleSheet, Text, View } from 'react-native';
import { TabNavigator } from 'react-navigation';

import Home from './Components/Home';
import Settings from './Components/Settings';


class App extends React.Component {
 render() {
   const MainNavigation = TabNavigator({
     Home: { screen: Home },
     Settings: { screen: Settings },
   });

  return (
    <View>
      <MainNavigation />
    </View>
  );
 }
}

export default App;

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

class Home extends React.Component {

  static navigationOptions = ({ navigation }) => {
    return {
      title: 'Home',
      headerStyle: {
              marginTop: Platform.OS === 'android' ? 24 : 0
            }
    };
  };

  render () {
    return (
      <View>
        <Text> Home Page </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default Home;

从“React”导入React；
从“世博会”导入世博会；
从“react native”导入{样式表、文本、视图}；
从“反应导航”导入{TabNavigator}；
从“./Components/Home”导入Home；
从“./Components/Settings”导入设置；
类应用程序扩展了React.Component{
render（）{
常量MainNavigation=TabNavigator({
主页：{screen:Home}，
设置：{屏幕：设置}，
});
返回(
);
}
}
导出默认应用程序；

在应用程序页面中，我正在导出两个组件名称主页和设置页面

Home.js页面代码：

import React from 'react';
import Expo from 'expo';
import { StyleSheet, Text, View } from 'react-native';
import { TabNavigator } from 'react-navigation';

import Home from './Components/Home';
import Settings from './Components/Settings';


class App extends React.Component {
 render() {
   const MainNavigation = TabNavigator({
     Home: { screen: Home },
     Settings: { screen: Settings },
   });

  return (
    <View>
      <MainNavigation />
    </View>
  );
 }
}

export default App;

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

class Home extends React.Component {

  static navigationOptions = ({ navigation }) => {
    return {
      title: 'Home',
      headerStyle: {
              marginTop: Platform.OS === 'android' ? 24 : 0
            }
    };
  };

  render () {
    return (
      <View>
        <Text> Home Page </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default Home;

从“React”导入React；
从'react-native'导入{样式表、视图、文本、平台}；
类Home扩展了React.Component{
静态导航选项=（{navigation}）=>{
返回{
标题:"家",，
头型：{
marginTop:Platform.OS=='android'？24:0
}
};
};
渲染（）{
返回(
主页
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});
导出默认主页；

seting.js页面代码为：

import React from 'react';
import { View, Text, Platform } from'react-native';

class Settings extends React.Component {

  static navigationOptions = ({ navigation }) => {
    return {
      title: 'Settings',
      headerStyle: {
              marginTop: Platform.OS === 'android' ? 24 : 0
            }
    };
  };

  render () {
    return (
      <View>
        <Text> Settings Page </Text>
      </View>
    );
  }
}

export default Settings;

从“React”导入React；
从'react-native'导入{View，Text，Platform}；
类设置扩展了React.Component{
静态导航选项=（{navigation}）=>{
返回{
标题：“设置”，
头型：{
marginTop:Platform.OS=='android'？24:0
}
};
};
渲染（）{
返回(
设置页面
);
}
}
导出默认设置；

我的问题是，我试图在我的应用程序上使用tab navigator，这两个页面名为Home.js和Settings.js

---

但它不工作，在expo sdk加载其打开的空白页面后（即使没有返回错误）！谁能告诉我我在这些代码上的错误是什么，或者tab navigator不出现、不显示或不工作的问题是什么

您是否尝试过在根视图中使用“flex:1”样式？我建议开始时要简单得多——试着在屏幕上显示一个视图，然后逐步显示导航器。我已经尝试过在根视图上使用flex这样的方法，并且在屏幕上显示一个视图，一切都很完美，但当我尝试添加导航时，它不起作用。这就是为什么我很困惑，这背后的问题是什么？？