【独家】React Native 版本升级指南

前言

React Native 作为一款跨端框架，有一个最让人头疼的问题，那就是版本更新。尤其是遇到大版本更新，JavaScript、iOS 和 Android 三端的配置构建文件都有非常大的变动，有时候三者的配置文件又互相耦合在一起，往往牵一发而动全身。

本文假定 React Native 升级的主导者是前端同学，比较熟悉 javaScript 为主的一套前端构建流程。如果有条件，升级时强烈建议拉上 iOS 和 Android 开发，对于一些琐碎的升级细节，当面沟通远比搜索引擎高效。

提示：因为每次修改和新增内容都会隐藏文章重新审核，建议阅读博客原文获得最佳阅读体验

👉 阅读博客原文

觉得文章对你有用的话一定要记得点赞哦 🌟，谢谢你，这对我来说真的很重要！

一、磨刀不误砍柴工

这部分知识我认为是最重要的，毕竟版本更新是永恒的，操作流程却是不变的。

详细介绍各端构建工具前，我们抛开各种技术细节，从整个项目的生命周期出发，看看大部分产品是怎么做技术规划的：

• 产品早期：架构都比较简单，整个项目拿个配置文件做配置就好了，配置文件越简单越好，xml、json 就被拿出来用了
• 产品发展期：需要配置的地方变多了，这时候多加几个配置项多加几个参数，虽然有些繁琐，但静态的配置文件还够用
• 产品成熟期：人员扩增代码膨胀，静态的配置文件完全不够用了，为了达到动态配置的目的，往往会引入一门脚本语言或自创一套 DSL 来管理相关配置
• 产品晚期：一把火烧了另起炉灶（记得删掉）

理清一个技术产品的生命周期后，你就会对日常开发中配置文件有了整体的认知：那些又臭又长的配置项，乱七八糟的兼容写法，毫无美感的 DSL，最神奇的是这些七拼八凑的东西还能把项目跑起来，Build 成功的那一刻你一定会对这种人类奇迹发出由衷的敬佩之情——原来这就叫专业啊！

收一收澎湃的情绪，牢记上面的指导经验，我们下面开始讨论技术细节。

1.【Web 前端】项目配置

前端工程化一直是前端里面的热点，虽然一直很热，但是具体实现还是一团糟。个人认为原因主要有两点，一个是前端构建从无到有，相对而言基础薄弱；一个是社区推动，百花齐放的同时又没有统一标准。就拿现在前端的主要配置文件来说：

• 用 package.json 管理 npm 包
• 用 npm script 实现流程管理，有时候还要把相关脚本塞到 package.json 里
• 用 eslint 进行编码规范，有时候还要写个 .eslintrc.js
• 用 babel 处理语法兼容，有时候还要写个 babel.config.js
• 用 webpack 进行项目构建和打包发布
• …

上面只是列出了几个主流配置，不出意外的话，现在你的项目里已经有 5 个配置文件了，在 JavaScript 这个前端万能脚本语言的粘合下，这些配置文件还可以互相引用互相耦合，复杂度搞成这样，开发体验还没有 iOS Android 的一半好。

如果你认为我只是单纯的批评前端那你就理解错了，我想表达的是，这么复杂的配置都能搞定，iOS Android 的项目配置还不是手到擒来？

2.【iOS】项目配置

iOS 项目主要有两个点：project.pbxproj 和 CocoaPods。这两块儿的知识了解后，升级 RN 就完全不虚了。

1⃣️ project.pbxproj 与 Xcode

project.pbxproj 就是一个 iOS 项目的配置文件，从数据结构特点上有些像 JSON，年龄可以追溯到 NeXT，可读性基本为 0，每次 git 合并都是纯黑的噩梦。不信你瞅瞅下图，这是给人看的吗。

可读性这么差的东西能传下来，其实全靠 XCode 这个 IDE 给它续命。我们每次在 XCode 里修改的配置，例如 Build Settings 等选项，最后都会反映到 project.pbxproj 这个配置文件上，也算是一种另类 DSL 了。

project.pbxproj 相关的知识我推荐下面几篇文章，阅读后会让你对 iOS 编译打包流程有个更深的了解：

• iOS 开发 xcode 中的 project.pbxproj – 深入剖析：介绍了 project.pbxproj 文件的一些特点

• Xcode 工程文件 project.pbxproj 小结：看完后会对 XCode 配置和 project.pbxproj 文件的对应关系有着更深刻的了解

• Xcode - Target , PROJECT 区别：介绍了 Xcode 中各个配置项是什么意思

• XCode Build 过程

2⃣️ CocoaPods

CocoaPods 是一个负责管理 iOS 项目中第三方开源库的工具，目前主流 iOS 工程都是用 CocoaPods 管理第三方库的。

React Native 在 0.60 里终于用上了 CocoaPods，和 iOS 社区步调一致了起来。这样做的好处就是后续维护和迭代的压力会小很多，鬼知道我以前升级各种 iOS SDK 的日子是怎么熬过来的。

相对 project.pbxproj，CocoaPods 无疑简单了不少，写配置脚本的 Ruby 语言也比较清爽，Podfile 的可读性要高很多。

platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target '项目名称' do
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/React'

  use_native_modules!
end

CocoaPods 的学习资料可以参考下文，不够的话自行搜索即可：

CocoaPods 使用教程

3.【Android】项目配置

Android 的项目配置主要是由 gradle 文件控制的，gradle 文件又由 Groovy 这门 JVM 系的脚本语言书写。到这里思路就很明显了，我们只要了解一些 Groovy 的语法和 gradle 的写法，就能读懂和修改 Android 的配置文件了。在这里我推荐一些相关教程，读完后就会有个大致的了解：

• Groovy 脚本基础全攻略
• Gradle 脚本基础全攻略
• Gradle 提示与诀窍

学习了基础的语法后，再回到 Android 工程上来。Android 的项目配置主要由 3 个文件控制，升级时冲突较多的也是这 3 个文件：

• settings.gradle：用来指示 Gradle 在构建应用时应将哪些模块包含在内
• build.gradle：定义适用于项目中所有模块的构建配置
• app/build.gradle：定义 App 的构建配置

个人认为 Android 的 Gradle 配置还是比较容易入门的，因为 gradle 文件有个好处，可以随意的添加注释。大家可以花点儿时间把每个配置项都加上注释，这样在升级改动过程中就不容易发怵。

4.RN 官方升级助手

React Native 官方在 2019 年 7 月 0.60 大版本更新时，推出了 Upgrade Helper 这个 Diff 小工具。通过这个工具我们可以方便的看出版本更新时各个配置脚本的改动，非常的方便。

二、升级流程

RN 版本升级时，我的升级流程一般是这样的：

• 通畅的网络环境，可以自由访问 Google 那种
• 查看官方博客，获取版本更新的主要内容
• 阅读 RN GitHub 上的 CHANGELOG，获取版本更新的具体改动，适配 API 变更
• 阅读第三方依赖的 README.md 文件，是否需要同步升级
• 使用 Upgrade Helper 做版本 Diff，并阅读 upgrading-react-native 的相关博文，修改项目配置文件与配置脚本
• 删除 node_modules 与缓存，重新 Build 项目，如果 Build 失败，根据报错信息搜索 or 询问 Native 开发同学
• 回归测试

在更新过程中，个人建议 git commit 操作要尽量原子化，方便后续复盘和回滚，小心驶得万年船。

在我实际升级中，因为 React Native 0.59 到 0.60 有非常大的变动，并且业务较为复杂，升级 0.60 花了两个星期的时间：iOS 一周，Android 一周；0.61 和 0.62 的升级就比较简单了，大概一两个小时就可以升级好。

三、React Native 0.60 升级

2019 年 7 月 3 日 Facebook 官方发布了 React Native 0.60，这是一次非常大的版本更新，虽然没有添加新的功能，但是在底层上做了很多优化，向主流配置靠齐：

• 移除 WebView 等组件交给 react-native-community 社区维护
• 利用 CocoaPods 管理 iOS 的第三方依赖，向 iOS 主流配置靠齐
• Android 迁移到 AndroidX，方便后续的升级与更新
• React Native 的一些第三方包会自动链接，不再需要手动使用 react-native link * 了

0.60 升级时一定要有耐心，不可能一次性成功的，建议参考 Upgrade Helper 和 Upgrade to React Native 0.60 这篇博文，我会对文中没有说明的地方进行补充。

升级前先确保相关第三方包已经是最新版本。

1.React Native

JavaScript 这里相对来说好升级一些，毕竟是前端程序员的主场。根据 Diff 差异升级版本号后，还需要注意以下几点：

1⃣️ 部分 RN 内置组件交给社区维护

NetInfo、WebView 和 Geolocation 从 React Native 中移除，交给