Skip to main content

0.61 升级

React Native 0.61 最主要的更新就是 Fast Refresh 的引入了,这个功能大大提升了开发体验。

Fast Refresh 的加入有两个好处,第一个是把 live reloadinghot reloading 两个功能合二为一并做了功能加强;第二个终于支持 Hooks 热更新了。虽然 0.59.10 已经支持 hooks,但是当时的函数式组件不支持热更新,开发体验过于差劲。升级到 React Native 0.61 后就可以使用了。

整体来说 0.61 的更新很小,一两个小时就可以完成升级。升级前建议参考 Upgrade HelperUpgrade to React Native 0.61 这篇博文,我会对文中没有说明的地方进行补充。


1.React Native

JavaScript 这里主要是一些 API 的变动和升级,跟着报错信息修改就好,难度并不大。

1⃣️ React 升级到 16.9

React 升级到 16.9 后,componentWillMount 等 API 废弃,必须迁移到 UNSAFE_componentWillMount 等带有 UNSAFE_ 前缀的 API。

主工程里这些 API 比较容易重构和替换,麻烦的是一些很久没有维护的第三方 JS 包,这时候需要自己手动 Fork 一份代码维护,或者替换同功能的正在维护的第三方包,这个属于技术债,只能一点一点克服。

2⃣️ 引用路径改动

更新后有些方法和组件的引用路径发生了变更,需要我们适配一下:

1.ErrorUtils 默认绑定到 global 上,不需要 import ErrorUtils from ErrorUtils 导入了

2.RCTNetworking 引用路径发生改变,需要修改为:

const RCTNetworking = require('react-native/Libraries/Network/RCTNetworking');

3.Dimensions 导入方式也发生了改变,需要修改:

import Dimensions from 'Dimensions';

⬇️

import { Dimensions } from 'react-native';

3️⃣ Android 真机 debug 环境下 onPress 事件不能响应

React Native 版本更新的时候,解决一部分 BUG 的同时一定会引入一些新的 BUG

0.61 版本就引入了一个新 BUG:Android 真机用 chrome 浏览器 debug 时,Touchable* 系列组件的 onPress 事件无发响应。

这个问题 GitHub 上已经有人反馈过了(issues 27008),有人认为是电脑环境和 Android 手机环境的时间不一致导致,两者的时间差导致点击事件中断。

解决办法比较 Hack,方法是关闭 Android 手机的时间自动同步功能,然后重启手机并重新安装应用。测试下来此方法的确可行,在此记录一下助有缘人避坑。


2.iOS

0.61 之后,React Native iOS 端只支持通过 Cocoapods Link 了,如果 0.60 已经升级到 Cocoapods 了,那么这次的 iOS 升级将会非常快,只需要改动 Podfile 中一些库的导入路径就可以了。

具体的差异可见 Upgrade Helper,非常简单,比对修改后重新 pod install 就可以了。


3.Android

0.61 的 Android 升级也比较简单,升级了 Gradle 版本,修改了 Hermes 的引用路径,跟着 Upgrade Helper 的 Diff 依次修改就可。




一个小尾巴

欢迎关注公众号:卤代烃实验室:专注于前端技术、混合开发、图形学领域,只写有深度的技术文章