准备发布React Native应用？
你可能已经完成了React Native应用的开发，马上就准备发布出去了。那你还需要为发布app准备什么吗？我指的不是诸如“确保测试通过”或“多做几遍smoke test”之类的答案。很明显，你需要做“推送到AppStore和Android的应用商店”，但这就是全部吗？
我们Infinite Red总在发布React Native app，所以非常了解这里面可能有的坑。那么就让我们把经验分享给你！希望这些经验能够帮助你更顺利地发布app。
去掉console.logs
压缩图片
去掉Android的默认权限设置
考虑使用ProGuard和Hermes
QA检查
检查启动速度
保护App防止破解
重新打开ATS
1. 去掉console.logs
您可能知道，包括控制台log会减慢React Native应用程序的速度，你应该在发布前去掉它们。你当然可以用查找替换来抹掉log，但是一些log可以提供有用的调试信息，可能需要将它们保留在代码中，我们只是需将它们从生产版本中去除即可。我们也正要这样做。
常用办法
React Native文档推荐的方法是使用babel：
npm i babel-plugin-transform-remove-console --save-dev
然后设置.babelrc，可以从代码中把log全部删除或者只处理生产版本（比如下面的例子）。
其他办法
dev模式会将__DEV__变量设置为true。你只要把下面的代码放进index.js，你可以使用它来关掉日志。你也可以同样来处理.error等其他console输出。
Q: if (__DEV__)会被metro在release版里面去掉吗?
A: 我试过，不会。其实这种检查在很多其他地方也会用来检查是不是release版本.
这个办法的一个好处是可以把原始log代码替换成其他你可能需要的代码。比如，如果需要上报error或者warning给后台分析，可以把error和warning替换成事件报告代码。
无论采用哪种方法，请确保不要保留console.logs，因为它们会减慢app运行速度！
2. 压缩图片
你可能做了app资源文件自动优化工作，但是我们希望能够做到优化图片以达到最小的包大小。我通常会使用Squoosh.app，将每个图片拖上去进行验证和肉眼检查。这让我可以测试多种压缩方法并确认没有破坏图像的质量。这也能帮我发现是不是有图片被错误的缩放了或者删除了。
左侧原稿-右侧优化结果：看起来没有明显差异！
我的大多数图片都进行了优化，但是有一张图片根本没有进行优化！全部图片优化之后文件大小缩小了49％。
图片是比较容易处理的app资源，但是如果你的app使用其他资源文件（例如PDF，AI模型，预装数据），记得确保也对它们进行优化。
减小app大小可以加快UI的启动！
3. 去掉Android的默认权限设置
在构建app时你可能没有添加过Android权限。但是React Native项目一般并不是从零权限开始的。默认情况下，RN项目的Android部分具有以下权限：
Internet — 你一般需要这个
System Alert — Debug模式需要
Read phone state — 不明白为什么这个也是默认的
Read and Write external storage — 你一般也需要这个
Check License — 不明白+1
你可以删除其中一些。由于未明确被列出来，处理起来会有些棘手，官方文档会有些帮助。
4. 考虑使用ProGuard和Hermes
Hermes和ProGuard都可以改善app的性能，但需要进行大量测试。
ProGuard
如果你还没有打开ProGuard，则可能会错过优化、混淆和瘦身Android版本的机会。默认情况下RN是不开启ProGuard的。打开了ProGuard之后你需要跑一遍所有测试来检查有没有出现问题。有些问题（比如这个）是因为没有配置好ProGuard。要记住，默认情况下，打开ProGuard只能在Android的release版本中进行测试。这可能会给你的测试制造麻烦。
提醒一下，连接您的Android设备，然后执行yarn / npx react-native run-android --variant = release来确保所有内容都正确
React Native打开ProGuard的文档
当你打开ProGuard时，您也可以尝试打开“shrinkResources”，这表示会瘦身任何外部库。⚠_这个配置要在release版本测试_！打开“shrinkResources”可能会完全搞乱你的app image，所以请不要盲目地这样做。
Hermes
Facebook在2019年的Chain React上宣布了Hermes，在0.64版本上又加入了iOS Hermes的支持。开启Hermes之后RN会先把JS bundle编译成字节码再打包进App。字节码的加载速度会大大提高app启动速度！这点用过Flutter的人都应该有体会。打开它很Hermes容易，但你不能保证它一定可以与你的app一起使用，有些Native Module是和JSC绑定的，但如果可能Hermes非常值得一试。
如何打开Hermes
注意：在不同版本上Hermes可能很容易打开，但也可能根本不工作。需要注意的是，早期版本Hermes中并未提供对Proxy的支持，所以使用MobX 5（但还可使用MobX 4），Immer甚至Amplify的app会没法使用Hermes。这时候需要检查所使用的React Native版本对应Hermes的Release Notes。
5. QA
对于任何开发来说，在发布之前进行深入的质量检查已经变得越来越重要了。无论在开发版本上怎么测试，生产版本总会出些新的问题。只要你强迫自己在发布前把所有都走一遍然后看看漏了什么，你就会越来越擅长捕捉这些问题。
我可以通过裁剪feature来让app顺利发布，但是我没法跳过发布前的QA。最少最少，你需要从各个角度把App走一遍，看看可能的问题和亮点。
特别是如果你打开了ProGuard，调整权限或者启用了Hermes，则务必对每一屏幕进行完整的测试。自动化测试可以捕获崩溃，但是我们需要进行更深入的检查。
在完成每次检查时，请不要忘记从开发菜单中打开Perf Monitor。我们需要发现JS FPS降到24帧以下的地方，并确保RAM不会有缓慢泄漏（就是RAM消耗不断攀升）。
如果在Perf Monitor上或任何检查中发现问题，并且可以复现这个问题，那意味着你已经找到了一个可以尝试profiling的好问题。
检查app时，不要在staging环境测试，而是用生产环境来操作。如果只能使用staging或者测试环境，需要确保在发布app之前切换出来到生产环境。
小屏和大屏
在支持的最小屏幕尺寸的设备上进行测试，而且要让显示范围更小。对于iOS，可以打开“In-Call Status Bar”（在没有刘海的模拟器上）。这会限制你的应用的可用空间。
检查小屏设备时，要测试输入表单并且测试所有KeyboardAvoidingView的地方。你可以决定不支持这种设备，但不应该是发现问题之后在做这种决定。
然后是大屏设备。这时需要注意手指能不能够到在App边缘的控件。还要留意图片质量和布局变形的问题。
联网状况
测试网络“几乎不可用”和“完全不可用”。“网络完全不可用”情况是必备测试。你的app可能需要处理某些偶然断网的问题。测试的时候需要尝试制造这种情况。
在Mac上可以使用Network Link Conditioner来控制联网状况。
可访问性 (Accessibility, A11y)
首先要确保app在适当的地方都加上了可访问性标签和提示。你可能完全不熟悉这块。这样你可以花点时间阅读一下React Native Accessibility](https://reactnative.dev/docs/accessibility)文档，然后再按图索骥。切记，不要完全放弃app的访问性。
在iOS上，将系统文本设置为更大，然后看看app有没有出现关键文本显示被打乱。增加字体一定会让app里面的一些文本无法完全显示处理，但是最好知道你的app对在文本显示上会出什么问题。
如果在app中看到这样的问题，你可以尝试fix掉，或者设置Text的allowFontScaling={false}。
最后，要在真机上检查一遍，降低手机屏幕亮度，然后启动app。这将帮助你确定视力不好的人可能遇到的任何对比度不足的问题。这里需要说一下，我在iPhone上有一个名为“Unfollow”的应用程序，Dark模式下对比度太差，根本无法在任何黑暗的地方中使用。
6. 检查启动速度
在撰写本文时，除非启用了Hermes，否则必须先加载整个JavaScript包，然后才能启动app。如果你的app有非常耗时的component，整个app都会等它加载。如果你的app有非常多屏，app要等所有屏都加载完才能显示第一屏。
如果从一开始就考虑这些问题的话，解决起来不是很困难。但如果在发布前最后一刻才考虑这些问题的话，可能就有麻烦了。
检查Bundle大小
从命令行生成JavaScript bundle可以很方便快速检查文件大小。这两个命令应该起作用：
# Generate your Android production bundle (just code no assets)$ yarn react-native bundle --platform android --dev false --entry-file index.js --bundle-output ./index.android.bundle# Generate your iOS production bundle (just code no assets)$ yarn react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ./index.ios.bundle
如果不到10MB，那你的app很好！如果到了50MB，则应考虑使用RAM bundles。对于不着急加载或者可能永远不会加载的那些屏，RAM bundles会特别有用。这可以大大缩短你的app的加载时间。
使用Inline Require
import会让module马上加载，而require可以帮助推迟module加载。如果app有非常耗时的组件但不是需要app启动就使用它，可以考虑用inline require来加载该组件，这样会提高app启动速度。inline require是从RN 0.59版本开始支持的。
FaceBook目前正在试验新的Metro配置，该配置会自动将将所有导入变成inline require。
打开metro.config.js确认inlineRequires是否已经打开。复杂结构的app应该能看到不错提升。
拆分ABI来缩小APK大小
您可以与其他app的APK包对比一下大小。Google Play APK的平均大小为11.5MB，但大于30MB的app也非常多。可以通过ABI拆分来缩小APK的大小。
APK支持各种手机硬件架构，ABI拆分让你构建出多个APK，每个APK用于特定的硬件体系架构，还可以按照屏幕分辨率来组合出更细分的APK。
React Native直接附带了一些ABI选项，可以从app直接节省大约4MB。build.gradle有个选项enableSeparateBuildPerCPUArchitecture，默认情况下将其设置为false。如果启用就可以获得两个APK，一个用于ARM，一个用于x86设备。把它们都上传到Google Play，不同的手机会获取正确的包。
7. 保护App
至此，你已经测试检查了app存在哪些问题，还差一点就可以发布了。但是你还不能就这样发布，还有关键的一步。
可能你已经在使用了类似App Center或者Firebase Crashlytics的产品了。这可以给你报告所有的应用崩溃问题。我们应该再花点时间说一下崩溃问题。
优雅退出是一个经常被忽视却又十分关键需求。大多数app正常工作的时候都很漂亮，但一旦出现问题，就会立马掀桌子退席。
默认React Native应用程序中的崩溃会直接关掉app，这会让用户对着主屏发愣，WTF？很多用户都会反复点app的图标确认自己的手指操作没有问题、不是自己眼花了。
我们需要让app来处理这种情况来避免造成这种一种非创伤性的用户体验。
Gotta Catch’em All
现在需要在代码中进行搜索一下那些遗留在注释中的TODO，确保你没有遗留任何重要事情。
更重要的是，要在代码中搜索那些可能出问题的地方，并把不希望用户看到的错误进行处理。在所有的JS Promises都应有一个“catch”，在调用第三方服务的地方使用“try”包裹起来。某个功能出错了是可以容忍的，但是导致整个app被关闭并丢失数据则是不能容忍的。
我知道异常不是经常出现的问题，但是异常早晚会出现的。你需要捕获异常，然后继续让你的app运行下去。用户不是QA，他们不愿意接受app崩溃的体验。
确保给用户提供崩溃信息
当生产版本中发生了致命的JavaScript或Native错误时，你不光需要将崩溃现场和分析数据都收集上来，还最好让用户知道app出了点问题。
我通常使用React Native Exception Handler。这个库提供了出问题代码的位置，并且如果错误是在JavaScript层而不是在Native层，你甚至可以向用户显示一个不错的致歉信息。
如果你使用全局异常处理钩子，那应该把第三个参数设置为true。这样当错误来自Native层时，你仍然可以运行一些JavaScript代码，不过这时不能在UI上显示了。
8. 恢复ATS
在iOS 9中，Apple启用了应用程序传输安全性（ATS），该功能要求任何通信都必须使用HTTPS进行保护。ATS会阻止不符合安全规范的连接。默认情况下，React Native项目会加一条ATS例外来方便从本地加载bundle。
现在你的应用已准备好发布了，你可能需要删除掉这条例外。这可以帮助你更容易通过App Store评估。
麻烦的是，当你下次开始开发时还必须将这条例外加回去。通常，我会关闭此功能发行一个iOS版本，然后回退改动。
localhost异常在Info.plist中，如下所示：
如果这看起来很烦人，说实话，那就是！但是，您可以自动执行此操作，从而省去您的头痛。当然你可以使用Fastlane来修改info.plist
Voila! 你的app终于万事俱备只欠发布了!
准备发布React Native应用？相关推荐
- 爱奇艺回应遭做空；百度 App 部分频道停更；React Native 0.62 发布 | 极客头条
整理 | 屠敏 头图 | CSDN 下载自东方 IC 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 一分钟 ...
- Zephyr 简介：用于 React Native 的 Tailwind CSS
使用纯 CSS 构建复杂的 Web 应用程序可能是一项艰巨的挑战. 因此,开发人员倾向于使用 Bootstrap 和 Tailwind CSS 等流行的样式库来缩短开发周期. 与 Web 上的样式类似 ...
- 从 React Native 到 Flutter，移动跨平台方案的真相
转载自「LeanCloud通讯」公众号 作者:LeanCloud 郑鹏 2018 年 12 月,Google 发布了 Flutter 1.0 正式版,似乎再次点燃了人们对移动跨平台开发的热情.上一次出 ...
- 【天赢金创】Facebook:我们是如何构建第一个跨平台的React Native APP
今年早些时候,我们介绍过iOS版的React Native. React Native带来的是用web方式的React - 自声明式的UI组件和快速的开发迭代来完成手机平台的功能,然后为了保持速度.保 ...
- React Native 项目整合 CodePush 完全指南
作者 | 钱凯 杏仁移动开发工程师,前嵌入式工程师,关注大前端技术新潮流. 本文使用的环境: React@16.3.1 React Native@0.55.4 react-native-code-pu ...
- React Native 0.59.0 发布，使用 React 编写原生应用
React Native 0.59.0 发布了.React Native 使开发者只使用 JavaScript 也能编写原生移动应用. 新版更新亮点: React Hooks React Native ...
- React Native发布重构路线图
React Native作为时下最热门的跨平台开发方案,在这两年的移动跨平台方案中可谓一枝独秀,在很多的移动产品中都可以看到它们的影子,相比国内的Weex,RN的迭代更加频繁,性能上也无限的接近原生应 ...
- React Native App设置amp;Android版发布
React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native ...
- 余承东吐槽苹果续航；微软 IE 浏览器被曝漏洞；React Native 0.61.0 发布 | 极客头条...
快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「CSDN 极客头条」,是从 CSDN 网站延伸至官方微信公众号的特别栏目,专注于一天业界事报道.风里雨里,我们将每天为朋友们,播报最新鲜有 ...
最新文章
- CVPR2020最新论文扫描盘点（上）
- 推荐8个年薪100万BAT级优质技术大号
- 503. 下一个更大元素 II
- 一个memset函数使用时的坑
- 大数据系列的默认端口（hbase，hadoop，hived等）
- 京东股价创新高：市值首次突破千亿美元 ！
- Ubuntu 18.04安装软件包下载速度慢的解决方案
- 惠普服务器G8系列做raid,hp g8服务器设置raid5
- Android so文件进阶 一
- objects365数据集下载
- 一个优秀的硬件工程师要具备的能力
- A/N GPU架构解析
- HTML超文本语言（1）
- 怎么修复multisim_【血的教训】手把手教你修复崩溃的Windows系统
- 为什么固态硬盘删除数据后无法恢复？
- Allegro16.6 DXF导入生成板框
- MySQL 下载和安装详解
- 读ReactOS的准备工作
- 基于SSM的服装商城销售系统（含文档资料）
- 2020年7月工作月报
热门文章