0

我正在使用 React-Navigation 和 expo sdk 创建反应原生应用程序。

这是我的 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;

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

Home.js 页面代码：

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;

Setting.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;

我的问题是我试图在我的应用程序上使用标签导航器，这两个页面名为 Home.js 和 Settings.js 但它不起作用，并且在 expo sdk 加载后打开空白页面（甚至没有错误返回）！谁能告诉我我在这段代码上的错误是什么，或者标签导航器没有出现或显示或工作的问题是什么！！！！

4

0 回答 0