React Native開發之IDE（Atom+Nuclide）安裝，運行，調試

轉自:http://blog.csdn.net/hello_hwc/article/details/51612139

前言

工欲善其事，必先利其器

好像在哪聽到一句話，”滿級程序員不需要IDE，不需要自動補全，不需要靜態語法檢查”。對於這種言論，我只想說bullshit。

IDE對於開發還是很重要的，而React Native開發官方推薦使用Atom＋Nuclide插件。本文會詳細的介紹，如何配置好這個環境，並且以一個示例工程爲例，介紹如何利用這套環境進行開發，與運行，調試，斷點。

使用Nuclide你能夠

• 配合flow進行靜態語法檢查，自動補全
• 方便的debug
• 進行版本控制，方便diff
• iOS模擬器Log

對了,爲了從零開始，我卸載了之前安裝好的atom和對應的插件

---

Mac/Windows/Linux

推薦還是用Mac開發React Native，因爲iOS運行需要Mac的環境。而且，用Mac的話，也比較省心。

本文的所有流程，均以Mac爲例

---

準備工作

本文默認讀者已經安裝好了React Native，如果沒有安裝好，可以按照官網的講解安裝，很簡單，本文側重IDE

注意，如果沒有安裝watchman 和Flow，建議安裝

安裝watchman－自動監聽文件內容變化，刷新數據

brew install watchman

• 1

• 1

如果提示沒有安裝brew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• 1

• 1

安裝flow－提供靜態語法檢查，自動補全

brew install flow

• 1

• 1

如果你之前安裝了flow或者watchman,建議更新到最新版本

brew upgrade watchman
brew upgrade flow

• 1
• 2

• 1
• 2

---

安裝Atom

下載地址 
這個沒什麼難的，解壓縮之後，把Atom從下載目錄，拖到應用程序目錄即可。 
打開Atom，你看到的界面應該是這樣的 

---

安裝Nuclide

這裏，我們在Atom中，用圖形化界面來安裝。

點擊菜單欄：Atom->Preferences,或者可以”Command+,”快捷打開

然後，在Install Packets的輸入框中，輸入nuclide，出現的第一個就是我們想要安裝的，點擊install 

默認安裝nuclide之後，會安裝一大堆的依賴包，安裝完成後 
 
可以看到，紅色部分是額外的Toolbar可以快捷打開一些選項，小的紅色框裏多了一個nuclide選項。

如果沒有默認安裝這些依賴包，可以選中,Packages->Settings View->Manage Packets 

然後，搜索nuclide，再nuclide package上雙擊，進入設置 

勾選Install recommended packets on startup 

退出Atom，再打開，會發現自動安裝這些依賴包

---

新建一個工程

react-native init Demo --verbose

• 1

• 1

然後，打開Atom，點擊Add project folder 
 
再在右側目錄雙擊index.ios.js,你看到的應該是這樣的界面 

---

自動補全

我們在這一行上面，輸入fun

class Demo extends Component {

• 1

• 1

會看到 
 
然後，會車，你就會發現自動生成了方法

function functionName() {

}

• 1
• 2
• 3

• 1
• 2
• 3

自動補全肯定沒有XCode 或者Android Studio來的那麼強力，不過有總比沒有好對吧。

---

類型標註

將光標放到上文提到的functionName上，你會發現如圖，就是出現了這個方法的類型 
 
這時候，點擊出現的針頭，那麼這個類型標註就會一直顯示在界面上 

---

語法檢查

我們在function裏隨便輸入

function functionName() {
  a
}

• 1
• 2
• 3

• 1
• 2
• 3

然後，command+s保存文件，這時候，正常會出現如下檢查錯誤 

其中

• 1，表示這一行有錯誤，點擊那個紅色的三角圖標，你可以看到詳細的錯誤描述
• 2，表示整個工程的錯誤

點擊2，你會看到錯誤和警告的列表 

如果這裏，沒有檢查出錯誤

打開終端，cd到工程的根目錄,例如我的

/Users/huangwenchen/Desktop/Demo

• 1

• 1

然後，用終端檢查flow能否正常工作

Leo-2:Demo huangwenchen$ flow

• 1

• 1

如果出現錯誤

.flowconfig:97 Wrong version of Flow. The config specifies version ^0.25.0 but this is version 0.20.1
Leo-2:Demo huangwenchen$ brew update flow

• 1
• 2

• 1
• 2

證明你本地的flow版本和react native默認使用的flow版本不一致，通常，更新到最新版本即可

Leo-2:Demo huangwenchen$ brew upgrade flow
==> Upgrading 1 outdated package, with result:
flow 0.25.0
==> Upgrading flow
==> Downloading https://homebrew.bintray.com/bottles/flow-0.25.0.el_capitan.bottle.tar.gz
######################################################################## 100.0%
==> Pouring flow-0.25.0.el_capitan.bottle.tar.gz
==> Caveats

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

---

跳轉到方法或者類型定義

使用command+鼠標左鍵

---

在Nuclide運行項目

第一步，運行react native packager

點擊 command + shift + p打開command palette（打開終端選項），然後輸入

react native start

• 1

• 1

然後，選擇 
Nuclide React Native :Start packager

如果，出現錯誤

/Users/huangwenchen/Desktop/Demo/node_modules/react-native/local-cli/cli.js:123
class CreateSuppressingTerminalAdapter extends TerminalAdapter {
^^^^^
SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

說明你node的版本太低,運行以下命令更新

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

• 1
• 2
• 3

• 1
• 2
• 3

第二步，終端運行項目 
cd到項目目錄，執行

$ react-native run-ios
$ react-native run-android

• 1
• 2

• 1
• 2

---

在Nuclide中調試

執行完上面一步後，你應該會看到這樣的模擬器界面 

然後，在Nuclide中，點擊 command + shift + p打開command palette（打開終端選項），輸入react native debug

接着，點擊模擬器，Command+D，選擇Enable Remote JS debugging 
 
這時候，你會看到，Nuclide中，加載了debug窗口 

---

添加斷點

和很多IDE一樣，在每一行左邊左鍵可以添加斷點了 

同時，修改代碼看看效果

function myLog() {
  console.log("adtad");
}
class Demo extends Component {
  render() {
    myLog();
      return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        ......

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

保存，點擊模擬器，Command＋R，會發現，停在了斷點處 

其它的都是JS的調試技巧了，這裏不再贅述，後面寫博客的時候，遇到了再說。

---

Element Inspector

像網頁調試，你可以再瀏覽器裏動態修改網頁的HTML代碼，在React Native中調試你也可以 
Command + shift + p然後打開如下圖 
 
接着，你就會發現像HTML的Element Inspector出現了，你可以看到視圖的佈局和對應的屬性

---

總結

Facebook出品的一般都容易安裝，並且使用起來上手相對容易。本文更多的是對英文文檔的總結，以及列出了我在安裝使用過程中遇到的一些坑，希望能有些幫助。