0.61 升级
React Native 0.61 最主要的更新就是 Fast Refresh 的引入了,这个功能大大提升了开发体验。
Fast Refresh 的加入有两个好处,第一个是把 live reloading 和 hot reloading 两个功能合二为一并做了功能加强;第二个终于支持 Hooks 热更新了。虽然 0.59.10 已经支持 hooks,但是当时的函数式组件不支持热更新,开发体验过于差劲。升级到 React Native 0.61 后就可以使用了。
整体来说 0.61 的更新很小,一两个小时就可以完成升级。升级前建议参考 Upgrade Helper 和 Upgrade 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 依次修改就可。
欢迎关注公众号:卤代烃实验室:专注于前端技术、混合开发、图形学领域,只写有深度的技术文章