此篇干貨出沒绣张，請(qǐng)小心答渔！
現(xiàn)狀：
很多公司項(xiàng)目歷史都較為悠久，想要推翻用React-Native重寫還是會(huì)有很多問題涉及到很多架構(gòu)改動(dòng)侥涵，許多時(shí)候沼撕，我們只是一些界面需要采用RN方案來實(shí)現(xiàn)，因此在這種情況下芜飘，我們要將React-Native集成到現(xiàn)有項(xiàng)目中务豺。網(wǎng)上有很多資料，但是一些資料大多都是15年16年的嗦明，很多版本已經(jīng)不適用笼沥，按其中方法接入會(huì)有各種坑。點(diǎn)擊官方接入集成地址如果英文較好的小伙伴還是看官方的文檔來操作比較權(quán)威娶牌。
調(diào)整一天我才順利接入奔浅，先列舉幾個(gè)坑點(diǎn)，防止大家重復(fù)踩坑：
1.盡量用cocoapods集成诗良，集成分為兩種汹桦，一種使用cocoapods，另一種是不用cocoapods鉴裹。官方推薦也是使用cocoapods安裝营勤，否則很多地方需要配置灵嫌。
2.現(xiàn)在最新版本已經(jīng)0.46，這個(gè)地方我之前的文章也提到過葛作，國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境下編譯0.46版本可能會(huì)失敗，推薦使用0.44.3版本來操作猖凛。
這邊坑點(diǎn)還有很多赂蠢，我先不在這邊列舉。跟著下面的文檔辨泳，我會(huì)在其中描述虱岂，如果遇到其他問題，也歡迎留言交流菠红。
下面開始動(dòng)手操作集成：
1.新建一個(gè)react native項(xiàng)目第岖，react-native init AwesomeProject這邊AwesomeProject盡量用自己的工程名，這樣后續(xù)操作會(huì)方便不少试溯，當(dāng)然不改名也無所謂蔑滓。
2.新建個(gè)rn項(xiàng)目，我們只是利用下這個(gè)新建后的遇绞，package.json和node_modules键袱。省去再npm install了。刪除不必要的文件摹闽，留下node_modules和package.json,然后新建一個(gè)ios文件夾蹄咖，將原來項(xiàng)目的根目錄層全拷貝至ios文件夾。不上圖付鹿，看文字操作可能還有誤解澜汤，之前看了幾篇博客都是這樣。
這邊還有個(gè)遺漏點(diǎn)：
package.js里改下react-native版本號(hào)舵匾，然后npm install一下俊抵，
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.3"
}
3.安裝cocoapods，這個(gè)步驟我就不贅述了纽匙。一般iOS開發(fā)我相信都用過务蝠。
4.在剛才的ios文件夾下，創(chuàng)建Podfile文件烛缔，可以touch Podfile馏段，也可以pod init。
5.創(chuàng)建完后践瓷，在里面引入React相關(guān)院喜，根據(jù)自己需要引入。直接上干貨晕翠，大家根據(jù)需要修改
platform :ios,’8.0’
# target的名字一般與你的項(xiàng)目名字相同
target ‘iportal’ do
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結(jié)構(gòu)不同喷舀，那你就要根據(jù)實(shí)際路徑修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'DevSupport', # 如果RN版本 >= 0.43砍濒，則需要加入此行才能開啟開發(fā)者菜單
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 這個(gè)模塊是用于調(diào)試功能的
‘RCTImage’,
# 在這里繼續(xù)添加你所需要的模塊
]
# 如果你的RN版本 >= 0.42.0，請(qǐng)加入下面這行
pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
end
這邊注意下硫麻，如果沒引用爸邢，卻在js代碼中使用了，比如Text,那么編譯不會(huì)報(bào)錯(cuò)拿愧，app會(huì)紅色警告杠河。
6.pod install，這步不多描述浇辜。
7.完成后券敌，通過.xcworkspace打開，別用.xcodeproj打開柳洋，用過cocoapods的都知道待诅。
8.打開后直接編譯,可能會(huì)報(bào)錯(cuò)，那么別緊張熊镣。按照如下步驟排查卑雁。每個(gè)人出錯(cuò)原因都不一致，只能一步步排查轧钓。通常會(huì)有這個(gè)錯(cuò)序厉，can't find xxx in i386之類。遇到這個(gè)問題是架構(gòu)問題毕箍，將pod的build active Architecture Only與項(xiàng)目設(shè)置一致NO(如果有第三方要求yes弛房，根據(jù)你需求改)。
Base SDK按項(xiàng)目的屬性設(shè)置而柑，lastest ios文捶。這時(shí)候你會(huì)發(fā)現(xiàn)architecture已經(jīng)變成armv7 armv7s arm64和項(xiàng)目一致了。這樣再次cmd+b媒咳，神奇的發(fā)現(xiàn)success!如果還是fail粹排，那么可以嘗試重pod install，clean項(xiàng)目涩澡，再編譯顽耳。這邊還有其他辦法，可以在stackoverflow搜索妙同，我這只是一個(gè)解決辦法射富。
測(cè)試一下：
到這步，我們已經(jīng)完成了rn繼承到原生iOS現(xiàn)有項(xiàng)目粥帚。但是我們還沒寫代碼呢胰耗，怎么算完成。我們來測(cè)試一下芒涡。
我在根目錄柴灯，新建了一個(gè)index.ios.js卖漫，與cellNew.js。用來測(cè)試一下加載赠群。在xcode中羊始，rn組件作為RCTRootView加載進(jìn)來。在xcode中寫：
initialProperties :nil launchOptions : nil]; ```
注意一下這邊的moduleName與js端register的名字一樣乎串。`initialProperties`這邊可以傳遞字典參數(shù)給js端店枣。我就不展示用法了。后續(xù)文章會(huì)詳解叹誉。效果如下：
好了，大功告成闷旧。結(jié)合前幾篇文章长豁，我們已經(jīng)能夠集成react native，并且完成簡(jiǎn)單的頁面集成制作交互忙灼。