React Native 入门(四) - RN 版本升级,从 0.48 升到 0.49 的坑

前端之家收集整理的这篇文章主要介绍了React Native 入门(四) - RN 版本升级,从 0.48 升到 0.49 的坑前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

当前 RN 版本:0.49
操作环境:Windows 10

前段时间,facebook 正式发布了 RN 的 0.49 版本,相对于0.48 来说,改动并不是特别大。目前 RN 一个月发布一次新版本,由于越来越稳定,建议把项目一直更新到最新的稳定版,从而能使用到新特性。

React Native 升级流程

首先确保已经安装了 Git,才能进行下面的操作。

1.全局安装 react-native-git-upgrade 模块

在控制台输入以下命令按下回车等待安装完成:

npm install -g react-native-git-upgrade

2.升级项目

在项目目录下输入以下命令按下回车等待安装完成:

react-native-git-upgrade

升级完成后,可以看到以下几个文件发生了改变。RN 的版本则由 0.48.3 升级到了 0.49.3 。

升级后我们直接运行项目,发现是跑不起来的。

3.解决冲突

一般来说,升级跨度的版本越大,出现冲突的几率也就越大。首先要参考官方的更新日志,看看哪里发生了变化,才知道从哪里下手去改。

Release September 2017:https://github.com/facebook/react-native/releases/tag/v0.49.0

升级后需要对以下两个地方做出更改:

(1) 0.49 版本最大的一个变化应该就是将两个平台的入口文件 index.android.jsindex.ios.js 合并成了一个入口文件 index.js,但是 RN 并不会自动帮你完成这个改变,你需要自己完成这步操作,比如将 index.android.js 重命名index.js ,然后把 index.ios.js 删除。正常情况下这一步之后就可以正常编译运行了。

(2) 但是我的项目编译运行会弹出下面的错误

我们找到对应错误的地方:

由于我在项目里面使用了 Navigator,而这个组件已经被官方弃用了,所以只能通过导入 react-native-deprecated-custom-components 来使用。而通过上面这个包里的源码我们可以发现,它使用了 React.PropTypes,问题正是出在这里。

其实从 React 16.0.0 开始,PropTypes 就已经不再由 React 提供了,而 fb 专门提供了 prop-types 模块,需要通过

import PropTypes from ‘prop-types’

来使用 PropTypes。0.48 版本的 RN 使用的是 16.0.0-alpha.12 版本的 React,alpha 版本还没有移除 PropTypes,所以之前项目不会有任何问题。而到了 0.49版本,自动将 React 升级到了 16.0.0-beta.5,这个版本已经移除了 PropTypes,所以再编译就会报错了,因为找不到 PropTypes 了。

而此时我发现 react-native-deprecated-custom-components 这个包还没有更新,为了解决这个问题,我在 package.json 文件里将 React 的版本还原到了 16.0.0-alpha.12,然后执行

npm install

进行重装。完成后编译运行,项目成功启动。

这虽然是一个解决办法,但不建议这么做,以后如果 RN 更新后不再支持 16.0.0-alpha.12 的 React 的话,这种办法自然也就无效了。如果你的老项目使用了 react-native-deprecated-custom-components ,那么建议你继续使用 0.48 版本。新项目的话,赶紧放弃 react-native-deprecated-custom-components 吧!

0.49 版本的新特性

除了上面说的合并入口文件,0.49 的改动并不是特别大,另外就是增加了个别组件,比如说 CheckBox修改了部分 api,修复了很多 bug,支持 Android 8.0 等。

详细更新信息可以参考官方更新日志:https://github.com/facebook/react-native/releases/tag/v0.49.0

猜你在找的React相关文章