#
#
转载请标明出处:
[http://blog.csdn.net/developer_jiangqq/article/details/50476350](http://blog.csdn.net/developer_jiangqq/article/details/50476350)
本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq)
# (一)前言
【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:[http://www.lcode.org](http://www.lcode.org)
上一讲我们已经对于在OSX系统上面对于React Native For Android的环境搭建以及第一个实例做了详细讲解。所谓工欲善其事,必先利其器,做React Native开发也和其他应用开发一样,最好有一个比较好的IDE工具。那么这边比较推荐以下几款工具:sublime,webstorm以及官网推荐的Nuclide。下面我们主要讲解一下后面两款工具。
刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
# (二)Nuclide常规安装以及配置
Nuclide是Fackbook专门为React开发IDE,官网提供哦~。但是Nuclide是Atom的基础上面提供了一系列的插件集合。所以我们需要首先安装Atom。
Nuclide项目官方地址:[https://github.com/facebook/nuclide](https://github.com/facebook/nuclide)
2.1.Atom安装
Atom是一个开源版本的编辑器,有着非常强大以及完美的体验,Atom最大的特色就是可以安装很多的插件来完成我们的需求。官网地址:[https://atom.io/](https://atom.io/%20%20%20%20) 去官网下载安装即可。
官网页面以及软件运行截图如下:
![](https://box.kancloud.cn/2016-02-29_56d3fbf782cbc.jpg)
![](https://box.kancloud.cn/2016-02-29_56d3fbf7aa9da.jpg)
2.2.Nuclide安装
Atom已经安装成功了,下面就开始安装Nuclide,直接打开Atom软件,点击Atom->Preferences打开Setting,然后点击install,输入nuclide-installer 搜索,进行下载即可,如下图 :
![](https://box.kancloud.cn/2016-02-29_56d3fbf7c5a72.jpg)
这种方式我们是选择插件下载进行安装,另外的一种方式我们可以直接在命令行执行以下命令(利用Atom的包管理器apm安装):
~~~
apminstall nuclide-installer
~~~
最后重启一下Atom即可。不过这两种方式我这边都不太推荐大家使用,因为楼主亲身体验过,这两种方式一方面是安装速度比较慢,而且下载安装完之后Atom直接会卡,然后提示找不到Nuclide相关模块。
# (三)Nuclide源代码编译安装(强烈推荐)
Nuclide项目官方地址:[https://github.com/facebook/nuclide](https://github.com/facebook/nuclide),我们知道该项目是facebook官方提供的,当然我们也给开发者提供了一种源代码编译安装的方式。使用起来非常简单:
![](https://box.kancloud.cn/2016-02-29_56d3fbf7dcf79.jpg)
终端安装截图如下:
![](https://box.kancloud.cn/2016-02-29_56d3fbf7ed6ec.jpg)
这样就OK了,下面就是打开Atom软件,开始进行狂写React Native项目代码吧。至于项目初始化init以及编译运行的方法,大家还是看前一篇文章哦~这边就不多说了。
# (四)WebStorm IDE介绍和安装
我相信做过Web前端的童鞋们,肯定对WebStorm IDE非常的熟悉WebStorm 是jetbrains公司旗下一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。该IDE官网地址:[https://www.jetbrains.com/webstorm/](https://www.jetbrains.com/webstorm/) 。该新版本已经支持了React了,所以在现如今的开发阶段WebStrom已经算是支持性最好的IDE了,大家有兴趣可以下载使用以下哦~,不过该是收费的,土豪忽略,至于破解版本看大家的了。
新版本更新信息如下:
![](https://box.kancloud.cn/2016-02-29_56d3fbf812997.jpg)
[注]:WebStorm对于JSX最好配置一下哦,打开Settings,作如下截图配置即可:
![](https://box.kancloud.cn/2016-02-29_56d3fbf82d938.jpg)
最后通过WebStorm打开我们一个已经存在的React Native项目。
![](https://box.kancloud.cn/2016-02-29_56d3fbf847b60.jpg)
# (五)最后总结
今天主要讲解了开发ReactNative的相关IDE(WebStorm,Nuclide)的安装和基础配置使用,下一篇我们对于应用的调试(Debug)方法做相关详解,敬请期待~
尊重原创,转载请注明:From Sky丶清([http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)) 侵权必究!
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)![](https://box.kancloud.cn/2016-02-29_56d3fbf75e010.jpg)
关注我的微博,可以获得更多精彩内容
[![](https://box.kancloud.cn/2016-02-29_56d3fbf76bdef.png)](http://weibo.com/u/1855428195?s=6uyXnP)
[](http://weibo.com/u/1855428195?s=6uyXnP)
- 前言
- React Native For Android环境配置以及第一个实例(1)
- React Native开发IDE安装及配置(2)
- React Native应用设备运行(Running)以及调试(Debugging)(3)
- React Native移植原生Android项目(4)
- React Native进行签名打包成Apk(5)
- React Native库版本升级(Upgrading)与降级讲解(6)
- React Native控件之View视图讲解(7)
- React Native配置运行官方例子-初学者的福音(8)
- React Native控件之Text组件讲解(9)
- React Native控件之Image组件讲解与美团首页顶部效果实例(10)
- TextInput组件讲解与QQ登录界面实现(11)
- ProgressBarAndroid进度条讲解(12)
- DrawerLayoutAndroid抽屉导航切换组件讲解(13)
- ScrollView组件讲解(14)
- ToolbarAndroid工具栏控件讲解以及使用(15)
- Switch开关与Picker选择器组件讲解以及使用(16)
- ViewPagerAndroid讲解以及美团首页顶部效果实例(17)
- Touchable*系列组件详解(18)
- React Native专题文章讲解,不断更新中.....
- ListView组件讲解以及最齐全实例(19)
- 超详细Windows版本编译运行React Native官方实例UIExplorer项目(多图慎入)
- React Native超棒的LayoutAnimation(布局动画)
- PullToRefreshViewAndroid下拉刷新组件讲解(20)
- RefreshControl组件详解(21)
- WebView组件详解以及实例使用(22)