首页 › React论坛 › 【独家】React Native 版本升级指南

哈小强 發表於 2020-8-26 10:37:00

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

<section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="font-size: 16px; color: rgba(0, 0, 0, 1); padding: 0 10px; line-height: 1.6; word-spacing: 0; letter-spacing: 0; word-wrap: break-word; text-align: left; font-family: -apple-system-font, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Arial, sans-serif"><figure data-tool="mdnice编辑器" style="margin: 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://image-1255652541.cos.ap-shanghai.myqcloud.com/images/IMG_6735.PNG" alt="" style="display: block; margin: 0 auto; max-width: 100%"></figure>
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; padding: 0; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgba(89, 89, 89, 1); margin-bottom: 30px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgba(89, 89, 89, 1)">前言</span><span class="suffix"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">React Native 作为一款跨端框架，有一个最让人头疼的问题，那就是<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">版本更新</strong>。尤其是遇到大版本更新，JavaScript、iOS 和 Android 三端的配置构建文件都有非常大的变动，有时候三者的配置文件又互相耦合在一起，往往牵一发而动全身。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">本文假定 React Native 升级的主导者是<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">前端</strong>同学，比较熟悉 javaScript 为主的一套前端构建流程。如果有条件，升级时强烈建议拉上                iOS 和 Android 开发，对于一些琐碎的升级细节，<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">当面沟通远比搜索引擎高效</strong>。</p>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; border: none; background: rgba(235, 237, 240, 1); color: rgba(106, 115, 125, 1); padding: 10px; margin-bottom: 20px; margin-top: 20px; font-style: normal; position: relative; line-height: 1.8; text-indent: 0; border-radius: 0.3rem"><span style="display: inline; color: rgba(85, 85, 85, 1); font-size: 1.5em; font-family: Arial, serif; line-height: 1em; font-weight: 700">“</span>
<p style="padding-top: 8px; padding-bottom: 8px; text-align: justify; letter-spacing: 0; font-size: 16px; hyphens: auto; white-space: normal; font-family: &quot;&quot;; margin: 0; line-height: 26px; display: inline; color: rgba(106, 115, 125, 1); word-wrap: break-word !important">提示：因为每次修改和新增内容都会隐藏文章重新审核，建议阅读博客原文获得最佳阅读体验</p>
</blockquote>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">👉 阅读博客原文</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">觉得文章对你有用的话一定要记得<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">点赞</strong>哦 🌟，谢谢你，这对我来说真的很重要！</p>
<br data-tool="mdnice编辑器">
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; padding: 0; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgba(89, 89, 89, 1); margin-bottom: 30px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgba(89, 89, 89, 1)">一、磨刀不误砍柴工</span><span class="suffix"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">这部分知识我认为是最重要的，毕竟<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">版本更新是永恒的，操作流程却是不变的</strong>。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">详细介绍各端构建工具前，我们抛开各种技术细节，从整个项目的生命周期出发，看看大部分产品是怎么做技术规划的：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">产品早期</strong>：架构都比较简单，整个项目拿个<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">配置文件</strong>做配置就好了，配置文件越简单越好，xml、json 就被拿出来用了</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">产品发展期</strong>：需要配置的地方变多了，这时候<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">多加几个配置项多加几个参数</strong>，虽然有些繁琐，但静态的配置文件还够用</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">产品成熟期</strong>：人员扩增代码膨胀，静态的配置文件完全不够用了，为了达到动态配置的目的，往往会引入一门<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">脚本语言</strong>或自创一套 <strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">DSL</strong> 来管理相关配置</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><s><strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">产品晚期</strong>：一把火烧了另起炉灶（记得删掉）</s></section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">理清一个技术产品的生命周期后，你就会对日常开发中配置文件有了整体的认知：那些又臭又长的配置项，乱七八糟的兼容写法，毫无美感的 DSL，最神奇的是这些七拼八凑的东西还能把项目跑起来，Build 成功的那一刻你一定会对这种人类奇迹发出由衷的敬佩之情——<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">原来这就叫专业啊</strong>！</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">收一收澎湃的情绪，牢记上面的指导经验，我们下面开始讨论技术细节。</p>
<br data-tool="mdnice编辑器">
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; font-size: 20px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content">1.【Web 前端】项目配置</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">前端工程化一直是前端里面的热点，虽然一直很热，但是具体实现还是一团糟。个人认为原因主要有两点，一个是前端构建从无到有，相对而言基础薄弱；一个是社区推动，百花齐放的同时又没有统一标准。就拿现在前端的主要配置文件来说：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">用 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">package.json</code> 管理 npm 包</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">用 npm script 实现流程管理，有时候还要把相关脚本塞到 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">package.json</code> 里</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">用 eslint 进行编码规范，有时候还要写个 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">.eslintrc.js</code></section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">用 babel 处理语法兼容，有时候还要写个 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">babel.config.js</code></section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">用 webpack 进行项目构建和打包发布</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">......</section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">上面只是列出了几个主流配置，不出意外的话，现在你的项目里已经有 5 个<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">配置文件</strong>了，在 JavaScript 这个前端万能<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">脚本语言</strong>的粘合下，这些配置文件还可以<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">互相引用互相耦合</strong>，复杂度搞成这样，开发体验还没有 iOS Android 的一半好。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">如果你认为我只是单纯的批评前端那你就理解错了，我想表达的是，这么复杂的配置都能搞定，iOS Android 的项目配置还不是<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">手到擒来</strong>？</p>
<br data-tool="mdnice编辑器">
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; font-size: 20px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content">2.【iOS】项目配置</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">iOS 项目主要有两个点：<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">project.pbxproj</strong> 和 <strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">CocoaPods</strong>。这两块儿的知识了解后，升级 RN 就完全不虚了。</p>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">1⃣️ project.pbxproj 与 Xcode</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important"><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">project.pbxproj</code> 就是一个 iOS 项目的<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">配置文件</strong>，从数据结构特点上有些像 JSON，年龄可以追溯到 NeXT，可读性基本为 0，每次 git 合并都是纯黑的噩梦。不信你瞅瞅下图，这是给人看的吗。</p>
<figure data-tool="mdnice编辑器" style="margin: 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://image-1255652541.cos.ap-shanghai.myqcloud.com/uPic/image-20200825202753481.png" alt="project.pbxproj 代码" style="display: block; margin: 0 auto; max-width: 100%"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">project.pbxproj 代码</figcaption></figure>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">可读性这么差的东西能传下来，其实全靠 <strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">XCode</strong> 这个 IDE 给它续命。我们每次在 XCode 里修改的配置，例如 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">Build Settings</code> 等选项，最后都会反映到 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">project.pbxproj</code> 这个配置文件上，也算是一种另类 DSL 了。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important"><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">project.pbxproj</code> 相关的知识我推荐下面几篇文章，阅读后会让你对 iOS 编译打包流程有个更深的了解：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><p style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">iOS 开发 xcode 中的 project.pbxproj -- 深入剖析：介绍了 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">project.pbxproj</code> 文件的一些特点</p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><p style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">Xcode 工程文件 project.pbxproj 小结：看完后会对 XCode 配置和 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">project.pbxproj</code> 文件的对应关系有着更深刻的了解</p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><p style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">Xcode - Target , PROJECT 区别：介绍了 Xcode 中各个配置项是什么意思</p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><p style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">XCode Build 过程</p>
</section></li></ul>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">2⃣️ CocoaPods</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">CocoaPods 是一个负责管理 iOS 项目中第三方开源库的工具，目前主流 iOS 工程都是用 CocoaPods 管理第三方库的。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">React Native 在 0.60 里终于用上了 CocoaPods，和 iOS 社区步调一致了起来。这样做的好处就是后续维护和迭代的压力会小很多，鬼知道我以前升级各种 iOS SDK 的日子是怎么熬过来的。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">相对 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">project.pbxproj</code>，CocoaPods 无疑简单了不少，写配置脚本的 <strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">Ruby</strong> 语言也比较清爽，Podfile 的可读性要高很多。</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch">platform&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:ios</span>,&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'9.0'</span><br>require_relative&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/@react-native-community/cli-platform-ios/native_modules'</span><br><br>target&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'项目名称'</span>&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">do</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-Core'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/React'</span><br><br>&nbsp;&nbsp;use_native_modules!<br><span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">end</span><br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">CocoaPods 的学习资料可以参考下文，不够的话自行搜索即可：</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">CocoaPods 使用教程</p>
<br data-tool="mdnice编辑器">
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; font-size: 20px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content">3.【Android】项目配置</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">Android 的项目配置主要是由 <strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">gradle</strong> 文件控制的，gradle 文件又由 <strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">Groovy</strong> 这门 JVM 系的脚本语言书写。到这里思路就很明显了，我们只要了解一些 Groovy 的语法和 gradle 的写法，就能读懂和修改 Android 的配置文件了。在这里我推荐一些相关教程，读完后就会有个大致的了解：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">Groovy 脚本基础全攻略</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">Gradle 脚本基础全攻略</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">Gradle 提示与诀窍</section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">学习了基础的语法后，再回到 Android 工程上来。Android 的项目配置主要由 3 个文件控制，升级时冲突较多的也是这 3 个文件：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">settings.gradle</code>：用来指示 Gradle 在构建应用时应将哪些模块包含在内</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">build.gradle</code>：定义适用于项目中所有模块的构建配置</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">app/build.gradle</code>：定义 App 的构建配置</section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">个人认为 Android 的 Gradle 配置还是比较容易入门的，因为 gradle 文件有个好处，可以<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">随意的添加注释</strong>。大家可以花点儿时间把每个配置项都加上注释，这样在升级改动过程中就不容易发怵。</p>
<br data-tool="mdnice编辑器">
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; font-size: 20px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content">4.RN 官方升级助手</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">React Native 官方在 2019 年 7 月 0.60 大版本更新时，推出了 Upgrade Helper 这个 Diff 小工具。通过这个工具我们可以方便的看出版本更新时各个配置脚本的改动，非常的方便。</p>
<figure data-tool="mdnice编辑器" style="margin: 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://image-1255652541.cos.ap-shanghai.myqcloud.com/uPic/ob8sym.jpg" alt="React Native Upgrade Helper" style="display: block; margin: 0 auto; max-width: 100%"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">React Native Upgrade Helper</figcaption></figure>
<br data-tool="mdnice编辑器">
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; padding: 0; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgba(89, 89, 89, 1); margin-bottom: 30px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgba(89, 89, 89, 1)">二、升级流程</span><span class="suffix"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">RN 版本升级时，我的升级流程一般是这样的：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">通畅的网络环境，可以自由访问 Google 那种</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">查看官方博客，获取版本更新的主要内容</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">阅读 RN GitHub 上的 CHANGELOG，获取版本更新的具体改动，适配 API 变更</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">阅读第三方依赖的 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">README.md</code> 文件，是否需要同步升级</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">使用Upgrade Helper 做版本 Diff，并阅读 upgrading-react-native 的相关博文，修改项目配置文件与配置脚本</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">删除 node_modules 与缓存，重新 Build 项目，如果 Build 失败，根据报错信息搜索 or 询问 Native 开发同学</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">回归测试</section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">在更新过程中，个人建议 git commit 操作要尽量原子化，方便后续复盘和回滚，<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">小心驶得万年船</strong>。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">在我实际升级中，因为 React Native 0.59 到 0.60 有非常大的变动，并且业务较为复杂，升级 0.60 花了两个星期的时间：iOS 一周，Android 一周；0.61 和 0.62 的升级就比较简单了，大概一两个小时就可以升级好。</p>
<br data-tool="mdnice编辑器">
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; padding: 0; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgba(89, 89, 89, 1); margin-bottom: 30px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgba(89, 89, 89, 1)">三、React Native 0.60 升级</span><span class="suffix"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">2019 年 7 月 3 日 Facebook 官方发布了 React Native 0.60，这是一次非常大的版本更新，虽然没有添加新的功能，但是在底层上做了很多优化，向主流配置靠齐：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">移除 WebView 等组件交给 react-native-community 社区维护</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">利用 CocoaPods 管理 iOS 的第三方依赖，向 iOS 主流配置靠齐</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">Android 迁移到 AndroidX，方便后续的升级与更新</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">React Native 的一些第三方包会自动链接，不再需要手动使用 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">react-native link *</code> 了</section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">0.60 升级时一定要有耐心，不可能一次性成功的，建议参考Upgrade Helper和 Upgrade to React Native 0.60 这篇博文，我会对文中没有说明的地方进行补充。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">升级前先确保相关第三方包已经是最新版本。</p>
<br data-tool="mdnice编辑器">
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; font-size: 20px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content">1.React Native</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">JavaScript 这里相对来说好升级一些，毕竟是前端程序员的主场。根据 Diff 差异升级版本号后，还需要注意以下几点：</p>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">1⃣️ 部分 RN 内置组件交给社区维护</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important"><strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">NetInfo</strong>、<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">WebView</strong> 和 <strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">Geolocation</strong> 从 React Native 中移除，交给 react-native-community 社区维护。所以我们需要修改 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">import</code> 时的路径。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important"><strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">Slider</strong>、<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">AsyncStorage</strong>、<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">CameraRoll</strong>、<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">Clipboard</strong> 等组件也有移除计划，这次升级也可以顺便迁移一下。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">值得注意的是，<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">react-native-webview</strong> 在一次更新中为了响应 App Store 政策，已经移除了 UIWebView，只支持 WKWebView。如果你做过移动端的适配，你肯定明白 WKWebview 对 cookie 支持不太友好，这里需要重点回归测试一下；另外一点是如果 RN 和 H5 网页是通过 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">postMessage</code> 的方式交互，相关 API 也有一些不兼容更新，这里需要重点适配一下，具体细节可以看文档。</p>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">2⃣️ SwipeableFlatList 移除</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">SwipeableFlatList 是 React Native 在 0.5X 某个版本提供的<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">侧滑删除列表组件</strong>，虽然一直没有官方文档中放出来，但是社区上已经有很多人在使用了。可能对这个组件的实现不太满意，官方在 0.60 里删除了这个组件。为了不让项目报错，我们可能需要把 SwipeableFlatList 相关的源码拿出来自己手动维护一下，有人把相关代码提出来维护了一个 npm 包——react-native-swipeable-lists，大家可以引入暂时过度一下。</p>
<br data-tool="mdnice编辑器">
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; font-size: 20px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content">2.iOS</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">0.60 版本的 React Native 支持 CocoaPods，2020 年了，RN 终于支持 CocoaPods 了，没有 CocoaPods 的时代，为了使用一些 iOS 第三方库，我们必须手动把库文件拖到主工程里，升级和维护非常不方便。因为 0.61 版本 CocoaPods 是唯一可选包管理方案，所以强烈建议直接升级使用。</p>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">1⃣️ 迁移到 CocoaPods &amp; Autolinking 支持</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">迁移 CocoaPods 前，先在 CLI 里输入一下命令 unlink Native Modules：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch">react-native&nbsp;unlink<br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">unlink 后就要迁移到 CocoaPods 了。迁移前确保 Ruby 和 CocoaPods 已经安装成功，具体的安装过程不是本文重点就不展开了，没有安装的同学自行 Google 搜索。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">我们在 ios 目录里新建一个文件 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">Podfile</code>，在里面输入以下代码：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch">platform&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:ios</span>,&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'9.0'</span><br>require_relative&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/@react-native-community/cli-platform-ios/native_modules'</span><br><br>target&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'项目名称'</span>&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">do</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-Core'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/React'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-DevSupport'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/React'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-RCTActionSheet'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/Libraries/ActionSheetIOS'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-RCTAnimation'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/Libraries/NativeAnimation'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-RCTBlob'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/Libraries/Blob'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-RCTImage'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/Libraries/Image'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-RCTLinking'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/Libraries/LinkingIOS'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-RCTNetwork'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/Libraries/Network'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-RCTSettings'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/Libraries/Settings'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-RCTText'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/Libraries/Text'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-RCTVibration'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/Libraries/Vibration'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-RCTWebSocket'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/Libraries/WebSocket'</span><br><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-cxxreact'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/ReactCommon/cxxreact'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-jsi'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/ReactCommon/jsi'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-jsiexecutor'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/ReactCommon/jsiexecutor'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'React-jsinspector'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/ReactCommon/jsinspector'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'yoga'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:path</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/ReactCommon/yoga'</span><br><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'DoubleConversion'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:podspec</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'glog'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:podspec</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/third-party-podspecs/glog.podspec'</span><br>&nbsp;&nbsp;pod&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'Folly'</span>,&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:podspec</span>&nbsp;=&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native/third-party-podspecs/Folly.podspec'</span><br><br>&nbsp;&nbsp;target&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'项目名称Tests'</span>&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">do</span><br>&nbsp;&nbsp;&nbsp;&nbsp;inherit!&nbsp;<span class="hljs-symbol" style="color: rgba(64, 120, 242, 1); line-height: 26px">:search_paths</span><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="hljs-comment" style="color: rgba(160, 161, 167, 1); font-style: italic; line-height: 26px">#&nbsp;Pods&nbsp;for&nbsp;testing</span><br>&nbsp;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">end</span><br><br>&nbsp;&nbsp;use_native_modules!<br><span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">end</span><br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">上面这段代码，<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">pod</code> 开头的都是从 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">node_modules</code> 目录导入 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">react-native</code> 相关的官方代码。下面两行代码是实现 autolink 的功能：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch">require_relative&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/@react-native-community/cli-platform-ios/native_modules'</span><br><br>target&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'项目名称'</span>&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">do</span><br>&nbsp;&nbsp;...<br>&nbsp;&nbsp;use_native_modules!<br><span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">end</span><br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important"><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">Podfile</code> 配置好后，就在 ios 文件夹下运行 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">pod install</code>，安装相关依赖。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">安装成功后会生成一个xcworkspace 空间，这时候你需要退出当前的 xcodeproj 项目，打开 xcworkspace。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">在 xcworkspace 里，首先有两个顶层文件夹，一个是你的 xcodeproj 项目，一个是 Pods 文件夹（左图）：前者包含着你的业务代码，后者管理者安装的第三方库文件。这时候需要手动把 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">你的项目/Libraries</code> 目录下的 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">*.xcodeproj</code> 文件手动删除（右图红框 ➊），因为他们已经存在于 Pods 文件夹里了（右图红框 ➋）。</p>
<figure data-tool="mdnice编辑器" style="margin: 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://image-1255652541.cos.ap-shanghai.myqcloud.com/uPic/iOS%E7%9B%AE%E5%BD%95%E5%8F%98%E5%8C%96.png" alt="iOS目录变化" style="display: block; margin: 0 auto; max-width: 100%"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">iOS目录变化</figcaption></figure>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">2⃣️ 修改 Header Search Path</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">上一步修改了 React Native 项目的引用方式，但还有一个问题，那就是寻址的头文件路径并没有修改过来，我们可以观察下面两张图：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><p style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">原来的 Header Search Path 指向的是 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">$(SRCROOT)/../node_modules/*</code></p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><p style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">使用 CocoaPods 后路径发生了变化，变成了 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">$(PODS_CONFIGURATION_BUILD_DIR)/*</code></p>
</section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">当时这个变化卡了我一天，而且这个变化是在 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">project.pbxproj</code> 中的，非常难以阅读就忽略掉了。后来通过新建一个 RN 新项目发现了问题。解决方法是删除原来的 Header Search Path 内容，手动把新的路径添加进去。</p>
<figure data-tool="mdnice编辑器" style="margin: 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://image-1255652541.cos.ap-shanghai.myqcloud.com/uPic/Xnip2020-08-23_14-50-59.png" alt="迁移前" style="display: block; margin: 0 auto; max-width: 100%"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">迁移前</figcaption></figure>
<figure data-tool="mdnice编辑器" style="margin: 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://image-1255652541.cos.ap-shanghai.myqcloud.com/uPic/RNDemo%E4%BD%8D%E7%BD%AE.png" alt="迁移后" style="display: block; margin: 0 auto; max-width: 100%"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">迁移后</figcaption></figure>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">上面两步做完后可以尝试 build 一下项目，大概率你会发现还是 build 不起来。因为错误原因千奇百怪我也无法一一覆盖，这里还是问 Google 比较方便。</p>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">3⃣️ 新增 Start Packager 脚本</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">到这一步假设你已经 Build 起来 iOS 项目了，这时候你会发现一个问题，之前 iOS build 成功后，会自动启动一个 node 服务器编译 javascript 文件，更新后并没有自动启动 node 服务器，需要我们手动 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">npm run start</code> 启动 node 服务器，非常的不方便。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">问题出在哪里呢？原因是在原来的构建方式里，Libraries 下的 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">React.xcodeproj</code> 有个 Start Packager 脚本，这个脚本会在项目 build 成功后自动启动一个 node 服务器：</p>
<figure data-tool="mdnice编辑器" style="margin: 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://image-1255652541.cos.ap-shanghai.myqcloud.com/uPic/%E5%8E%9F_StartPackager_%E4%BD%8D%E7%BD%AE.png" alt="原 StartPackager 位置" style="display: block; margin: 0 auto; max-width: 100%"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">原 StartPackager 位置</figcaption></figure>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">迁移到 Pods 后，这个脚本就没有了，需要我们在主工程里手动添加一下。添加方式也很简单，我在下图也标注好了，点击项目文件夹，在 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">TARGETS</code> 的 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">Build Phases</code> 里点击 ➕，再点击 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">New Run Script Phase</code> 新增一个脚本区域，然后把下面的代码填写进去：</p>
<figure data-tool="mdnice编辑器" style="margin: 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://image-1255652541.cos.ap-shanghai.myqcloud.com/uPic/%E6%96%B0%E5%BB%BAStartPackager.png" alt="新建 StartPackager" style="display: block; margin: 0 auto; max-width: 100%"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">新建 StartPackager</figcaption></figure>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch"><span class="hljs-built_in" style="color: rgba(193, 132, 1, 1); line-height: 26px">export</span>&nbsp;RCT_METRO_PORT=<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"<span class="hljs-variable" style="color: rgba(152, 104, 1, 1); line-height: 26px">${RCT_METRO_PORT:=8081}</span>"</span><br><span class="hljs-built_in" style="color: rgba(193, 132, 1, 1); line-height: 26px">echo</span>&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"export&nbsp;RCT_METRO_PORT=<span class="hljs-variable" style="color: rgba(152, 104, 1, 1); line-height: 26px">${RCT_METRO_PORT}</span>"</span>&nbsp;&gt;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"<span class="hljs-variable" style="color: rgba(152, 104, 1, 1); line-height: 26px">${SRCROOT}</span>/../node_modules/react-native/scripts/.packager.env"</span><br><span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">if</span>&nbsp;[&nbsp;-z&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"<span class="hljs-variable" style="color: rgba(152, 104, 1, 1); line-height: 26px">${RCT_NO_LAUNCH_PACKAGER+xxx}</span>"</span>&nbsp;]&nbsp;;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">then</span><br>&nbsp;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">if</span>&nbsp;nc&nbsp;-w&nbsp;5&nbsp;-z&nbsp;localhost&nbsp;<span class="hljs-variable" style="color: rgba(152, 104, 1, 1); line-height: 26px">${RCT_METRO_PORT}</span>&nbsp;;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">then</span><br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">if</span>&nbsp;!&nbsp;curl&nbsp;-s&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"http://localhost:<span class="hljs-variable" style="color: rgba(152, 104, 1, 1); line-height: 26px">${RCT_METRO_PORT}</span>/status"</span>&nbsp;|&nbsp;grep&nbsp;-q&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"packager-status:running"</span>&nbsp;;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">then</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="hljs-built_in" style="color: rgba(193, 132, 1, 1); line-height: 26px">echo</span>&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"Port&nbsp;<span class="hljs-variable" style="color: rgba(152, 104, 1, 1); line-height: 26px">${RCT_METRO_PORT}</span>&nbsp;already&nbsp;in&nbsp;use,&nbsp;packager&nbsp;is&nbsp;either&nbsp;not&nbsp;running&nbsp;or&nbsp;not&nbsp;running&nbsp;correctly"</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="hljs-built_in" style="color: rgba(193, 132, 1, 1); line-height: 26px">exit</span>&nbsp;2<br>&nbsp;&nbsp;&nbsp;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">fi</span><br>&nbsp;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">else</span><br>&nbsp;&nbsp;&nbsp;&nbsp;open&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"<span class="hljs-variable" style="color: rgba(152, 104, 1, 1); line-height: 26px">$SRCROOT</span>/../node_modules/react-native/scripts/launchPackager.command"</span>&nbsp;||&nbsp;<span class="hljs-built_in" style="color: rgba(193, 132, 1, 1); line-height: 26px">echo</span>&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"Can't&nbsp;start&nbsp;packager&nbsp;automatically"</span><br>&nbsp;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">fi</span><br><span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">fi</span><br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">这个 Start Packager 脚本的位置也有些讲究，最好放在 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">Check Pods Manifest.lock</code> 和 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">Compile Sources</code> 之间，要不然启动 node 服务器时会导致报错。</p>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">4⃣️ 新增 LaunchScreen.storyboard</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">随着 iPhone 产品线的增多，iPhone手机的尺寸也多了起来，原来一个尺寸配一个 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">LaunchImage</code> 的方式逐渐变的不再适用，这时候  官方建议用 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">LaunchScreen.storyboard</code> 来制作启动屏，并且要求 2021 年所有 APP 都得改为此方案。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">具体的配置网上有很多教程了，大家搜索参考配置就好。我个人参考了以下教程：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">iOS 开发时如何使用 Launch Screen Storyboard</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">通过 LaunchScreen.storyboard 来为 RN 应用添加启动屏</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">iOS 13 使用 LaunchScreen.storyboard 适配各尺寸启动图</section></li></ul>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">5⃣️ 修改 xcodebuild 脚本</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">如果项目之前有配置过自动打包脚本，因为这次升级迁移到 workspace，所以也得对原来的打包脚本做一些修改：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch">xcodebuild&nbsp;archive&nbsp;-project&nbsp;项目名称.xcodeproj<br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">⬇️</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch">xcodebuild&nbsp;archive&nbsp;-workspace&nbsp;项目名称.xcworkspace<br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">关于 xcodebuild 可以参考这两篇文章：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">使用 xcodebuild 命令进行自动化打包</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">Xcodebuild 从入门到精通</section></li></ul>
<br data-tool="mdnice编辑器">
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; font-size: 20px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content">3.Android</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">0.60 的 Android 更新主要是 3 点：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">React Native 项目升级到 AndroidX</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">React Native 第三方依赖支持 autolink</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">支持 Hermes，一个 Facebook 开源的 Javascript 引擎</section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">升级前先需要升级 Gradle 和 Groovy 的版本。具体细节参考 Upgrade Helper。</p>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">1⃣️ 升级到 AndroidX</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">AndroidX 的推进主要是 Google 官方受够了 Android 目前混乱不堪的 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">android.support</code> ，用一个统一的 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">androidx</code> 来代替。升级跟着 Android 官方文档走就行，我主要参考了以下文档：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><p style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">总是听到有人说 AndroidX，到底什么是 AndroidX？</p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><p style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">AndroidX 概览</p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><p style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">迁移到 AndroidX</p>
</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400"><p style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">Android AndroidX 的迁移</p>
</section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">迁移工作主要是修改 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">import</code> 路径，工作量可能有些大，但心理负担较小，本质上就是改了个名字，问题不大。</p>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">2⃣️ Autolinking 支持</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">Autolinking 功能集成前先试试运行 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">react-native unlink</code>，看看能不能自动取消链接。如果取消失败，就要自己手动删除旧的 link 代码，加入新的 Autolinking 代码。下面我以 react-native-svg 这个第三方库为例进行说明：</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">1.检查 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">android/settings.gradle</code>，删除旧的 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">include</code> 配置，加入下面新的代码：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch">rootProject.name&nbsp;=&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'你的项目'</span><br><br>-&nbsp;include&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">':react-native-svg'</span><br>-&nbsp;project(<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">':react-native-svg'</span>).projectDir&nbsp;=&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">new</span>&nbsp;File(rootProject.projectDir,&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'../node_modules/react-native-svg/android'</span>)<br><br>+&nbsp;apply&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">from:</span>&nbsp;file(<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"</span>);&nbsp;applyNativeModulesSettingsGradle(settings)<br>include&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">':app'</span><br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">2.检查 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">android/app/build.gradle</code>，删除旧的配置，文件的最后一行加入一行配置：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch">dependencies&nbsp;{<br>-&nbsp;&nbsp;&nbsp;implementation&nbsp;project(<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">':react-native-svg'</span>)<br>}<br><br>+&nbsp;apply&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">from:</span>&nbsp;file(<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"</span>);&nbsp;applyNativeModulesAppBuildGradle(project)<br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">3.检查 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">MainApplication.java</code>，删除旧的引用：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch">-&nbsp;<span class="hljs-meta" style="color: rgba(64, 120, 242, 1); line-height: 26px">@Override</span><br>-&nbsp;<span class="hljs-function" style="line-height: 26px"><span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">protected</span>&nbsp;List&lt;ReactPackage&gt;&nbsp;<span class="hljs-title" style="color: rgba(64, 120, 242, 1); line-height: 26px">getPackages</span><span class="hljs-params" style="line-height: 26px">()</span>&nbsp;</span>{<br>-&nbsp;&nbsp;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">return</span>&nbsp;Arrays.&lt;ReactPackage&gt;asList(<br>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">new</span>&nbsp;MainReactPackage(),<br>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">new</span>&nbsp;SvgPackage()<br>-&nbsp;&nbsp;&nbsp;);<br><br>+&nbsp;&nbsp;&nbsp;<span class="hljs-meta" style="color: rgba(64, 120, 242, 1); line-height: 26px">@SuppressWarnings</span>(<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"UnnecessaryLocalVariable"</span>)<br>+&nbsp;&nbsp;&nbsp;List&lt;ReactPackage&gt;&nbsp;packages&nbsp;=&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">new</span>&nbsp;PackageList(<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">this</span>).getPackages();<br>+&nbsp;&nbsp;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">return</span>&nbsp;packages;<br>-&nbsp;}<br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">值得注意的是，我们业务中很有可能会自己封装一些 Native Module，经过上面的修改后，导入 Native Module 的方式也要做相应的修改，这里可以参考官方文档 Android Register the Module：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch">+&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">import</span>&nbsp;com.your-app-name.CustomToastPackage;&nbsp;<span class="hljs-comment" style="color: rgba(160, 161, 167, 1); font-style: italic; line-height: 26px">//&nbsp;&lt;--&nbsp;Add&nbsp;this&nbsp;line&nbsp;with&nbsp;your&nbsp;package&nbsp;name.</span><br><br><span class="hljs-function" style="line-height: 26px"><span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">protected</span>&nbsp;List&lt;ReactPackage&gt;&nbsp;<span class="hljs-title" style="color: rgba(64, 120, 242, 1); line-height: 26px">getPackages</span><span class="hljs-params" style="line-height: 26px">()</span>&nbsp;</span>{<br>&nbsp;&nbsp;<span class="hljs-meta" style="color: rgba(64, 120, 242, 1); line-height: 26px">@SuppressWarnings</span>(<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"UnnecessaryLocalVariable"</span>)<br>&nbsp;&nbsp;List&lt;ReactPackage&gt;&nbsp;packages&nbsp;=&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">new</span>&nbsp;PackageList(<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">this</span>).getPackages();<br>+&nbsp;&nbsp;&nbsp;packages.add(<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">new</span>&nbsp;CustomToastPackage());&nbsp;<span class="hljs-comment" style="color: rgba(160, 161, 167, 1); font-style: italic; line-height: 26px">//&nbsp;&lt;--&nbsp;Add&nbsp;this&nbsp;line&nbsp;with&nbsp;your&nbsp;package&nbsp;name.</span><br>&nbsp;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">return</span>&nbsp;packages;<br>}<br></code></pre>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">3⃣️ Hermes 支持</span><span class="suffix" style="display: none"></span></h4>
<figure data-tool="mdnice编辑器" style="margin: 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://image-1255652541.cos.ap-shanghai.myqcloud.com/uPic/N4e9rx.png" alt="Hermes" style="display: block; margin: 0 auto; max-width: 100%"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">Hermes</figcaption></figure>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">Hermes 是一个 Facebook 开源的 Javascript 引擎，和现在的 JSC 相比，在包体积和启动速度上有所优化。社区上已经有很多介绍 Hermes 的文章了，我找了几篇比较好的，如果对 Hermes 感兴趣可以移步查看。</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">携程对 RN 新一代 JS 引擎 Hermes 的调研</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">React Native发布新一代JS引擎Hermes</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">Hermes Engine 初探</section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">Hermes 的相关特性不是本文重点，所以就不多介绍了。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">Android 想要使用 Hermes 的话，必须得使用版本号大于 0.60.4 的 React Native，并且要对 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">android/app/build.gradle</code> 做一些修改：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch">project.ext.react&nbsp;=&nbsp;[<br>-&nbsp;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">entryFile:</span>&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"index.js"</span><br>+&nbsp;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">entryFile:</span>&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"index.js"</span>,<br>+&nbsp;&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">enableHermes:</span>&nbsp;<span class="hljs-literal" style="color: rgba(1, 132, 187, 1); line-height: 26px">false</span>,&nbsp;&nbsp;<span class="hljs-comment" style="color: rgba(160, 161, 167, 1); font-style: italic; line-height: 26px">//&nbsp;clean&nbsp;and&nbsp;rebuild&nbsp;if&nbsp;changing</span><br>]<br><br>-&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">def</span>&nbsp;useIntlJsc&nbsp;=&nbsp;<span class="hljs-literal" style="color: rgba(1, 132, 187, 1); line-height: 26px">false</span><br>+&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">def</span>&nbsp;jscFlavor&nbsp;=&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'org.webkit:android-jsc:+'</span><br><br>dependencies&nbsp;{<br>-&nbsp;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">if</span>&nbsp;(useIntlJsc)&nbsp;{<br>-&nbsp;&nbsp;&nbsp;&nbsp;implementation&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'org.webkit:android-jsc-intl:+'</span><br>-&nbsp;&nbsp;}&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">else</span>&nbsp;{<br>-&nbsp;&nbsp;&nbsp;&nbsp;implementation&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'org.webkit:android-jsc:+'</span><br>-&nbsp;&nbsp;}<br>&nbsp;&nbsp;<br>+&nbsp;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">if</span>&nbsp;(enableHermes)&nbsp;{<br>+&nbsp;&nbsp;&nbsp;&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">def</span>&nbsp;hermesPath&nbsp;=&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"../../node_modules/hermesvm/android/"</span>;<br>+&nbsp;&nbsp;&nbsp;&nbsp;debugImplementation&nbsp;files(hermesPath&nbsp;+&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"hermes-debug.aar"</span>)<br>+&nbsp;&nbsp;&nbsp;&nbsp;releaseImplementation&nbsp;files(hermesPath&nbsp;+&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">"hermes-release.aar"</span>)<br>+&nbsp;&nbsp;}&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">else</span>&nbsp;{<br>+&nbsp;&nbsp;&nbsp;&nbsp;implementation&nbsp;jscFlavor<br>+&nbsp;&nbsp;}<br>}<br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">上面只列出了主要变更，如果不想用 Hermes，可以完全不做更改；如果想要尝试一下，最好还是根据 Upgrade Helper 列出的详细变更进行修改，然后阅读 React Native 官网的 Using Hermes 进行配置与调试。</p>
<br data-tool="mdnice编辑器">
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; padding: 0; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgba(89, 89, 89, 1); margin-bottom: 30px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgba(89, 89, 89, 1)">四、React Native 0.61 升级</span><span class="suffix"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">React Native 0.61 最主要的更新就是 <strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">Fast Refresh</strong> 的引入了，这个功能大大提升了开发体验。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important"><strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">Fast Refresh</strong> 的加入有两个好处，第一个是把 <strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">live reloading</strong> 和 <strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">hot reloading</strong> 两个功能合二为一并做了功能加强；第二个终于支持 Hooks 热更新了。虽然 0.59.10 已经支持 hooks，但是当时的函数式组件不支持热更新，开发体验过于差劲。升级到 React Native 0.61 后就可以使用了。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">整体来说 0.61 的更新很小，一两个小时就可以完成升级。升级前建议参考Upgrade Helper和 Upgrade to React Native 0.61 这篇博文，我会对文中没有说明的地方进行补充。</p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; font-size: 20px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content">1.React Native</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">JavaScript 这里主要是一些 API 的变动和升级，跟着报错信息修改就好，难度并不大。</p>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">1⃣️ React 升级到 16.9</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">React 升级到 16.9 后，<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">componentWillMount</code> 等 API 废弃，必须迁移到 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">UNSAFE_componentWillMount</code> 等带有 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">UNSAFE_</code> 前缀的 API。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">主工程里这些 API 比较容易重构和替换，麻烦的是一些很久没有维护的第三方 JS 包，这时候需要自己手动 Fork 一份代码维护，或者替换同功能的正在维护的第三方包，这个属于技术债，只能一点一点克服。</p>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">2⃣️ 引用路径改动</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">更新后有些方法和组件的引用路径发生了变更，需要我们适配一下：</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">1.<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">ErrorUtils</code> 默认绑定到 global 上，不需要 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">import ErrorUtils from ErrorUtils</code> 导入了</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important"><code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">2.RCTNetworking</code> 引用路径发生改变，需要修改为：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch"><span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">const</span>&nbsp;RCTNetworking&nbsp;=&nbsp;<span class="hljs-built_in" style="color: rgba(193, 132, 1, 1); line-height: 26px">require</span>(<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'react-native/Libraries/Network/RCTNetworking'</span>);<br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">3.<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">Dimensions</code> 导入方式也发生了改变，需要修改：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch"><span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">import</span>&nbsp;Dimensions&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">from</span>&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'Dimensions'</span>;<br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">⬇️</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch"><span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">import</span>&nbsp;{&nbsp;Dimensions&nbsp;}&nbsp;<span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">from</span>&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'react-native'</span>;<br></code></pre>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; font-size: 20px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content">2.iOS</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">0.61 之后，React Native iOS 端只支持通过 Cocoapods Link 了，如果 0.60 已经升级到 Cocoapods 了，那么这次的 iOS 升级将会非常快，只需要改动 Podfile 中一些库的导入路径就可以了。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">具体的差异可见 Upgrade Helper，非常简单，比对修改后重新 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">pod install</code> 就可以了。</p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; font-size: 20px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content">3.Android</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">0.61 的 Android 升级也比较简单，升级了 Gradle 版本，修改了 Hermes 的引用路径，跟着Upgrade Helper 的 Diff 依次修改就可。</p>
<br data-tool="mdnice编辑器">
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; padding: 0; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgba(89, 89, 89, 1); margin-bottom: 30px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgba(89, 89, 89, 1)">五、React Native 0.62 升级</span><span class="suffix"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">React Native 0.62 也是加强了开发者体验，RN 项目默认引入了 <strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">Flipper</strong> 这个 Facebook 制作的移动端调试工具，支持了 <strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">React DevTools v4</strong>，错误提示可以选择新的 <strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">LogBox</strong>，比原来的错误提示更加友好从而更容易定位问题。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">除了开发体验的加强，这次更新还支持了 Dark Mode 模式，RN 之后就可以做暗黑模式的适配了。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">整体来说 0.62 的更新也很小，一两个小时就可以完成升级。升级前建议参考Upgrade Helper和 Upgrade to React Native 0.62 这篇博文，我会对文中没有说明的地方进行补充。</p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; font-size: 20px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content">1.React Native</span><span class="suffix" style="display: none"></span></h3>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">1⃣️ useNativeDriver 显式指定</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">React Native 之前使用 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">Animated</code> API 时，<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">useNativeDriver</code> 默认值为 false，也就是说默认都是JS 线程绘制动画。版本升级后需要显式指定 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">useNativeDriver</code> 的值。我认为这个更新的意义在于每次使用 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">Animated</code> 时，强迫开发者思考能不能让动画在 Native 线程运行，优化动画体验。</p>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">2⃣️ LogBox 开启</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important"><strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">LogBox</strong> 这个功能在 0.62 里是默认关闭的，0.63 版本默认开启。0.62 里开启方式比较 Hack，需要按以下步骤操作：</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">1.项目根目录新建一个 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">before.js</code>，然后里面只写一行代码：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch"><span class="hljs-built_in" style="color: rgba(193, 132, 1, 1); line-height: 26px">require</span>(<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'react-native'</span>).unstable_enableLogBox();<br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">2.在 JS 所有文件的入口文件 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">index.js</code> 的第一行里导入这个文件：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px"><code class="hljs" style="overflow-x: auto; padding: 16px; color: rgba(56, 58, 66, 1); background: rgba(250, 250, 250, 1); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0; font-size: 12px; -webkit-overflow-scrolling: touch"><span class="hljs-keyword" style="color: rgba(166, 38, 164, 1); line-height: 26px">import</span>&nbsp;<span class="hljs-string" style="color: rgba(80, 161, 79, 1); line-height: 26px">'./before'</span>;<br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">上面两步<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">必须严格执行</strong>，不然的话会有红屏报错。</p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; font-size: 20px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content">2.iOS</span><span class="suffix" style="display: none"></span></h3>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">1⃣️ CocoaPods 更新</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">Cocoapods 在这个版本里也有些改动，除去 Flipper 相关的 pod，改动非常小，根据 Upgrade Helper 中的 Diff 差异修改就好。</p>
<h4 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; color: rgba(0, 0, 0, 1); font-size: 18px"><span class="prefix" style="display: none"></span><span class="content">2⃣️ Swift 支持</span><span class="suffix" style="display: none"></span></h4>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">0.62 升级需要修改一些 Swift 相关的配置，具体升级流程可见 React Native 0.62 upgrade (Xcode)</p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; font-size: 20px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content">3.Android</span><span class="suffix" style="display: none"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">0.61 的 Android 升级也比较简单，升级了 Gradle 版本，除去 Flipper 相关的更新，改动非常小，跟着 Upgrade Helper 的 Diff 依次修改就可。</p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0; font-weight: bold; font-size: 20px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content">4.Flipper</span><span class="suffix" style="display: none"></span></h3>
<figure data-tool="mdnice编辑器" style="margin: 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://image-1255652541.cos.ap-shanghai.myqcloud.com/images/IMG_6736.PNG" alt="Flipper" style="display: block; margin: 0 auto; max-width: 100%"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">Flipper</figcaption></figure>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">0.62 之后，<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">Flipper</strong> 在 RN 的项目里是默认添加的，可以方便的查看 Layout、network 和 log 等信息。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">旧项目升级时，<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">Flipper</strong> 其实是可选的，安装有些波折，上手体验了一下感觉如下（版本为 0.52.1）：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">把 React Native 的 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">console.log</code> 信息和 Native 的 log 信息和在一个应用里，比较方便查看</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">可以查看 Native Layout 布局，并且内置了 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">React DevTools v4</code>，两者比对可以方便查看布局</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">Network 可以方便查看网络信息，这个一直是 RN 调试的一个痛点</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">可以快速的截屏录屏，有助于和 UED 沟通</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">支持自定义插件</section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">上面都是优点，缺点还是有不少的，下面我说说我用下来感觉到的不足：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">network 对 UTF-8 支持不太好。<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">Flipper</strong> 对编码没有处理好，导致中文显示乱码，我已经给官方提了 issues，但是一直没有理我</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">network 图片解析也有问题，被解析为乱码的文本</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">log 模块的数据都是字符串，即使你 log 的是 object，它也只是展示 <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27, 31, 35, 0.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgba(71, 193, 168, 1)">JSON.stringify</code> 后的数据</section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">上面就是我的使用体验，要不要在项目中使用，我觉得大家还是亲自体验一下比较好。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">如果要在项目中集成 <strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">Flipper</strong>，根据Upgrade Helper 进行集成就好，难度不是很大。</p>
<br data-tool="mdnice编辑器">
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; padding: 0; font-weight: bold; font-size: 22px; border-bottom: 2px solid rgba(89, 89, 89, 1); margin-bottom: 30px; color: rgba(28, 30, 33, 1)"><span class="prefix" style="display: none"></span><span class="content" style="font-size: 22px; display: inline-block; border-bottom: 2px solid rgba(89, 89, 89, 1)">后记</span><span class="suffix"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">上面就是 React Native 版本升级指南的内容了，本升级教程会持续更新，为了获得最佳体验可以查看阅读博客原文。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">觉得文章对你有用的话一定要记得<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">点赞</strong>哦 🌟，谢谢你，这对我来说真的很重要！</p>
<br data-tool="mdnice编辑器">
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; margin: 0; text-align: justify; color: rgba(28, 30, 33, 1); letter-spacing: 0; font-size: 16px; line-height: 1.75; hyphens: auto; white-space: normal; font-family: &quot;&quot;; word-wrap: break-word !important">更多优秀文章推荐：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: rgba(0, 0, 0, 1); list-style-type: disc">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">React Native 性能优化指南从渲染层的角度分析了 RN 性能优化的 6 个点，并以图文形式讲解了 FlatList 的实现原理</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">一篇介绍了 webpack 中最易混淆的 5 个知识点，掘金快 800 赞了，一文讲清楚 Webpack 中那些<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">长得像却意义不同的概念</strong></section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgba(28, 30, 33, 1); font-weight: 400">一篇详细介绍了 webpack dll 是个什么东西，并且给出了 2 条最佳实践，<strong style="font-weight: bold; color: rgba(37, 194, 160, 1)">摆脱繁琐的 dll 配置</strong></section></li></ul>
<br data-tool="mdnice编辑器">
<figure data-tool="mdnice编辑器" style="margin: 10px 0; display: flex; flex-direction: column; justify-content: center; align-items: center"><img src="https://image-1255652541.cos.ap-shanghai.myqcloud.com/uPic/20190709220018.png" alt="微信公众号：卤蛋实验室" style="display: block; margin: 0 auto; max-width: 100%"><figcaption style="margin-top: 5px; text-align: center; color: rgba(136, 136, 136, 1); font-size: 14px">微信公众号：卤蛋实验室</figcaption></figure>
</section><br><br>
来源：https://www.cnblogs.com/skychx/p/react-native-upgrade.html

查看完整版本: 【独家】React Native 版本升级指南