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

版權聲明：本文爲博主原創文章，如需轉載請註明出處

 

目錄(?)[-]

1. 前言
2. MacWindowsLinux
3. 準備工做
4. 安裝Atom
5. 安裝Nuclide
6. 新建一個工程
7. 自動補全
8. 類型標註
9. 語法檢查
10. 跳轉到方法或者類型定義
11. 在Nuclide運行項目
12. 在Nuclide中調試
13. 添加斷點
14. Element Inspector
15. 總結

 

歡迎Follow個人Github，博客會同步在Github的Blog倉庫更新。也能夠關注CSDN博客的React Native分類

• Github地址： LeoMobileDeveloper

---

前言

工欲善其事，必先利其器

好像在哪聽到一句話，」滿級程序員不須要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出品的通常都容易安裝，而且使用起來上手相對容易。本文更多的是對英文文檔的總結，以及列出了我在安裝使用過程當中遇到的一些坑，但願能有些幫助。