使用React Native開發iOS應用須要OSX系統,而後安裝Homebrew,nvm,node,npm以及watchman,你也能夠有選擇的使用Flow。html
如官網實例:node
詳細教程請移步React Native中文網http://reactnative.cn/docs/0.27/getting-started.html#contentreact
2.安裝成功後運行iOS應用android
$ cd AwesomeProject
ios/AwesomeProject.xcodeproj
並點擊Run按鈕。index.ios.js
並隨便改上幾行。⌘-R
就能夠刷新APP並看到你的最新修改!3.打開新建的工程包ios
ios和Android的app的開發分別在 index.ios.js或者index.android.js 裏。咱們以index.ios.js爲例,先看下代碼結構:npm
第一部分:引用React(新版本)react-native
import React, { Component } from 'react';
之前的版本是xcode
import React, { Component, View } from 'react-native';
第二行:須要用到的控件的引入app
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裏達到複用。