2.3 React Native开发IDE介绍

在React Native开发中，除了需要原生开发工具Xcode和Android Studio之外，推荐的开发工具有Sublime、Webstorm以及官网推荐的Atom和VSCode。下面主要对React Native开发中用到的开发工具Atom和Webstorm做一些简单的介绍，读者可以根据喜好自行选择。

2.3.1 Atom+Nuclide

Atom是由Github打造的下一代编程开发利器，支持Windows、Mac OS X、Linux三大桌面平台，免费且开源。Atom本质上是一款文本编辑器，而不是一款IDE，所以使用它开发React Native需要配合Nuclide一起使用。

Atom的官网为：https://atom.io/，读者可以到官网下载Atom安装包，如果网速较慢，还可以访问国内淘宝的镜像网站：https://npm.taobao.org/mirrors/atom/1.7.2/，点击相应的版本下载并安装，如图2-22所示。

图2-22 Atom官网

Nuclide是Facebook在Atom的基础上开发的一款插件IDE，可以用来开发React Native、iOS和Web应用，目前暂不支持Windows，只支持Mac OS X和Linux系统环境。Nuclide内置了对React Native的支持，包括代码自动补全、代码诊断等功能。而官方也推荐使用Atom+Nuclide来开发React Native应用。

Nuclide项目官方地址为：https://github.com/facebook/nuclide，打开后便可看到相关介绍，如图2-23所示。

图2-23 Nuclide官方介绍

在Atom中安装和使用Nuclide插件主要有以下几个步骤。

安装Nuclide

❶ 点击菜单栏：【Atom】→【Preferences】，或者使用快捷键【command+, 】在Install Packets的输入框中输入nuclide，然后点击【install】，如图2-24所示。当然也可以使用命令安装，命令如下：

        apm install nuclide

图2-24 安装Nuclide插件

❷ 安装完成之后，将在Atom的工具栏中看到Nuclide标签，如图2-25所示。

图2-25 Nuclide插件

❸ 安装Nuclide之后，会安装一大堆依赖包，如果默认没有安装，可以手动安装。依次选择【Packages】→【Settings View】→【Manage Packages】，如图2-26所示。搜索nuclide，进入设置，勾选【Install recommended packets on startup】即可。

图2-26 Nuclide依赖包管理

使用Nuclide运行项目

项目开发完成后，启动React Native项目主要有两种方式：一种方式是使用命令方式启动，而另一种方式就是直接利用IDE的相关图形化界面启动。使用命令方式启动的步骤如下，使用快捷键【command + shift + p】打开终端面板【command pafette】，输入如下打包命令，具体如图2-27所示。

        react native start packer

图2-27 命令方式启动项目

如果使用Nuclide的图形化界面来运行项目，则可以依次选择【Nuclide】→【React Native】→【Start Packger】选项即可，如图2-28所示。

图2-28 图形界面方式启动项目

不管使用哪种方式，都可以启动React Native，上述方式无需定位到项目目录，也不涉及任何命令，相比命令方式，使用Nuclide启动React Native更加方便。

2.3.2 WebStorm

WebStorm是JetBrains公司开发的Javascript集成开发环境，可以用于客户端应用开发以及Web开发，目前，WebStorm支持Windows、Mac OS X、Linux三大桌面平台。最新版的WebStorm还支持界面化创建项目、界面化运行及调试功能，这对于习惯了Android Studio和Xcode界面化开发的人来说的确是不小的惊喜。

WebStorm的官网地址为：https://www.jetbrains.com/Webstorm/，下载相应的版本安装即可，如图2-29所示。需要注意的是，WebStorm只支持30天的试用时间，可以使用“license server”方式激活，激活server地址为：http://idea.imsxm.com/。

图2-29 WebStorm下载

最新版本的WebStorm默认支持JSX语法，并且其拥有强大的插件库，如代码提示和自动补全插件（ReactNative-LiveTemplate）、代码格式化插件以及配置WebStorm启动应用插件等。对于习惯了idel系列工具的开发者来说，使用WebStorm来开发React Native会是一个不错的选择。

除此之外，WebStorm在最新版本中默认添加了对React Native环境的支持，开发者可以直接使用WebStorm新建项目（见图2-30）、运行项目和调试项目（见图2-31）等。同时，WebStorm还有强大的日志系统，我们可以使用WebStorm自带的控制台查看相关日志，这对于我们理解应用的运作也是非常有好处的。

图2-30 使用WebStorm创建项目

图2-31 使用WebStorm运行、调试项目

除了提供强大的插件库和默认对React Native的支持之外，WebStorm也支持使用图形化界面运行、调试应用，其强大的代码提示功能对于习惯了Xcode和Android Studio的APP开发者来说，可谓得心应手。