ReactNative 开发工具Atom+ Nuclide

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

1:安装Atom

      下载地址

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

     ReactNative 开发工具Atom+ Nuclide

2:安装Nuclide

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

    ReactNative 开发工具Atom+ Nuclide

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

    ReactNative 开发工具Atom+ Nuclide
   可以看到,红色部分是额外的Toolbar可以快捷打开一些选项,小的红色框里多了一个nuclide选项。

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

    ReactNative 开发工具Atom+ Nuclide   

3:安装插件

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

         ReactNative 开发工具Atom+ Nuclide

         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

         ReactNative 开发工具Atom+ Nuclide

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

         ReactNative 开发工具Atom+ Nuclide

5:在Nuclide运行项目

         第一步,运行react native packager

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

         ReactNative 开发工具Atom+ Nuclide

         成功后在Console栏会出现成功的log信息,如此:

         ReactNative 开发工具Atom+ Nuclide

         第二步,终端运行项目

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

         ReactNative 开发工具Atom+ Nuclide

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

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

      ReactNative 开发工具Atom+ Nuclide
       接着,点击模拟器,Command+D,选择Debugging JS Remotely

      ReactNative 开发工具Atom+ Nuclide

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

       ReactNative 开发工具Atom+ Nuclide

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

      ReactNative 开发工具Atom+ Nuclide

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

      ReactNative 开发工具Atom+ Nuclide

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

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

        ReactNative 开发工具Atom+ Nuclide

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

        ReactNative 开发工具Atom+ Nuclide

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

         ReactNative 开发工具Atom+ Nuclide

         自动在浏览器中打开packages页面,如下:

         ReactNative 开发工具Atom+ Nuclide


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

      使用Atom打造轻量级的Java IDE