【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动画没有最新的属性:

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 [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

时间: 2024-08-08 09:41:32

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

菜鸟窝React Native 系列教程-1.移动端开发趋势与未来

菜鸟窝React Native 系列教程-1.移动端开发趋势与未来 课程持续更新中..... 我是RichardCao,现任新美大酒店旅游事业群的Android Developer.如果你也有兴趣录制RN视频,请加入下面QQ群找我. 下载地址:https://pan.baidu.com/s/1c1XmE56 密码:shhw 首发地址:菜鸟窝-ReactNative学习板块 交流QQ群:576089067 课程目录:菜鸟窝React Native 系列教程

【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html 本篇Himi来利用ListView和TextInput这两种组件实现对话.聊天框. 首先需要准备的有几点:(组件的学习就不赘述了,简单且官方有文档) 1. 学习下 ListView: 官方示例:http://reactnative.cn/docs/0.27/tutorial.html#content

【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2219.html 在上一篇  [REACT NATIVE 系列教程之一]触摸事件的两种形式与四种TOUCHABLE组件详解 中的最后介绍了如何使用Touchable的四种组件进行监听触摸事件.  那么紧接着我们利用Touchable来包装一个带图片的Button组件,且设计成可接受很多自定义参数. 一:创建我们自定义

【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信

一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要.那么Himi先讲解React Native与iOS之间的通信交互. 本篇主要分为两部分讲解:(关于其中讲解的OC语法等不介绍,不懂的请自行学习) 1. React Native 访问iOS 2. iOS访问React Native     一:React Native 访问iOS 1. 我们想要JS调用OC函数,就要实现一个"RCTBridgeModule"协议的Objective-C类 所以首先我们先创建一个oc新类,  

【REACT NATIVE 系列教程之十一】插件的安装、使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2294.html 本篇主要来详细介绍如何安装.升级插件及讲解一个react-native-tab-navigator的示例. 首先推荐一个插件网站:https://www.npmjs.com     (此插件属于半官方维护的) 本文举例使用的插件:react-native-tab-navigator ,选项卡形式的导

【REACT NATIVE 系列教程之七】统一ANDROID与IOS两个平台的程序入口&&区分平台的组件简介

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2260.html       本篇介绍两个细节:       1. 关于如何将index.android.js 与index.ios.js统一管理起来.       2.  Platform 组件的简单介绍与使用   一:将index.android.js 与index.ios.js统一管理起来. 由于React本身

【REACT NATIVE 系列教程之一】触摸事件的两种形式与四种TOUCHABLE组件详解

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2203.html 本文是RN(React Native)系列教程第一篇,当然也要给自己的群做个广告:   React Native @Himi :126100395  刚创建的群,欢迎一起学习.讨论.进步. 本文主要讲解两点: 1.   PanResponder:触摸事件,用以获取用户手指所在屏幕的坐标(x,y)或触

ComicEnhancerPro 系列教程十九:用JpegQuality看JPG文件的压缩参数

作者:马健邮箱:[email protected] 主页:http://www.comicer.com/stronghorse/ 发布:2017.07.23 教程十九:用JpegQuality看JPG文件的压缩参数 事先声明: 严格说来这篇教程是讲JpegQuality的,其实与CEP本身关系不大,但因为我自己经常从CEP启动JpegQuality查看JPG压缩参数, 我觉得其他人可能也有类似的需求,所以就在CEP系列教程里加了这么一篇,并不是有意给JpegQuality打广告. JpegQua

Provisioning Services 7.8 入门系列教程之九 手动更新虚拟磁盘

续Provisioning Services 7.8 入门系列教程之八 自动添加设备 在实际在生产环境中,用户总会要对操作系统.应用软件以及驱动程序进行升级.在PVS中,升级实质是对设备所使用的虚拟磁盘进行更新. PVS 7.8提供了两大类更新方式,一是手动更新,一是自动更新.相比自动更新,手动更新最大不便之处在于只能关机更新,无法完成开机状态下的设备.下面将介绍手动更新虚拟磁盘. 在更新虚拟磁盘之前,用户必须了解虚拟磁盘所在位置,模式以及该如何保证更新能顺利完成. 1.查看虚拟磁盘属性:(文件