iOS中嵌入ReactNative

iOS中嵌入ReactNative

http://reactnative.cn/docs/0.43/integration-with-existing-apps.html#content

首先貼上了學習reactnative的文檔，一定要按照步驟來搭建配置環境，
也包括18分鐘的視屏來手把手教你，我們就可以創建一個簡單的reactNative項目了

接下來就要說重點了，怎樣在xcode項目中嵌入ReactNative

首先我們需要根據推薦使用配置好所需要的開發環境
然後，在終端裏進入到我們項目的目錄下邊進行如下配置：

1：node初始化：npm init或者npm install
根據提示一直回車 回車，中間會讓我們輸入 name （是package.json裏面的字段描述）；注意：node項目的命名不能使用大寫字母，所以指定name時輸入simple-native 後回車

2:安裝React Native

再項目根目錄下運行
npm install –save react-native

由於國內的網絡問題，npm安裝比較緩慢，可以使用淘寶npm鏡像替代
安裝完畢之後，根目錄下會生成node_modules文件夾，裏面保存了react和react-native的依賴
–save參數會在package.json文件中保存react和react-native的依賴聲明

3:接下來就要使用cocoapods了

target 'ReactNativeTest' do
  pod 'React', :path => './node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket',
  ]
pod "Yoga", :path => "./node_modules/react-native/ReactCommon/yoga"
end

第一個警告是說react-native和react的依賴版本不匹配，解決方法

接下來沒什麼問題後就開始一路綠燈了

在最後一行 # 在項目根目錄執行以下命令創建文件：
$ touch index.ios.js

注意：在編譯的時候，一定在記得運行node

啓動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文件夾下

並且需要在info.plis中添加

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

參考文章簡書