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裏達到複用。