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

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

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

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

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

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

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

重大变更

在react-native中引用React的做法发生了变更(在当前版本老的做法会提出警告,在下一版本将会报错):

之前

现在

具体哪些属于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版本号改成最新(或指定版本号)如下图:

111111

二:打开终端,以此输入如下命令进行操作:

1. cd /Users/Himi/xxxxxx   

先cd到你项目的根目录下

2. npm install

安装最新的React Native版本,成功后可能会出现如下类似警告:

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

 


ReactNative学习问题笔记三:The package react@16.0.0-alpha.6 does not satisfy its siblings' peerDependencies

git上clone一个工程,本地机器上以前安装了nodeJs等环境,当执行‘npm install’命令开始下载安装第三方组件时,一直报以下异常: npm ERR! peerinvalid The ...
  • fushiming
  • fushiming
  • 2017年06月01日 13:56
  • 2410

react-native init的时候出现问题:npm WARN React-native@0.35.0 requires a peer of react@~15.3.1 but none was

react-native init的时候出现问题: 报错信息 npm WARN React-native@0.35.0 requires a peer of react@~15.3.1 b...
  • weixin_37852133
  • weixin_37852133
  • 2017年12月05日 10:23
  • 164

WARN React-native@0.35.0 requires a peer of react@~15.3.1 but none was installed.

报错信息npm WARN React-native@0.35.0 requires a peer of react@~15.3.1 but none was installed.解决方案:方法一:np...
  • snake_son
  • snake_son
  • 2016年12月30日 17:11
  • 5569

React Native踩坑记录

添加依赖报错信息: npm WARN react-native@0.35.0 requires a peer of react@~15.3.1 but none was installed. 解决...
  • linshijun33
  • linshijun33
  • 2016年11月29日 23:15
  • 2862

【React Native开发】React Native库版本升级(Upgrading)与降级讲解(6)

(一)前言      【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org        现在React Native F...
  • jiangqq781931404
  • jiangqq781931404
  • 2016年01月17日 21:25
  • 12335

【React Native】- ReactNative的版本升级

在低版本项目中使用高版本组件时,会报错,因此我们需要时刻升级我们的ReactNative版本,在获得更多API,组件的同时, 避免出现兼容问题错误。可以通过react-native -v查看当前版本信...
  • baidu_35701759
  • baidu_35701759
  • 2017年06月13日 17:54
  • 1438

ReactNative学习——react-native版本升级

由于现在ReactNative还没发布正式版本,版本的更新非常快,新版本跟旧版本有的地方可能不兼容。所以快速的升级到最新的版本还是很有必要的,可以使用最新的API,view,工具等。升级方法: 去官...
  • mingyunxiaohai
  • mingyunxiaohai
  • 2016年11月01日 14:33
  • 3186

React Native 版本升级与降级

React Native 版本升级与降级 (一)前言 现在React Native For  Android刚刚开源才不久,现在整体功能还不健全完善以及开发中的坑(Bug)还是比较多的 ...
  • shan1991fei
  • shan1991fei
  • 2017年01月10日 13:36
  • 4533

React-Native版本升级的实践方案

前言在React Native的工程项目中,版本升级是避免不了的,尤其是RN这种框架版本的迭代速度非常之快,如果一味使用旧版本,就无法使用新特性,如果升级,很可能会导致版本兼容问题,正所谓“与何雄站不...
  • jiangbo_phd
  • jiangbo_phd
  • 2017年01月23日 15:06
  • 3089

React-Native从入门到放弃(二)

demo完成之后,公司没用,没有精力再弄了,给大家列出学习资料 React Native 构建 Facebook F8 2016 App / React Native 开发指南http://f...
  • ruglcc
  • ruglcc
  • 2016年12月20日 05:26
  • 1682
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【REACT NATIVE 系列教程之九】REACT NATIVE版本升级步骤与注意事项!
举报原因:
原因补充:

(最多只允许输入30个字)