0.62 升级

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

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

整体来说 0.62 的更新也很小，一两个小时就可以完成升级。升级前建议参考 Upgrade Helper 和 Upgrade 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 进行集成就好，难度不是很大。




一个小尾巴

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