React Native的勢頭越來越猛驻襟，但凡提及Native夺艰，皆是一片666，大有替代原生APP的趨勢沉衣，也許Native有著大好形勢郁副，但目前看來，尚有太多不足豌习。
開始
在iOS原生項目中動態(tài)使用React Native定制界面
如果你已經(jīng)是一個iOS開發(fā)者存谎，繼續(xù)原生項目開發(fā)可能是更好的選擇，而React Native肥隆，也許更加適合原生項目中部分動態(tài)頁(例如廣告既荚、咨詢詳情)的編寫，方便頁面的多端重用和即時修改栋艳。
完整項目Github地址
1.安裝環(huán)境
如果你之前只接觸過iOS開發(fā)恰聘，使用終端也僅限于CocoaPods、Git，那么環(huán)境配置一定會費一番勁晴叨。
-
安裝Node.js
Node.js官方下載：https://nodejs.org/en/download/
在官網(wǎng)可以下載到對應(yīng)系統(tǒng)的Node安裝包凿宾，非常簡單推薦使用nvm安裝管理Node.js，能夠更好的控制node的版本
nvm github地址：https://github.com/creationix/nvm
中文安裝方法：http://www.tuicool.com/articles/vmi6Zv7 安裝CocoaPods
CocoaPods是iOS開發(fā)最常用的依賴管理工具
CocoaPods安裝使用方法：唐巧blog
2.iOS原生項目
我們需要準(zhǔn)備一個簡單的原生項目SimpleNative兼蕊，選用的語言是Swift
在Main.storyboard中初始化項目框架：導(dǎo)航控制器內(nèi)有兩層視圖控制器初厚，在第一層Controller中居中設(shè)置一個button用來push，第二層Controller空白待用
3.初始化React Native的node依賴
1.初始化node
在終端中孙技，定位到iOS項目的根目錄产禾，運行
npm init
然后一路回車即可
注意：node項目的命名不能使用大寫字母，所以指定name時輸入
simple-native后回車
執(zhí)行完畢之后牵啦，在項目根目錄下生成了一個package.json文件下愈，類似于CocoaPods的Podfile文件，用來管理項目依賴
2.安裝React Native
再項目根目錄下運行
npm install --save react-native
由于國內(nèi)的網(wǎng)絡(luò)問題蕾久，npm安裝比較緩慢势似，可以使用淘寶npm鏡像替代
安裝完畢之后，根目錄下會生成node_modules文件夾僧著，里面保存了react和react-native的依賴
--save參數(shù)會在package.json文件中保存react和react-native的依賴聲明
4.初始化CocoaPods
在項目根目錄下履因，運行
pod init
在項目根目錄下生成了Podfile，用任何編輯器打開盹愚，編寫React Native的依賴
platform :ios, '7.0'
target 'SimpleNative' do
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# Add any other subspecs you want to use in your project
]
end
target 'SimpleNativeTests' do
end
target 'SimpleNativeUITests' do
end
在項目的target下栅迄，pod導(dǎo)入React，路徑指向了當(dāng)前目錄下'./node_modules/react-native'皆怕，然后還有一堆亂七八糟的子依賴(一個都不能少毅舆！)
運行pod install安裝依賴，本地安裝速度很快
5.綁定Native的視圖
1.導(dǎo)入Native View
由于使用的是Swift項目愈腾，我們需要一個OC-Swift橋接文件導(dǎo)入Native的類憋活，在橋接文件夾導(dǎo)入
#import <RCTRootView.h>
2.設(shè)置Native View
點擊SimpleNative.xcworkspace打開iOS項目，新建一個ReactView繼承于UIView虱黄，并為這個view添加RCTRootView的子視圖
import UIKit
class ReactView: UIView {
weak var rootView: RCTRootView!
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
let jsCodeLocation = NSURL(string: "http://localhost:8081/index.ios.bundle?platform=ios")
let rootView = RCTRootView(bundleURL: jsCodeLocation, moduleName: "SimpleNative", initialProperties: nil, launchOptions: nil)
self.rootView = rootView
self.addSubview(rootView)
}
override func layoutSubviews() {
super.layoutSubviews()
rootView.frame = self.bounds
}
}
然后在第二層控制器中居中顯示一個View悦即，并綁定為ReactView
再次運行項目，點擊push按鈕后橱乱，就會見到第一個紅彤彤的Native錯誤了辜梳，但是這表示已經(jīng)成功綁定了Native
6.啟動Native服務(wù)
在ReactView的初始化中，我們?yōu)閞ootView指定了bundleURL和moduleName泳叠，其中moduleName既是當(dāng)前項目名作瞄，而bundleURL，就要一步一步實現(xiàn)了危纫，步步都是坑??
1.新建index.ios.js
在項目根目標(biāo)下宗挥，新建ReactComponents文件夾节预，并在文件夾中新建index.ios.js文件，在js文件中
寫入react代碼
官方推薦的簡單代碼為
'use strict';
import React, {
Text,
View
} from 'react-native';
var styles = React.StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red'
}
});
class SimpleNative extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>This is a simple application.</Text>
</View>
)
}
}
React.AppRegistry.registerComponent('SimpleNative', () => SimpleNative);
如果你希望顯示一個更帥氣的Native界面属韧，可以拷貝鏈接代碼：Github搜索頁
2.啟動node服務(wù)
建好了js文件安拟，需要啟動一個端口為8081的服務(wù)將index.ios.js打包成index.ios.bundle
在項目根目錄下運行
(JS_DIR=`pwd`/ReactComponents; cd node_modules/react-native; npm run start -- --root $JS_DIR)
分解一下命令：
1.將新建的ReactComponents文件夾目錄賦值到JS_DIR上，注意需要是全路徑Ｏ埂？飞狻！
2.進入node_modules/react-native
3.綁定JS_DIR會監(jiān)聽ReactComponents文件夾下的文件锅棕，然后npm run start啟動native的node服務(wù)
4.三行命令最好用()包裝起來拙泽，可以避免運行后定位到node_modules/react-native文件夾下
再次運行iOS項目，當(dāng)然也可以直接在模擬器上 Commend + R刷新裸燎，就會獲得另一個錯誤顾瞻。。德绿。
##### 3.開啟Http支持
蘋果在iOS9之后默認關(guān)閉了對HTTP的支持荷荤，需要打開以訪問localhost的服務(wù)
在iOS項目的`Info.plist`文件中，加入
``` xml
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
```
加入后移稳，plist看起來是這樣的
更多關(guān)于[App Transport Security](http://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http)
#### 7.最后
重新運行iOS項目蕴纳，點擊push按鈕后，在綠色加載條之后(第一次打包編譯比較慢)个粱，就能看到native的界面了古毛，在搜索欄輸入內(nèi)容后回車，能夠簡單搜索Github內(nèi)容（需要在index.ios.js添加[Github搜索頁](http://7xq01t.com1.z0.glb.clouddn.com/index.ios.js)代碼）
如果將ReactView放置全屏顯示都许，就更像一個原生的應(yīng)用了 ??
---
**如果你也喜愛游戲稻薇，歡迎支持我的APP** [Up 游戲?qū)］媇(https://itunes.apple.com/app/id986716705)
