由于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‘;
现在
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
本文出自 “李华明Himi” 博客,请务必保留此出处http://xiaominghimi.blog.51cto.com/2614927/1785438
【REACT NATIVE 系列教程之九】REACT NATIVE版本升级步骤与注意事项!
原文地址:http://xiaominghimi.blog.51cto.com/2614927/1785438