Ios Sample React Native App

效果图如下:带导航栏的React Native界面,虽然此界面是通过js代码写的,但是确是原生的界面做的展示。

Ios Sample React Native App_第1张图片


以下为index.ios.js  中的代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');

var Main = require('./App/Component/Main');


//带导航栏的hello world 
//加载React的各种组建
var {
  Text,
  View,
  StyleSheet,
  NavigatorIOS,
  Navigator,
  AppRegistry
} = React;

var styles = React.StyleSheet.create({
  text: {
    color: 'black',
    backgroundColor: 'white',
    fontSize: 30,
    margin: 80
  },
  container: {
    flex: 1
  }
});

class AwesomeProject extends React.Component {
  render() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: 'Property Finder',
         component: Main,
        }}/>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', function() { return AwesomeProject });


你可能感兴趣的:(Ios Sample React Native App)