ReactNative工程搭建和改造

官方教程，中文教程。網上也有不少其餘資料，可自行搜索。

兩種教程裏都提到2種方式：沙盒方式（expo）、與原生混合（Native Code），他們的區別在因而否會編寫原生代碼。expo方式中集成了部分原生的功能，直接引用expo sdk便可。也可以使用yarn ejected根據提示對工程進行轉原生混合方式，應該不能逆轉吧。

考慮到國內對APP的要求，如個性化、性能要求等等，仍是選擇與原生混合方式較好，方便後期擴展。

下面以iOS爲例，記錄下個人改造過程：

1、工程構建

一、工程目錄構建

$ yarn global add react-native-cli
$ react-native init doctor_app
$ cd doctor_app
$ yarn install	// 此步可能在init時已經自動執行過了
複製代碼

二、iOS添加pod支持

$ cd ios
$ pod init
$ vim Podfile	// 更改platform爲9.0，能夠移除其餘未用的target
$ pod install
複製代碼

雙擊打開生成的doctor_app.xcworkspace後，會在doctor_app工程中的Libraries看到React的默認支持。這時iOS工程項目已經初步完成。若是須要添加原生支持的RN三方依賴，以react-native-device-info爲例

$ yarn add react-native-device-info
$ react-native link react-native-device-info	// 推薦用link自動方式，也有其餘多種方式，按照庫的問題操做便可
$ cd ios
$ pod install
複製代碼

最後，就能夠在RN代碼裏react-native-device-info的API，編譯後APP能正常運行。

2、[!] React has been deprecated

在上面pod install以後可能會注意到控制檯有黃色的提示[!] React has been deprecated，同時發現pod過程當中安裝React 0.11.0，但明明package.json裏使用的"react-native": "0.59.8"。

有強迫症的表示不能接受，哈哈…..若是此時經過pod方式安裝code-push，編譯還會報錯React/RCTEventEmitter.h file not found in CodePush.h，此問題在code-push的issues上有提到不少次。我實際工做中遇到不少相似報RN的頭文件未找到的問題。是否是很尷尬！明明裝了RN，並且還安裝了兩個版本。

大體緣由就是頭文件引用的問題。下面用白話簡單闡述，雖然說工程構建時添加了RN版本A，走的Library形式，可是用pod安裝的RN依賴並不能準確找到RN版本A的頭文件，致使會自動安裝一個RN版本B(即0.11.0)。這時用pod方式安裝的code-push會自動首先找到RN版本B，報上面的錯誤也能理解，畢竟code-push發佈時依賴RN版本最低要求0.xx.x（僅是我猜想，未驗證！）。

解決方式就是將Library裏的RN版本A移到Podfile裏。

3、轉移React Native到Podfile

即把下面這些Library轉移到Podfile裏去，這時有沒有想起什麼？轉移原理實際上是集成到現有原生應用，只不過轉移後還保留了react-native-cli腳手架在Xcode中的配置，好比打包RN代碼的腳本等。通常狀況下將RN集成到現有原生APP裏，在打包APP時須要首先打包RN的離線文件，更詳細見React Native iOS打包詳解。

在Podfile裏添加下面的代碼，而後pod install便可會安裝兩個RN版本的問題。

pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTText',
    'RCTImage',
    'RCTNetwork',
    'RCTWebSocket',
    'RCTAnimation',
    'RCTLinkingIOS',
    'RCTSettings',
    'RCTGeolocation',
    'RCTActionSheet',
    'RCTVibration',
    'RCTBlob',
  ]
    
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  
  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'
複製代碼

爲了保險起見，將上述截圖裏的RN子模塊所有移除掉Remove Reference，不是Move to Trash。接着用Xcode編譯試試APP看能不能正常運行。

到此，RN工程的基本改造完成，盡情使用Podfile安裝RN第三方原生依賴吧。

2019-07-11 18:57:57 更新

最新的RN版本0.60裏關於iOS的部分改動，和我此篇文章改造思路幾乎一致，可能Facebook本身也意識到此問題。詳情見 React Native 0.60 新特性