React Native教程 1:初识React Native，了解index.ios.js里的结构

使用React Native开发iOS应用须要OSX系统，而后安装Homebrew，nvm，node，npm以及watchman，你也能够有选择的使用Flow。

如官网实例：

详细教程请移步React Native中文网http://reactnative.cn/docs/0.27/getting-started.html#content

2.安装成功后运行iOS应用

• $ cd AwesomeProject
• 用XCode打开ios/AwesomeProject.xcodeproj并点击Run按钮。
• 使用你喜欢的文本编辑器打开index.ios.js并随便改上几行。
• 在iOS Emulator中按下⌘-R就能够刷新APP并看到你的最新修改！
• 恭喜！如今你已经成功运行并修改了你的第一个React Native应用！

 3.打开新建的工程包

ios和Android的app的开发分别在  index.ios.js或者index.android.js 里。咱们以index.ios.js为例，先看下代码结构：

第一部分：引用React（新版本）

import React, { Component } from 'react';

之前的版本是

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

第二行：须要用到的控件的引入

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

第三部分：页面布局

class test extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to forIOS React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text> 
      </View>
    );
  }
}

第四部分：页面排版的样式设置

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color :'red'
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

 Android中的项目结构和ios是相似的，只是个别插件名称不同。因此能够开发ios或者Android，而后把代码负责到其余的平台的js里达到复用。