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