相關文章
React Native探索系列
前言
上一篇文章我們搭建了開發環境，並寫了個Hello World。這一節我們來學習React Native的開發IDE：Atom+Nuclide的安裝、配置與除錯。本文所講的內容只適用於Mac平臺。
1.開發IDE選擇
React Native的開發IDE有很多種，比如FaceBook 官方推薦的 Atom＋Nuclide、Android Studio的同門WebStorm（收費）、Sublime Text 3、Visual Studio Code和Deco。這裡Atom＋Nuclide和Deco目前並不支援Windows平臺。筆者折騰了一段時間Sublime Text 3，折騰各種外掛直到一臉懵逼。WebStorm和Android Studio很像，並沒覺得他有什麼優勢可以收費（可以破解）。最終我選擇了Atom+Nuclide，主要有以下幾個原因：
- 良好的程式碼提示功能和錯誤檢查機制。
- Debugger和React Inspector可以替代Chrome來進行除錯工作。
- FaceBook 官方推薦。
React Native開發平臺我建議使用Mac，能省不少心（開發Android我也建議用Mac來開發）。
2.準備工作
在安裝Atom＋Nuclide前需要先安裝watchman和 flow。
watchman是 facebook 的一個開源專案，用來監視檔案並且記錄檔案的改動情況，當檔案變化時它可以觸發一些操作。
brew install watchman複製程式碼flow 是一個開源的JavaScript靜態型別檢查器，用來發現 JS 程式中的型別錯誤。
brew install flow複製程式碼3.Atom+Nuclide安裝
Atom是Github推出的一款開源編輯器，可以直接去官網atom.io/下載它，安裝過程很簡單…
安裝Nuclide
接下來安裝Nuclide，Nuclide是Facebook在Atom的基礎上開發的一個外掛IDE，可以用來開發React Native、iOS 和 Web應用。我們開啟Atom，點選頂部選單欄的Atom->Preferences，在Settings中的Install介面搜尋nuclide，搜尋到nuclide後點選Install按鈕。如下圖所示。
因為我已經安裝了Nuclide，所以沒有Install按鈕。安裝過程可能需要很長的時間，安裝完畢後重新開啟Atom會發現頂部選單欄多了Nuclide一欄，說明Nuclide安裝成功。
安裝Nuclide相關依賴包
在Settings中點選Packages介面，點選頂部選單欄的Packages-> Settings View->Manage Packages也能進入Packages介面。在Packages介面搜尋nuclide，並點選nuclide的Settings按鈕，如下圖所示。
在nuclide的Settings中勾選Install Recommended Packages On Startup選項，並在Path to Flow executable輸入flow 路徑，flow 路徑一般情況下都是：/usr/local/bin/flow，你可以在終端輸入which flow 命令來進行查詢。
重啟 Atom，這些依賴包便會開始自動安裝。
可以看到nuclide需要很多的依賴包，如果這些依賴包有哪個沒有安裝成功，Atom會給出提示，我們在Settings的Install介面進行搜尋安裝就可以了。
安裝完成後會看到介面上多了一條額外的ToolBar。
配置flow
這時我們通過Add Project Folder來開啟我們已有的React Native工程，如下圖所示。
這時我們在終端進入React Native工程目錄，執行flow語句來檢視flow是否正常執行，如果發現系統的flow版本與工程配置的flow版本不一致，則開啟工程中的 .flowconfig檔案，檢視flow的版本。
這裡發現flow的版本為0.42，則在終端輸入如下命令：
npm install flow-bin@0.42 -g複製程式碼再次在終端輸入flow，發現flow執行正常。接著在js檔案的最上方加入/*@flow*/或者//@flow，這樣flow就可以開始檢查了。我們隨便加入些錯誤語句來進行測試，如下圖所示。
需要注意的是，網上的文章都是在index.ios.js做的測試，這是沒問題的，如果在index.android.js中做測試則會發現flow不好用，這是因為在 .flowconfig檔案有如下語句：
[ignore]
; We fork some components by platform
.*/*[.]android.js複製程式碼所有的以.android結尾的js檔案的flow檢查都會失效，如果去掉該語句則會報100多個error，目前在index.android.js上筆者沒有先到好的解決方案，如果有人有解決方案，不吝賜教。
4.除錯程式
在終端進入專案目錄並輸入如下命令安裝程式：
react-native run-android複製程式碼Debugger除錯程式
使用快捷鍵 command + shift + p 開啟輸入框，輸入debugging，並選擇Nuclide React Native:Start Debugging：
這時Atom彈出Debugger介面，並等待進行Debugger。我們通過Command+M進入模擬器的開發選單，選擇Debug JS Remotely。
這時Debugger介面進入了debug狀態，我們在程式中打上斷點，通過按2次R鍵來Reload介面，程式就會停留在斷點位置，如下圖所示。
React Inspector
使用快捷鍵 command + shift + p 開啟輸入框，輸入insp，並選擇Nuclide React Inspector:Toggle：
如果連線的是SDK自帶的模擬器，稍等片刻就會在React Inspector中出現如下介面，它會將當前介面的UI 層次結構顯現出來。
參考資料
Nuclide關於React Native英文文件
React Native - 開發工具Atom+Nuclide詳解（安裝、使用、程式碼除錯）
學習 React Native for Android：環境搭建
React Native 開發之 IDE 選型和配置
React Native開發之IDE（Atom+Nuclide）安裝，執行，除錯
歡迎關注我的微信公眾號，第一時間獲得部落格更新提醒，以及更多成體系的Android相關原創技術乾貨。
掃一掃下方二維碼或者長按識別二維碼，即可關注。
