前言

雖然有了 React Native 這樣方便的開發工具，但試想如果必須同時開著 Xcode、Android Studio 還有 Atom 這樣好像很辛苦，於是新的 IDE 就在這樣的情況下應聲而出。

React Native 的開發者需要一個同時能寫 JavaScript、Objective-C、Swift、Java 的環境，最好還能支援 ESLint 與 Flow。

Nuclide

Nuclide 是由 Facebook 所推出，建在 Atom 之上的編輯器，不只是為了 React Native 而打造，同時還支援 Hack、Python、OCaml 等等許多程式語言。(Facebook 是不是想要全公司用同一個編輯器？)

既然是 Facebook 所開發，當然在支援 React Native 上面還是有比別人優秀的地方，尤其是在 Debug 方面。

建議先在 Development Menu 打開 Debug JS Remotely、Show Inspector 兩個選項，來幫助 Nuclide 的功能可以使用：

Command Palette

Nuclide 擴充了很多指令在 Atom 的 Command Palette，可以直接在此操作 Packager 以及 Debug 的等等指令：

Debugger

在 Command Palette 選擇：

Nuclide React Native: Start Debugging

我們就能設定 Breakpoint 並一步步的來 Debug 應用程式。

React Native Inspector

用過 React Inspector 的開發者通常就回不去了，因為看得清楚到底有什麼 Component 以及它的 State、Props，一切問題通常很快就能迎刃而解。

在 Command Palette 選擇：

Nuclide React Native Inspector: Show

就能看到 React Native Inspector

雖然部分 Android 的功能受限，但我想至少目前為止也能解決一部分 React Native 不好 Debug 的問題。

Deco

Deco 是一個全新的 IDE，不只開源而且是專門為了 React Native 而打造。

可以直接在 Components 面板搜尋想要的 Component，也看得到簡單的介紹跟預覽圖：

可以類似 Xcode 那樣把 UI 元件直接拉近程式碼中：

就會帶入所選的 Component 以及它的一些預設屬性：

在右邊的 Properties 區塊可以看到跟程式碼中對應的那些可以修改的屬性：

跟模擬器一起使用的話，是不錯的體驗：

有興趣的人可以看 官方影片介紹影片。

結語

React Native 相當的年輕，而且有著兩個禮拜一次的超快速發佈週期，所以 React Native IDE 這塊也還不算是完全成熟，尤其是 Windows 以及 Android 相關的部分相當的欠缺。但筆者認為假以時日這個領域一定會跟著 React Native 一起成熟的。