0.62 升级

React Native 0.62 也是加强了开发者体验,RN 项目默认引入了 Flipper 这个 Facebook 制作的移动端调试工具,支持了 React DevTools v4,错误提示可以选择新的 LogBox,比原来的错误提示更加友好从而更容易定位问题。

除了开发体验的加强,这次更新还支持了 Dark Mode 模式,RN 之后就可以做暗黑模式的适配了。

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


1.React Native#

1⃣️ useNativeDriver 显式指定#

React Native 之前使用 Animated API 时,useNativeDriver 默认值为 false,也就是说默认都是 JS 线程绘制动画。版本升级后需要显式指定 useNativeDriver 的值。我认为这个更新的意义在于每次使用 Animated 时,强迫开发者思考能不能让动画在 Native 线程运行,优化动画体验。

2⃣️ LogBox 开启#

LogBox 这个功能在 0.62 里是默认关闭的,0.63 版本默认开启。0.62 里开启方式比较 Hack,需要按以下步骤操作:

1.项目根目录新建一个 before.js,然后里面只写一行代码:

require('react-native').unstable_enableLogBox();

2.在 JS 所有文件的入口文件 index.js 的第一行里导入这个文件:

import './before';

上面两步必须严格执行,不然的话会有红屏报错。

3️⃣ iOS TextInput 输入汉字时文字抖动#

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

0.62 版本就引入了一个新 BUG:iOS TextInput 输入汉字时文字抖动,具体表现可以看这个 issues

这个 BUG 在 0.63 已经得到解决了,相关的 commit 是这个:Fixes TextInput shaking when typing Chinese,大家可以手动添加一下这个修复,或者直接升级到 0.63,都可以解决问题。


2.iOS#

1⃣️ CocoaPods 更新#

Cocoapods 在这个版本里也有些改动,除去 Flipper 相关的 pod,改动非常小,根据 Upgrade Helper 中的 Diff 差异修改就好。

2⃣️ Swift 支持#

0.62 升级需要修改一些 Swift 相关的配置,具体升级流程可见 React Native 0.62 upgrade (Xcode)


3.Android#

0.61 的 Android 升级也比较简单,升级了 Gradle 版本,除去 Flipper 相关的更新,改动非常小,跟着 Upgrade Helper 的 Diff 依次修改就可。


4.Flipper#

Flipper

0.62 之后,Flipper 在 RN 的项目里是默认添加的,可以方便的查看 Layout、network 和 log 等信息。

旧项目升级时,Flipper 其实是可选的,安装有些波折,上手体验了一下感觉如下(版本为 0.52.1):

  • 把 React Native 的 console.log 信息和 Native 的 log 信息和在一个应用里,比较方便查看
  • 可以查看 Native Layout 布局,并且内置了 React DevTools v4,两者比对可以方便查看布局
  • Network 可以方便查看网络信息,这个一直是 RN 调试的一个痛点
  • 可以快速的截屏录屏,有助于和 UED 沟通
  • 支持自定义插件

上面都是优点,缺点还是有不少的,下面我说说我用下来感觉到的不足:

  • network 对 UTF-8 支持不太好。Flipper 对编码没有处理好,导致中文显示乱码,我已经给官方提了 issues,但是一直没有理我
  • network 图片解析也有问题,被解析为乱码的文本
  • log 模块的数据都是字符串,即使你 log 的是 object,它也只是展示 JSON.stringify 后的数据

以上就是我的使用体验,要不要在项目中使用,我觉得大家还是亲自体验一下比较好。

如果要在项目中集成 Flipper,根据 Upgrade Helper 进行集成就好,难度不是很大。




一个小尾巴

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