整合ReactNative到現有Ios工程

標籤：

前段時間剛接觸了ReactNative，感覺還不錯。今天心血來潮就把這邊文章分享給大家，好了讓我們直奔主題吧！

1.搭建ReactNative開發基礎環境可以根據http://reactnative.cn/docs/0.31/getting-started.html文檔來配置，安裝必須的工具

2.建立一個Ios工程 TestRTC

3.進入到工程根目錄下面執行安裝ReactNative命令列工具  npm install -g react-native-cli

4.在工程的根目錄下面建立一個React檔案夾 來存放RN的相關檔案

5.在React檔案夾下建立一個package.json檔案，用於初始化RN(這裡面的package.json最好是在初始化一個工程裡面copy過來 以保證是最新的react、reactnative版本，初始化項目命令react-native init AwesomeProject )，package.json裡面的name要和ios工程裡面的名字一樣即：”name”:”TestRTC”

6.安裝ReactNative的依賴包 進入到React目錄下面執行npm install

7.安裝成功後建立index.ios.js(在React目錄下)，可以從上面說的初始化的 AwesomeProject工程裡面copy過來 (不過index.ios.js裡面的項目名要對應 和你ios工程名一樣即可).

8.使用Cocoapods自動整合Reactnative,在工程的根目錄下建立Podfile檔案 

Pod file檔案內容為

target ‘TestRTC‘ do

pod ‘React‘, :path => ‘./ReactComponen/node_modules/react-native‘, :subspecs => [

 ‘Core‘,

  ‘ART‘,

  ‘RCTActionSheet‘,

  ‘RCTAdSupport‘,

  ‘RCTGeolocation‘,

  ‘RCTImage‘,

  ‘RCTNetwork‘,

  ‘RCTPushNotification‘,

  ‘RCTSettings‘,

  ‘RCTText‘,

  ‘RCTVibration‘,

  ‘RCTWebSocket‘,

  ‘RCTLinkingIOS‘,

]

end

9.然後執行pod install --verbose --no-repo-update 安裝

10.以上步驟執行完之後整合RN到工程已經大功告成，下面就看怎麼應用RN在Xcode裡面

隨便建立一個Controller,代碼如

 

 

現在就可以運行Xcode了。

11.運行後跳轉到從oc跳轉到RN介面的時候會出現紅屏，這時候不用慌，仔細看錯誤之後你會發現是npm服務沒有起來，然後在控制台進入到React目錄下執行npm start 命令 ，在重新運行工程你會發現reactNative介面就可以展現在我們面前了

 

12.ok大功告成 

 

整合ReactNative到現有Ios工程