React Native入门（二）Atom+Nuclide安装、配置与调试

相关文章

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推出的一款开源编辑器，可以直接去官网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 层次结构显现出来。

参考资料

Nuclide关于React Native英文文档

React Native - 开发工具Atom+Nuclide详解（安装、使用、代码调试）

学习 React Native for Android：环境搭建

React Native 开发之 IDE 选型和配置

React Native开发之IDE（Atom+Nuclide）安装，运行，调试

扫一扫下方二维码或者长按识别二维码，即可关注。