React Native 探索（二）Atom+Nuclide 安装、配置和调试

前言
上一篇文章我们搭建了开发环境，并写了个 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 很像,它是收费的（可以破解）。WebStorm 的安装一点难度都没有，因此本篇文章主要讲 Atom+Nuclide 的安装。
如果你觉得 Atom+Nuclide 卡顿或者不好用，推荐使用 WebStorm，这篇文章会帮助到你：http://blog.csdn.net/it_talk/article/detai...
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 推出的一款开源编辑器，可以直接去官网https://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 层次结构显现出来。

本作品采用《CC 协议》，转载必须注明作者和本文链接