React Native 蛮荒开发生存指南

引言

React Native，在过去一年大红大紫，一下子成为了许多人追捧的新兴技术热点。然而，除却蜻蜓点水般运行一个 Hello World 式的 React Native 小 App，真正想要用 React Native 写一个商用的 App，却要面临很多困难。其中最主要的，就是缺少技术资料，缺少像 Android 这样发展七八年的技术一般，在博客和技术社区上存留的大量的技术资料。因而，面向百度编程，面向 Google 编程，面向 StackOverFlow 编程这三大杀手锏，均对 React Native 开发中遇到困惑表示无可奈何。加之 Facebook 开发组的文档更新速度远远跟不上开发的速度，使得 React Native 的工程化应用之路，恍若在蛮荒生存。笔者不才，为某一商业项目开发 React Native App 已近半年，以自己的踩坑和爬坑经验撰写此文，取名蛮荒开发生存指南XD。

文档

1. 立足 React Native 英文文档，参考中文翻译的文档。再简陋的文档好歹也是文档。

官方英文文档地址在这里。官方文档需要注意的是，左上角有一个蓝色的版本号，点击可以翻阅过去版本号的文档。文档中有写到的技术点肯定都已经在这个版本实现了，但文档没写的技术点，则有可能也实现了，只是没写上去。

目前找到的 React Native 中文文档有两份：一份是 React Native 中文网的，另一份是极客学院上的。前者一直在持续更新，后者似乎已经很久没有更新了。可在拿不准英文文档意思的时候作为参考。

2. React 文档同样重要。

由于 React Native 实质上是 React.js 的开发思想在移动端的实现，因此，许多如 Component, Props, State, flux 等等概念，在 React Native 的文档中均没有提及，相反在 React 的文档中有着详细的讲解。关于 React.js 和 React Native 之间的关系，知乎上这篇回答讲的鞭辟入里，值得深思。React 官方英文文档地址在这里，国内志愿者翻译的中文文档在这里。

3. 搜索文档的方法

由于上述文档中除 React Native 文档以外，其他文档均无配置文档搜索框。因此，有必要使用 Google 或 Baidu 加上 site:url 来全局搜索文档。

社区

4. 像对待官方文档一样认真阅读 React Native 所有版本的 release note。

React Native 文档更新速度缓慢，且不能保证覆盖所有的 feature。与之相反，release note 则会告知你新的 feature 和 bug fix，虽然很多只有一句话，但是真正有帮助的是，release note 会给出相关的 commit 链接，从而我们可以阅读代码和注释，以此来了解该 feature 或 bug fix 的内容。但是同理，总会有一些改动没有统计到 release note 中。深深的怨念...

5. 不要对 StackOverFlow 抱太大期望。

截至目前，StackOverFlow 上 React Native 相关的，且得到了满意回答的问题寥寥无几，而且大多集中于 React Native 开发环境搭建等入门踩坑问题上。这种情况是完全可以预料到的，因为从本质来说，类似 StackOverFlow 这种问答社区的优质问答积累需要漫长的时间，何况技术的细节无穷无尽，非数年之功不能处处兼顾。

这是针对搜索现有问答来说，StackOverFlow 无法满足 React Native 的开发问题。同理，如果自己发帖提问，同样不能保证快速地得到满意的解答，我认为最关键的问题在于，现有的 React Native 开发者的活跃社区，不在 StackOverFlow，而在 Github 上。因此，引出第六条指南。

6. 在 Github issue 中搜索出现的问题的关键字。

react native 的Github Issue中的问题和解决极为丰富，迄今已有4000多条 issue，与 StackOverFlow 判若云泥。然而由于其是论坛的性质，因此需要耐心阅读英文对话内容，才可能找到解决的方法。此外，如不能找到相关内容，另开一个 issue 寻求帮助也不失为一种良策。

6. 遇到无法解决的问题，就升级 React Native 版本。

虽然很无脑，但的确有时候很有奇效。比如笔者在实现 React Native 内嵌 WebView 时，React Native for Android v0.18.0中 WebView 的 javaScriptEnabled 属性即便设置为 true 也依然无效。升级到 v0.22.0 即解决该问题。然而，从v0.19.0 到 v0.22.0 的 release note 对该 bug fix 根本没提 T_T。

7. 阅读源代码，是求生的最后工具。
8. 源代码中的注释往往透露了非常关键的信息。

与文档相比，React Native 的源代码结构非常清晰，代码风格干净，其注释也往往包含了使用的说明，而这些说明又往往是文档中未曾包含的。因此，阅读源代码，不失为无计可施情况下的一种解决方法。拙作初窥基于 react-art 库的 React Native SVG即是通过阅读 React Native 源代码而有所收获的。

工具

8. 快速运行他人代码的神器 - iOS RNPlayNative

https://rnplay.org 实现了令人惊叹的 React Native 实时运行的效果，即，你可以在网页上输入 React Native 代码，然后在网页上的模拟器中直接运行代码。你也可以在 iPhone 上安装RNPlayNative 应用，扫描网站上的二维码，然后直接就可以在自己的 iPhone 上运行该代码了，完全免除了 NPM 的依赖下载 和 Xcode 编译的冗长时间。此外，该网站还提供了 React Native 框架版本的切换，Amazing！

rnplay 可以帮助 React Native 开发者快速地运行和体验他人的代码，同时也可以用于排除自身环境的错误，还可以用于快速排除旧版本引入的 bug。如此神器，然而国内却很少有人知道，希望经笔者介绍后，能被更多的 React Native 开发者所用。

和 Web 一样的代码部署速度，却有着远超 Web 的流畅手感，既让人感到不可思议，仔细想想 React Native 的早已宣传的快速部署特性，却又在情理之中。只能感慨老外们应用新技术的速度太快了。

9. react-native-logcat

一个开源的 React Native Android Log输出工具，免去了繁杂的adb命令。

调试

10. 注释调试法:虽然很 Low 但是很有效。

这里不得不提一个 React Native 在捕捉错误上的一个设计缺陷。如果错误是在 ComponentDidMount 之前出现的，那么 backtrace 上只会有一堆神神叨叨的 React Native 库函数，完全无法定位到你的代码中，即便只是一些小语法错误。

那么此时，除了肉眼复查代码，唯一的方法也就是注释调试了。逐行注释掉新加入的代码，观察 bug 是否会复现。

====================================
如果您觉得我的文章对您有所启迪，请点击文末的推荐按钮，您的鼓励将会成为我坚持写作的莫大激励。 by DesGemini