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