React Native升級指南|v0.40+升級適配經驗與心得

標籤：native   著作權   官方   view   each   alt   參數   朋友   parent   

尊重著作權,未經授權不得轉載
本文出自:http://blog.csdn.net/fengyuzhengfan/article/details/54585899

React Native作為一個有上千開發人員參與的開源項目，自從2015年3月27日第一版發布以來到現在已經有147次版本發布了，平均起來幾乎每周都會有新的版本發布。隨著一次次版本的迭代，React Native也逐漸穩定，版本發布頻率保持在了每一到兩周一次。新版本不停的迭代對於React Native開發人員來說，及時升級React Native版本讓項目能夠使用更多的API、新特性以及淘汰掉一些老的API，不僅成為了一門必修課也是一個不小的挑戰。

升級一個React Native項目不僅需要JS部分還牽扯到Android項目和iOS項目，儘管React Native官方極力降低升級的繁瑣，但如果兩個React Native版本跨度較大的話升級起來還是需要不少工作量的。在這篇文章中我將向大家分享React Native升級的流程指南以及我在升級React Native過程中的一些經驗心得。

React Native升級流程

React Native升級流程可分為三大步：

1. 安裝react-native-git-upgrade 模組；
2. 執行更新命令；
3. 解決衝突；

心得：上述步驟都依賴於Git,沒有安裝Git用戶端的小夥伴，需要安裝一下。

1.安裝 react-native-git-upgrade 模組

首先我們需要安裝react-native-git-upgrade 模組，開啟終端執行下面命名即可：

$ npm install -g react-native-git-upgrade

安裝成功後，會看到輸出：

心得：react-native-git-upgrade是一個命令列介面的工具，我們需要將它安裝到全域，所以通過npm install命令安裝的時候需要加上-g這個參數。

2.執行更新命令

安裝過react-native-git-upgrade工具之後，我們就可以通過它來更新我們項目的React Native版本了，通過運行下面命令即可完成更新：

$ react-native-git-upgrade

通過這個命令可以將React Native更新到最新的版本，但不是預發布版哦。

心得：我們需要在React Native項目的根目錄下執行更新命令，也就是package.json所在的目錄。

如果想更新到指定版本的React Native則需要在上述命令後加上指定版本的參數，如下：

$ react-native-git-upgrade X.Y.Z

這樣以來，React Native便會被更新到X.Y.Z版，在運行這個命令時，需要將X.Y.Z替換成具體的版本。

更新命令執行成功之後，你會從終端看到如下輸出：

從終端的輸出中我們可以看出，更新的全過程以及我們所更新到的React Native版本。

另外，我們通過Version Control可以看出此次更新後發生變化的檔案：

3.解決衝突

需要特別提到的是react-native-git-upgrade工具在更新React Native版本的時候會進行一個合併作業，也就是將我們本地的React Native版本和最新或指定的React Native版本進行合并，在合并過程中可能會產生一些衝突，在終端的輸出中我們能清晰的看出發生衝突的檔案：

從中我們可以看到AppDelegate.m與project.pbxproj發生了衝突，所以接下來我們需要處理髮生衝突的檔案。

心得：一般來說，React Native版本跨度越大，產生衝突的可能性也就越大。

在處理衝突的時候通常我們會保留最新的代碼移除老的代碼，但具體還是要看了代碼的具體功能後在做處理，比如，在中我們需要移除#import "RCTBundleURLProvider.h"與#import "RCTRootView.h"保留#import <React/RCTBundleURLProvider.h>、#import <React/RCTRootView.h>以及#import "SplashScreen.h",為什麼要保留#import "SplashScreen.h"呢，這是因為，#import "SplashScreen.h"是我們添加的，並不屬於React Native的一部分。

心得：另外一個需要特別提到的就是xxx.xcodeproj檔案夾下所產生的衝突檔案了，比如project.pbxproj，xxx.xcodeproj檔案夾下存放的是整個iOS項目的一些設定檔，在處理這些檔案衝突的時候我們需要特別注意檔案的格式，處理不當很有可能導致真箇iOS項目無法開啟。

當處理完衝突後如果在開啟iOS項目時出現the project file cannot be parsed錯誤：

則很可能是在處理xxx.xcodeproj檔案夾下的衝突的時候破壞了檔案的結構，導致XCode無法解析相應檔案，要解決這個問題則需要找到出現問題的檔案將被破壞的檔案結構修複好。

到這裡整個更新流程便走完了，現在我們便可以使用以及體驗React Native最新版本的API以及特性了。

心得：雖然我們完成了React Native的整個更新流程，但我們這個時候還需要運行一下我們的React Native項目，然後看一下各個功能是否正常，因為很有可能我們在項目中所使用的一些舊版的API在新版的React Native中已經被移除了，所以我們需要及時的更新被移除或被棄用的API。關於每一個版本所發生的具體變化我們可以查閱：React Native項目的發布說明
。

React Native v0.40+升級適配經驗與心得

在2017年1月初，React Native發布了v0.40版本，並起名為December 2016，這也是2016年的最後一個版本。和以往一樣每次React Native整版的發布都會帶來一些大的變更，這次也不例外。在這篇文章中，我將向大家分享React Native v0.40對開發人員影響比較大的變更以及升級到v0.40的一些經驗心得。

關於如何升級React Native項目，可參考[React Native升級流程](#React Native升級流程)。

在昨天我對react-native-splash-screen做了React Native v0.40適配，並按照[React Native升級流程](#React Native升級流程)的步驟，將examples的React Native版本從v0.32升級到了 v0.40。在這裡我會結合這次升級來講解一下React Native v0.40所帶來的一些變化。

心得：升級的過程是痛苦的，但疼並快樂著。

React Native v0.40所帶來的一些重大變化

從React Native的更新文檔我們可以看到每次版本升級所帶了的一些重大變化，在v0.40版本中也是一樣。

iOS Native部分的標頭檔被移動

在 v0.40版本中，影響最為廣泛的一個變化就是這個了，iOS Native部分的標頭檔被移動到了React下。這一變化直接導致所有原生模組和有引用React Native .h檔案的代碼在v0.40上無法運行。

在v0.40之前要匯入一個React Native .h檔案的格式是這樣的：

#import "RCTUtils.h"

在v0.40版本匯入一個React Native .h檔案則變成了這個樣子：

#import <React/RCTUtils.h>

為瞭解決我們需要將所有引用到了React Native .h檔案的代碼改成v0.40的寫法。

可參考：AppDelegate.m

心得：不僅於此，這一變更直接導致所有用到React Native .h的第三方庫在沒有做上述更改之前都無法相容v0.40

require(‘image!…’)引用圖片方式不在支援

require(‘image!…’)這種使用圖片的方式已經被啟用很久了，在v0.40版本中則直接把它移除了，也就是以後我們不能再通過這種方式來使用圖片了。更多使用圖片的方式可以參考官方文檔：Images使用

心得：無論是在做React Native開發還是在做其他開發，一些被標記為deprecated的API，要及時的替換掉，因為在不久的將來這些被棄用的API很可能從SDK中移除。

最後

既然來了，留下個喜歡再走吧，鼓勵我繼續創作(^_^)∠※

如果喜歡我的文章，那就在CSDN上關注我的部落格@ fengyuzhengfan吧，讓我們一起做朋友~~

戳這裡,加關注哦:

微博：第一時間擷取推送
個人部落格：乾貨文章都在這裡哦
GitHub：我的開源項目

React Native升級指南|v0.40+升級適配經驗與心得