跳到主要内容

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 进行集成就好,难度不是很大。




一个小尾巴

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