ReactNative 开发工具Atom+ Nuclide

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

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...