REACT NATIVE 系列教程之九REACT NATIVE版本升级步骤与注意事项！

Posted 2022-05-28 李华明Himi

本站文章均为  李华明Himi 原创,转载务必在明显处注明： 
转载自【黑米GameDev街区】 原文链接:  http://www.himigame.com/react-native/2288.html

width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=1916000601&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Freact-native%2F2288.html&dpc=1" style="margin: 0px; padding: 0px; border-width: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; max-width: 100%;">

       由于React Native处于快速迭代发展中，因此组件功能的扩展、语法的变更也将会有较大的区别，因此升级版本则属于务必掌握的了。

昨天Himi刚从0.23版本升级到0.26，升级的主要原因有两点：

1. 一些组件在最新版本中加入了很多新的属性，例如0.23版本中Modal动画没有最新的属性：

animationType  enum(‘none’, ‘slide’, ‘fade’)

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

重大变更

在react-native中引用React的做法发生了变更（在当前版本老的做法会提出警告，在下一版本将会报错）：

之前

1	import React , Component , View from 'react-native' ;

现在

1 2	import React , Component from 'react' ; import View from 'react-native' ;

具体哪些属于React，哪些属于React Native，可以参考这篇帖子（需要科学上网）。

我摘录如下：

“react”:

Children
Component
PropTypes
createElement
cloneElement
isValidElement
createClass
createFactory
createMixin

“react-native”:

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版本,成功后可能会出现如下类似警告：

1	npm WARN react - native @ 0.26.2 requires a peer of react @ 15.0.2 but none was installed .

3. npm install –save react@15.0.2

更新最新的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