此篇干貨出沒,請小心!
現狀:
很多公司項目歷史都較為悠久,想要推翻用React-Native重寫還是會有很多問題涉及到很多架構改動,許多時候,我們只是一些界面需要采用RN方案來實現,因此在這種情況下,我們要將React-Native集成到現有項目中。網上有很多資料,但是一些資料大多都是15年16年的,很多版本已經不適用,按其中方法接入會有各種坑。點擊官方接入集成地址如果英文較好的小伙伴還是看官方的文檔來操作比較權威。
調整一天我才順利接入,先列舉幾個坑點,防止大家重復踩坑:
1.盡量用cocoapods集成,集成分為兩種,一種使用cocoapods,另一種是不用cocoapods。官方推薦也是使用cocoapods安裝,否則很多地方需要配置。
2.現在最新版本已經0.46,這個地方我之前的文章也提到過,國內網絡環境下編譯0.46版本可能會失敗,推薦使用0.44.3版本來操作。
這邊坑點還有很多,我先不在這邊列舉。跟著下面的文檔,我會在其中描述,如果遇到其他問題,也歡迎留言交流。
下面開始動手操作集成:
1.新建一個react native項目,react-native init AwesomeProject
這邊AwesomeProject盡量用自己的工程名,這樣后續操作會方便不少,當然不改名也無所謂。
2.新建個rn項目,我們只是利用下這個新建后的,package.json和node_modules。省去再npm install
了。刪除不必要的文件,留下node_modules和package.json,然后新建一個ios文件夾,將原來項目的根目錄層全拷貝至ios文件夾。不上圖,看文字操作可能還有誤解,之前看了幾篇博客都是這樣。
這邊還有個遺漏點:
package.js里改下react-native版本號,然后npm install
一下,
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.3"
}
3.安裝cocoapods,這個步驟我就不贅述了。一般iOS開發我相信都用過。
4.在剛才的ios文件夾下,創建Podfile文件,可以touch Podfile,也可以pod init。
5.創建完后,在里面引入React相關,根據自己需要引入。直接上干貨,大家根據需要修改
platform :ios,’8.0’
# target的名字一般與你的項目名字相同
target ‘iportal’ do
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結構不同,那你就要根據實際路徑修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'DevSupport', # 如果RN版本 >= 0.43,則需要加入此行才能開啟開發者菜單
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 這個模塊是用于調試功能的
‘RCTImage’,
# 在這里繼續添加你所需要的模塊
]
# 如果你的RN版本 >= 0.42.0,請加入下面這行
pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
end
這邊注意下,如果沒引用,卻在js代碼中使用了,比如Text,那么編譯不會報錯,app會紅色警告。
6.pod install,這步不多描述。
7.完成后,通過.xcworkspace打開,別用.xcodeproj打開,用過cocoapods的都知道。
8.打開后直接編譯,可能會報錯,那么別緊張。按照如下步驟排查。每個人出錯原因都不一致,只能一步步排查。通常會有這個錯,can't find xxx in i386之類。遇到這個問題是架構問題,將pod的build active Architecture Only與項目設置一致NO(如果有第三方要求yes,根據你需求改)。
Base SDK按項目的屬性設置,lastest ios。這時候你會發現architecture已經變成armv7 armv7s arm64和項目一致了。這樣再次cmd+b,神奇的發現success!如果還是fail,那么可以嘗試重pod install,clean項目,再編譯。這邊還有其他辦法,可以在stackoverflow搜索,我這只是一個解決辦法。
測試一下:
到這步,我們已經完成了rn繼承到原生iOS現有項目。但是我們還沒寫代碼呢,怎么算完成。我們來測試一下。
我在根目錄,新建了一個index.ios.js,與cellNew.js。用來測試一下加載。在xcode中,rn組件作為RCTRootView加載進來。在xcode中寫:
initialProperties :nil launchOptions : nil]; ```
注意一下這邊的moduleName與js端register的名字一樣。`initialProperties`這邊可以傳遞字典參數給js端。我就不展示用法了。后續文章會詳解。效果如下:

好了,大功告成。結合前幾篇文章,我們已經能夠集成react native,并且完成簡單的頁面集成制作交互。