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

简介:

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

111111

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

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的方式 (如果没有版本更新没有语法变更,请无视)

 




本文转自 xiaominghimi 51CTO博客,原文链接:http://blog.51cto.com/xiaominghimi/1785438,如需转载请自行联系原作者

目录
相关文章
|
9天前
|
前端开发 JavaScript
React 步骤条组件 Stepper 深入解析与常见问题
步骤条组件是构建多步骤表单或流程时的有力工具,帮助用户了解进度并导航。本文介绍了在React中实现简单步骤条的方法,包括基本结构、状态管理、样式处理及常见问题解决策略,如状态管理库的使用、自定义Hook的提取和CSS Modules的应用,以确保组件的健壮性和可维护性。
46 17
|
2月前
|
前端开发 开发者 UED
React 18 与之前版本的主要区别
【10月更文挑战第12天】 总的来说,React 18 的这些区别体现了 React 团队对于提升应用性能、用户体验和开发效率的持续努力。开发者需要适应这些变化,充分利用新特性来构建更出色的应用。同时,随着技术的不断发展,React 也将继续演进,为开发者带来更多的创新和便利。
|
2月前
|
前端开发 JavaScript CDN
React 教程
10月更文挑战第6天
50 3
|
3月前
|
Web App开发 前端开发 测试技术
react18基础教程系列--安装环境及packagejson文件分析
react18基础教程系列--安装环境及packagejson文件分析
|
3月前
|
前端开发
React按需加载antd步骤以及出现的问题
在使用`babel-plugin-import`插件时,可以在项目的根目录创建`.babelrc`文件或在`package.json`中添加babel配置。这两个文件中不应该存在重复的配置。如果出现"Multiple configuration files found"错误,需要选择其中一个文件进行配置,并删除另一个文件中的babel配置。使用该插件后,可以直接从`antd`引入组件,无需手动引入样式文件。
78 1
|
4月前
|
存储 监控 前端开发
|
4月前
|
前端开发
【实战指南】React Hooks 详解超厉害!六个步骤带你提升 React 应用状态管理,快来探索!
【8月更文挑战第31天】React Hooks 是 React 16.8 推出的新特性,允许在函数组件中使用状态及其它功能而无需转换为类组件。通过以下六个步骤可有效提升 React 应用的状态管理:1)使用 `useState` Hook 添加状态;2)利用 `useEffect` Hook 执行副作用操作;3)在一个组件中结合多个 `useState` 管理不同状态;4)创建自定义 Hook 封装可重用逻辑;5)借助 `useContext` 访问上下文以简化数据传递;6)合理运用依赖项数组优化性能。React Hooks 为函数组件带来了更简洁的状态管理和副作用处理方式。
48 0
|
5月前
|
前端开发
react18【系列实用教程】Hooks 闭包陷阱 (2024最新版)含useState 闭包陷阱,useEffect 闭包陷阱,useCallback 闭包陷阱
react18【系列实用教程】Hooks 闭包陷阱 (2024最新版)含useState 闭包陷阱,useEffect 闭包陷阱,useCallback 闭包陷阱
80 0
|
5月前
|
JavaScript
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
66 0
|
7月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
382 0
下一篇
DataWorks