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窗口
保存,点击模拟器,Command+R,会发现,停在了断点处
7:查看Atom安装了那些Packages插件可以有两种方式:
(1) 菜单Atom--->Preferences..,Settings--->Open Config Folder,如下:
会自动打开.atom的工程,可以看到Packages下有许多安装的插件,如下:
(2) 菜单Atom--->Preferences..,Settings--->atom.io,如下:
8:如果需要Android原生开发时,Atom针对Java的插件支持,参考如下文章: