公司想要嘗試一下react native，雖然之前有過一些reactjs的開發(fā)經(jīng)驗，但將rn集成到native項目畢竟沒干過，于是在google上搜了一大堆的教程，感覺都不怎么詳細(xì)，沒辦法，自己動手吧！下面是我記錄的詳細(xì)步驟，以及遇到的坑：
先說說環(huán)境搭建吧，由于我是使用pod管理react native的各種依賴庫，所以大家請先提前安裝好cocoapods，至于怎么安裝我就不詳細(xì)說了，網(wǎng)上找下教程，很簡單的，
1，cd到native項目所在的目錄；
2，創(chuàng)建package.json文件，內(nèi)容如下：
{
? "name": "MyReactNativeApp",
? "version": "0.0.1",
? "private": true,
? "scripts": {
? ? "start": "node node_modules/react-native/local-cli/cli.js start"??
? }
}
3，安裝JavaScript依賴庫
方案一，通過yarn安裝，如何安裝yarn以及環(huán)境變量配置：
1）yarn add react-native
2）yarn add react@version_printed_above
#?warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".
# 版本號是在安裝react-native時通過警告告知的，如react@16.2.0
方案二，直接在package.json中指定react-native、react的版本號
{
? "name": "intlApp",
? "version": "0.0.1",
? "private": true,
? "scripts": {
? ? "start": "node node_modules/react-native/local-cli/cli.js start"
? },
? "dependencies": {
? ? "react": "16.3.1",
? ? "react-native": "^0.54.1"
? }
}
1）npm install
4，將node_modules加入.gitignore文件
5，安裝Command Line Tools，通過在Xcode中指定
Xcode -> Preferences... ->Locations -> Command Line Tools選項中選擇相應(yīng)的版本
6，更新Podfile，執(zhí)行pod install
pod 'React', :path => './node_modules/react-native', :subspecs => [
? ? 'Core',
? ? 'CxxBridge', # Include this for RN >= 0.47? ? 'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43? ? 'RCTText',
? ? 'RCTNetwork',
? ? 'RCTWebSocket', # Needed for debugging? ? 'RCTAnimation', # Needed for FlatList and animations running on native UI thread? ? # Add any other subspecs you want to use in your project? ]
? # Explicitly include Yoga if you are using RN >= 0.42.0 ?
pod 'yoga', :path => './node_modules/react-native/ReactCommon/yoga'??
# Third party deps podspec link ?
pod 'DoubleConversion', :podspec => './node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' ?
pod 'glog', :podspec => './node_modules/react-native/third-party-podspecs/glog.podspec'??
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
至此，我們已經(jīng)搭建好環(huán)境，并且成功的將react native集成到native項目，剩下的就是編寫rn代碼了。
7，在項目根目錄創(chuàng)建index.ios.js文件，同時編寫其他rn組件
8，運行打包器，啟動開發(fā)服務(wù)器
npm start
遇到的坑：
1，首先要確保pod的版本>=1.2.0
這是一個巨坑，在此之前，我的pod版本是1.1.1，在后面搭建環(huán)境的過程中真是吃盡了苦頭，不是這個頭文件找不到，就是那個頭文件找不到，在未意識到是我pod版本不對之前，我是通過修改node_modules目錄下引用的第三方庫的podspec文件以及修改xcode project的搜索路徑來解決，但這真不是一個好的解決辦法，解決一個引用問題又會出現(xiàn)另一個引用問題，沒完沒了，后來，感謝萬能的stackoverflow，讓我找到了問題的根本原因，原來是pod 1.1.1版本有bug，會導(dǎo)致xcode找不到第三方庫的頭文件，1.2.0及以上的版本修復(fù)了這個bug，直接升級pod后，頭文件找不到的bug消失。
2，Argument list too long: recursive header expansion failed
在解決第一個問題后，編譯又會報上面的問題，簡要描述就是用戶設(shè)置的搜索路徑是遞歸查找的，最后導(dǎo)致路徑太長，最終頭文件引用失敗，知道原因后，我就去xcode搜索哪些path是設(shè)置為recursive的，果然，在taget->Build Settings->User Header Search Paths下的路徑果然是recursive，改為non-recursive后，問題解決
3，Cocoapods私有庫
通過pod管理react native依賴的第三方庫，其中有三個庫是直接從本地的node_modules目錄指定的：
pod 'DoubleConversion', :podspec => './node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod'glog', :podspec => './node_modules/react-native/third-party-podspecs/glog.podspec'
pod'Folly', :podspec => './node_modules/react-native/third-party-podspecs/Folly.podspec'
但是，這其中的某個庫需要依賴boost-for-react-native，在運行的時候，xcode會報boost-for-react-native找不到的錯誤，問題是鬼知道是因為cocoapods私有版本倉庫沒有包含boost-for-react-native的podspec文件，從而導(dǎo)致boost-for-react-native沒法下載呢？而且這個庫都不需要在Podfile中指定。一般情況很難會往這個方向想，大部分人的第一反應(yīng)是xcode配置有問題？rn環(huán)境沒搭好？等等。最后在花了我差不多一個多小時后，我突然靈機一動，會不會是由于我的私有倉庫導(dǎo)致的？上傳boost-for-react-native的podspec文件到私有版本倉庫后，問題解決。
