【REACT NATIVE 系列教程之九】REACT NATIVE版本更新步驟與注意事項！

本站文章均為 李華明Himi 原創,轉載務必在明顯處注明： 

轉載自【黑米GameDev街區】 原文連結: http://www.himigame.com/react-native/2288.html

       由于React Native處于快速疊代發展中，是以元件功能的擴充、文法的變更也将會有較大的差別，是以更新版本則屬于務必掌握的了。

昨天Himi剛從0.23版本更新到0.26，更新的主要原因有兩點：

1. 一些元件在最新版本中加入了很多新的屬性，例如0.23版本中Modal動畫沒有最新的屬性：

2. 另外RN在0.25版本有了重大更新：

在react-native中引用React的做法發生了變更（在目前版本老的做法會提出警告，在下一版本将會報錯）： 之前 1 import React, { Component, View } from 'react-native'; 現在 2 import React, { Component } from 'react'; import { View } from 'react-native'; 具體哪些屬于React，哪些屬于React Native，可以參考這篇文章（需要科學上網）。 我摘錄如下： Children Component PropTypes createElement cloneElement isValidElement createClass createFactory createMixin hasReactNativeInitialized findNodeHandle render unmountComponentAtNode unmountComponentAtNodeAndRemoveContainer unstable_batchedUpdates View Text ListView … 以及其他所有的原生元件。

因0.25版本的重大更新，Himi更新到了目前的0.26最新版本，下面來分享如何進行RN的版本更新吧。

注意：更新前請先備份項目，以免造成一些檔案丢失或者被覆寫的情況

一：先到項目下打開 package.json 檔案，将dependencies下的react-native版本号改成最新（或指定版本号）如下圖：

二：打開終端,以此輸入如下指令進行操作：

1. cd /Users/Himi/xxxxxx   

先cd到你項目的根目錄下

2. npm install

安裝最新的React Native版本,成功後可能會出現如下類似警告：

npm WARN [email protected] requires a peer of [email protected] but none was installed.

3. npm install –save [email protected]

更新最新的React且項目下package.json 的 dependencies下的react版本會被修改為 15.0.2

4. react-native upgrade

更新項目模闆檔案，過程中如果提示是否覆寫，可以鍵盤輸入’Y’，回車進行覆寫即可。

5. react-native -v

通過如上指令來看最新的版本，檢測是否更新成功！

到此更新過程将結束，那麼下面對已有的項目要重新build，方式如下幾種：

1：更新完成後，請重新clean項目，重新build

2. 用最新的RN指令init一個新項目，将自己的工程檔案copy到新項目中

3. 直接通過下載下傳官方最新的純淨項目： 

http://bbs.reactnative.cn/topic/11/react-native中文網官方釋出完整新項目包-無需init

将自己的工程檔案copy到這個純淨的項目中

由于Himi經曆的版本更新有文法變更，是以還要注意如下兩點：

備注1：import導入方式更改為最新方式 （如果沒有版本更新沒有文法變更，請無視）

備注2：導出一個類給别的子產品用，也要改為用export default的方式 （如果沒有版本更新沒有文法變更，請無視）

更多的文法對照：React/React Native 的ES5 ES6寫法對照表

更多的版本更新的日志：http://bbs.reactnative.cn/category/1/公告

更多更新React Native文檔：http://reactnative.cn/docs/0.26/upgrading.html#content