React Native的勢頭越來越猛，但凡提及Native，皆是一片666，大有替代原生APP的趨勢，也許Native有著大好形勢，但目前看來，尚有太多不足。
開始
在iOS原生項目中動態使用React Native定制界面
如果你已經是一個iOS開發者，繼續原生項目開發可能是更好的選擇，而React Native，也許更加適合原生項目中部分動態頁(例如廣告、咨詢詳情)的編寫，方便頁面的多端重用和即時修改。
完整項目Github地址
1.安裝環境
如果你之前只接觸過iOS開發，使用終端也僅限于CocoaPods、Git，那么環境配置一定會費一番勁。
-
安裝Node.js
Node.js官方下載：https://nodejs.org/en/download/
在官網可以下載到對應系統的Node安裝包，非常簡單推薦使用nvm安裝管理Node.js，能夠更好的控制node的版本
nvm github地址：https://github.com/creationix/nvm
中文安裝方法：http://www.tuicool.com/articles/vmi6Zv7 安裝CocoaPods
CocoaPods是iOS開發最常用的依賴管理工具
CocoaPods安裝使用方法：唐巧blog
2.iOS原生項目
我們需要準備一個簡單的原生項目SimpleNative，選用的語言是Swift
在Main.storyboard中初始化項目框架：導航控制器內有兩層視圖控制器，在第一層Controller中居中設置一個button用來push，第二層Controller空白待用
3.初始化React Native的node依賴
1.初始化node
在終端中，定位到iOS項目的根目錄，運行
npm init
然后一路回車即可
注意：node項目的命名不能使用大寫字母，所以指定name時輸入
simple-native后回車
執行完畢之后，在項目根目錄下生成了一個package.json文件，類似于CocoaPods的Podfile文件，用來管理項目依賴
2.安裝React Native
再項目根目錄下運行
npm install --save react-native
由于國內的網絡問題，npm安裝比較緩慢，可以使用淘寶npm鏡像替代
安裝完畢之后，根目錄下會生成node_modules文件夾，里面保存了react和react-native的依賴
--save參數會在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導入React，路徑指向了當前目錄下'./node_modules/react-native'，然后還有一堆亂七八糟的子依賴(一個都不能少！)
運行pod install安裝依賴，本地安裝速度很快
5.綁定Native的視圖
1.導入Native View
由于使用的是Swift項目，我們需要一個OC-Swift橋接文件導入Native的類，在橋接文件夾導入
#import <RCTRootView.h>
2.設置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錯誤了，但是這表示已經成功綁定了Native
6.啟動Native服務
在ReactView的初始化中，我們為rootView指定了bundleURL和moduleName，其中moduleName既是當前項目名，而bundleURL，就要一步一步實現了，步步都是坑??
1.新建index.ios.js
在項目根目標下，新建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服務
建好了js文件，需要啟動一個端口為8081的服務將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會監聽ReactComponents文件夾下的文件，然后npm run start啟動native的node服務
4.三行命令最好用()包裝起來，可以避免運行后定位到node_modules/react-native文件夾下
再次運行iOS項目，當然也可以直接在模擬器上 Commend + R刷新，就會獲得另一個錯誤。。。
##### 3.開啟Http支持
蘋果在iOS9之后默認關閉了對HTTP的支持，需要打開以訪問localhost的服務
在iOS項目的`Info.plist`文件中，加入
``` xml
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
```
加入后，plist看起來是這樣的
更多關于[App Transport Security](http://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http)
#### 7.最后
重新運行iOS項目，點擊push按鈕后，在綠色加載條之后(第一次打包編譯比較慢)，就能看到native的界面了，在搜索欄輸入內容后回車，能夠簡單搜索Github內容（需要在index.ios.js添加[Github搜索頁](http://7xq01t.com1.z0.glb.clouddn.com/index.ios.js)代碼）
如果將ReactView放置全屏顯示，就更像一個原生的應用了 ??
---
**如果你也喜愛游戲，歡迎支持我的APP** [Up 游戲專輯](https://itunes.apple.com/app/id986716705)
