分类: React Native

React Native 蛮荒开发生存指南

引言

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

文档

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 是否会复现。