React Native开发官方推荐使用Atom＋Nuclide插件,推荐使用Mac开发react Native。

1：安装Atom

下载地址

下载完成后解压安装后打开Atom，可以看到如下界面：

2：安装Nuclide

点击菜单栏：Atom->Preferences,打开Settings,点击左边Install按钮，然后，在Install Packets的输入框中，输入nuclide，出现的第一个就是我们想要安装的，点击install

默认安装nuclide之后，会安装一大堆的依赖包，安装完成后

可以看到，红色部分是额外的Toolbar可以快捷打开一些选项，小的红色框里多了一个nuclide选项。

勾选Install recommended packetson startup
退出Atom，再打开，会发现自动安装这些依赖包

3：安装插件

Atom Beautify---代码格式化工具，可以设置在保存时自动格式化，支持html,css,javascript,java,go,jsx等的格式化。
菜单Atom--->Preferences..,Settings--->Install,在Install Packages 下的输入框中输入Atom Beautufy,点击Packages,出现atom-beautify 0.30.3,点击安装。如下所示：

linter和linter-jshint-----通过jshint能发现代码中存在的问题，可以及时避免bug的发生。linter-jshint插件基于atom规则来使用jshint，该插件可以在项目根目录下新建一

个.jshintrc 来告诉检查规则
注意：linter-jshint是依赖linter插件来使用的，必须先安装linter插件.

安装步骤同Atom Beautify。

4：新建项目

运行 $react-native init Demo命令创建一个Demo项目然后，打开Atom，点击Add project folder

再在右侧目录双击index.ios.js,你看到的应该是这样的界面

5：在Nuclide运行项目

第一步，运行react native packager

菜单栏Nuclide--->React Native--->StartPackager,或者点击 command + shift + p打开commandpalette（打开终端选项），然后输入rns,点击ReactNative:StartPackager.

成功后在Console栏会出现成功的log信息，如此：

第二步，终端运行项目

cd到项目目录，执行
$ react-native run-ios //运行到iOS设备上
$ react-native run-android //运行到Android设备上
执行完这一步后，你应该会看到这样的模拟器界面

6:在Nuclide中调试
菜单栏Nuclide--->React Native--->Start Debugging,或者点击 command + shift + p打开command palette（打开终端选项），

然后输入rnsd,点击React Native:StartDebugging.

接着，点击模拟器，Command+D，选择Debugging JS Remotely

这时候，你会看到，Nuclide中，加载了debug窗口

添加断点 和很多IDE一样，在每一行左边左键可以添加断点了

保存，点击模拟器，Command＋R，会发现，停在了断点处

7：查看Atom安装了那些Packages插件可以有两种方式：

(1) 菜单Atom--->Preferences..,Settings--->Open Config Folder，如下：

会自动打开.atom的工程，可以看到Packages下有许多安装的插件，如下：

(2) 菜单Atom--->Preferences..,Settings--->atom.io,如下：

自动在浏览器中打开packages页面，如下：

8:如果需要Android原生开发时，Atom针对Java的插件支持，参考如下文章：

使用Atom打造轻量级的Java IDE

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!