react-native 从 v0.61.4 升级到 v0.70.6 踩坑指南

[xianguoGou]

需求背景

• 目前，Cyborg项目中的react-native 已经很久都没有更新，还停留在v0.61.4版本，而现在最新版本已经升级到v0.70.6了；
• 为了解决项目工程化配置（bundle、build）阶段，遇到的各种未知报错，和优化繁琐且复杂的启动流程；
• 跟上时代步伐，与时俱进；享受react-native更新之后，带来的性能提升和用户体验；

例如，在之前的react-native v0.61.4（历史版本）中， 当我们需要快速修复一个bug， 总是很苦恼在应用bundle或者build阶段，遇到有各种奇怪的问题，例如一个典型的 sharp :

当我们在构建发布版本时，遇到的这种类似的问题，其实和我们项目中用到的关系并不大，也就是我们所说的，其实并不关心这些，作为开发者，我们只需要关注业务/功能代码本身逻辑，其他的交给 RN 就好了，它会帮我们做android和ios平台兼容处理。可事实上？并不是这样。。。

又或者在项目clone下来之后，yarn install 安装失败就已经让你劝退了， 这又是什么原因？？？也许你会发现是node版本太高了，需要你降级到node 14及以下版本，才能安装成功，是的，这又是sharp模块安装，需要低版本的node才能安装成功 。

然而这些，只是暴露的部分已知的小问题，大多数都在版本迭代中修复了，这也是我们这次升级的目标之一，其次，由于开发者们所使用的机型、mac系统，Android Studio、Xcode 版本都不一致。导致问题出现的原因千奇百怪，这也是我们接下来需要探索和解决的问题。

当然，最直接的原因就是换了mac M1之后，项目跑不起来了，果断升级！🤔🤔🤔

寻找解决方案

在我们一波分析之后，首先做的事情就是先升级 react-native，这里有一份帮助开发者升级的官方食用指南

它能帮助我们，在升级过程中清晰的知道，中间每个版本发生大的变化和更新。

在第一次尝试升级失败之后，再次发起挑战， 升级之前在stackoverflow、 github查阅相关资料，把前面各种尝试失败的经验记录下来。（千里之行，始于足下）

先升级react-native、react版本，接着升级babel、eslint 和jest相关插件。按照helper文档一步步走，好了之后。先在android studio build一次，看有哪些问题（后面有记录）

过程中遇到的问题

一句话总结下来就是，第三方依赖包的更新和 gradle升级 以及修改第三方包升级之后语法不兼容的问题。

值得一提的是，在react-native升级之后，由原来的JavaScriptCore更换成新的Hermes引擎，这次更换，用官方语言来总结一下：

Hermes is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore. Hermes is used by default by React Native and no additional configuration is required to enable it.

简而言之，就是速度更快，体积更小。

其他依赖包主要的更新包括：

• jcore-react-native 处理RN升级之后，ts和lint语法报错问题
• react-native-screens 处理RN升级之后，ts和lint语法报错问题
• react-native-qrcode-svg 处理RN升级之后，ts和lint语法报错问题
• react-native-reanimated， 解决应用启动之后的warning警告, 链接。

在 android studio build 成功之后，应用启动起来，算是长舒了一口气，可后面的问题，又在打包apk时，问题发生了，花了半天时间排查。最后定位到问题原因是缺少一个bundle文件（由于一开始忽略了一个细节性错误，导致没找到问题所在，属实我的锅。）

👮👮👮 ： 测试过程中发现，某些android设备打开应用会出现闪退，例如 vivo、oppo机型。最后真机debug发现， @sentry/react-native 包版本比较低，在android新版本机型上会出现语法不兼容的问题（参考）。截图如下：

解决方案：升级sentry版本` "@sentry/react-native": "^4.9.0"`，最后build成功，测试一切正常。

问题记录：

总结

问题大多数是在build阶段遇到的，虽然说这次升级已经完成了，但后面还有一些第三方依赖还没来得及升级，如果感兴趣的同学，也可以顺便尝试一下，另外我们有些的库版本比较老了，现在有些已经不维护了，我们得找一些比较好的库替代，这也算是一个挑战。（路漫漫其修远兮，吾将上下而求索……）

参考资料

1. [Android] Couldn't find DSO to load crash in release build and hermes is enabled  facebook/react-native#33120
2. Failed to transform react-native-reanimated-65-jsc.aar facebook/react-native#32037
3. JS Engine Hermes: Typeerror: Cannot read property 'createNode' of null oblador/react-native-animatable#304
4. [iOS] Build fails with error duplicate symbols for architecture x86_64 · Issue #27840 · facebook/react-native
5. "_OBJC_CLASS_$_RNSplashScreen", referenced from: objc-class-ref in AppDelegate.o crazycodeboy/react-native-splash-screen#318
6. https://developers.weixin.qq.com/community/develop/doc/000c6275b68bf014265b30dc256800?_at=1670249635146
7. "_OBJC_CLASS_$_RNSplashScreen", referenced from: objc-class-ref in AppDelegate.o crazycodeboy/react-native-splash-screen#318 (comment)
8. yogakit/yogakit.modulemap' not found React Native facebook/react-native#29605 (comment)
9. ……

[xianguoGou]

由于路由相关代码改动太多，并且可能会影响到业务逻辑。
所以暂时不会升级react-navigation-tabs。这样会带来一个问题 ->

表单页面 点击表单跳转到 表单-概述页面 会报出以下错误，

所以这里先暂时手动处理一下。

修改 node_modules/react-navigation-tabs/lib/module/utils/withDimensions.js 文件如下：

// before
 componentWillUnmount() {
      Dimensions.removeEventListener('change', this.handleOrientationChange);
 }
    
// after
 componentWillUnmount() {
      Dimensions.removeEventListener && Dimensions.removeEventListener('change', this.handleOrientationChange);
 }