【React Native开发】React Native开发IDE安装及配置
日期: 14:01:50
来源：ITeye
【React Native开发】React Native开发IDE安装及配置
转载请标明出处：
上一讲我们已经对于在OS X系统上面对于React Native For Android的环境搭建以及第一个实例做了详细讲解。所谓工欲善其事，必先利其器，做React Native开发也和其他应用开发一样，最好有一个比较好的IDE工具。那么这边比较推荐以下几款工具:sublime,webstorm以及官网推荐的Nuclide。下面我们主要讲解一下后面两款工具。
刚创建的React Native技术交流群(),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
(二)Nuclide常规安装以及配置
Nuclide是Fackbook专门为React开发IDE，官网提供哦~。但是Nuclide是Atom的基础上面提供了一系列的插件集合。所以我们需要首先安装Atom。
Nuclide项目官方地址:
2.1.Atom安装
Atom是一个开源版本的编辑器，有着非常强大以及完美的体验，Atom最大的特色就是可以安装很多的插件来完成我们的需求。官网地址:
去官网下载安装即可。
官网页面以及软件运行截图如下:
2.2.Nuclide安装
Atom已经安装成功了，下面就开始安装Nuclide，直接打开Atom软件，点击Atom-&Preferences打开Setting,然后点击install，输入nuclide-installer 搜索，进行下载即可，如下图 :
这种方式我们是选择插件下载进行安装，另外的一种方式我们可以直接在命令行执行以下命令(利用Atom的包管理器apm安装):
apminstall nuclide-installer
最后重启一下Atom即可。不过这两种方式我这边都不太推荐大家使用，因为楼主亲身体验过，这两种方式一方面是安装速度比较慢，而且下载安装完之后Atom直接会卡，然后提示找不到Nuclide相关模块。
(三)Nuclide源代码编译安装(强烈推荐)
Nuclide项目官方地址:，我们知道该项目是facebook官方提供的，当然我们也给开发者提供了一种源代码编译安装的方式。使用起来非常简单:
终端安装截图如下:
这样就OK了，下面就是打开Atom软件，开始进行狂写React Native项目代码吧。至于项目初始化init以及编译运行的方法，大家还是看前一篇文章哦~这边就不多说了。
(四)WebStorm IDE介绍和安装
我相信做过Web前端的童鞋们，肯定对WebStorm IDE非常的熟悉WebStorm 是jetbrains公司旗下一款JavaScript开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。该IDE官网地址:
。该新版本已经支持了React了，所以在现如今的开发阶段WebStrom已经算是支持性最好的IDE了，大家有兴趣可以下载使用以下哦~，不过该是收费的，土豪忽略，至于破解版本看大家的了。
新版本更新信息如下:
[注]:WebStorm对于JSX最好配置一下哦，打开Settings,作如下截图配置即可:
最后通过WebStorm打开我们一个已经存在的React Native项目。
(五)最后总结
今天主要讲解了开发React Native的相关IDE(WebStorm， Nuclide)的安装和基础配置使用，下一篇我们对于应用的调试(Debug)方法做相关详解，敬请期待~
尊重原创，转载请注明：From Sky丶清（） 侵权必究！
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)
关注我的微博，可以获得更多精彩内容
本页内容版权归属为原作者，如有侵犯您的权益，请通知我们删除。
嗯。。再差1篇就可以获得持之以恒徽章了，今天带大家画一个比较简单的view。 转载请注明出处：http://blog.csdn.net/wingichoy/article/details/ 废话不多说，看效果图： 首先 构造函数 测量... 这里就一笔带过了。
public ErrorView(Context context) { this(context, null); } public ErrorView(Context context, AttributeSet attrs) {
本手册适合至少有初级经验的开发者查阅或复习相关知识使用，新手可能会看不懂。 1、java代码优化 1.1安卓如何执行代码 dvm：.java-.class-.dex-.apk 优化斐波那契数列： 斐波那契数列的递推公式是f(n)=f(n-1)+f(n-2)，特征方程为：x2=x+1,解该方程得(1+sqrt(5))/2,(1-sqrt(5))/2.所以f(n)=Ax1n+Bx2n,带入f(0)=0,f(1)=1得A=sqrt(5)/5,B=-sqrt(5)/5.则f(n)求出。 BigInteger： 用
使用Android Studio并且基于Gradle构建，每个App能在多个位置包含清单文件，例如在src/main文件夹下productFlavor、库、Android ARchive(AAR) bundles of Android Library项目，和第三方依赖。在构建过程中，包含在你的app中的多个AndroidMainfest.xml设置合并成一个，生成APK清单文件用于app的打包和发布。清单文件的设置基于清单优先级来合并，取决于清单文件的位置。从制定build variant清单文件的 元素
1 背景 大家都知道Android View提供了scrollTo()与scrollBy()方法来供我们进行View的滚动，但是有个问题就是他的滚动很蛋疼，疼在是瞬时挪动到指定位置的，这种对于追求用户体验的今天来说简直是硬伤啊；为了解决这个问题Google给我们提供了一个牛叉的工具类Scroller，下面我们就深入浅出的来开战这一工具类，将其玩爆，以便日后自定义控件时如鱼得水。 Scroller可以让我们的滚动变得十分优雅，可以瞬间提升我们自定义控件的逼格，但是了解该篇之前请先吃饱 《Android应用坐
在项目中，我们经常需要发表情，以及经常需要将表情字符转换成表情。因为表情是一个图片，所以我们发给服务器的时候，实际上是发一段特殊的文字给服务器，然后转换成表情。以免浪费用户过多的流量。 那接下来，我们就来介绍一下，如何使用正则表达式实现图文混排呢？ 为了以后的代码的管理方便，我们抽取出两个类： NSString+Regular.h中，我们暴露两个方法出来： /** * 返回正则表达式匹配的第一个结果 * * @param pattern 正则表达式 * * @return 匹配的第一个结果 是NSText
谷歌在android3.0时候给我们带来了属性动画，真正意义上带来了”动画“，以前的帧动画也就4中效果的组合（旋转、淡入淡出、放大缩小、平移），而且只是表面的动画，最经典的比如，把一个button按钮移动到另一个位置，然后去点击，一点反应都没有，但是点击原来空白位置仍然有点击事件触发。而属性动画彻彻底底解决这个问题。
属性动画到底带来了哪些属性呢？如下： （1）Duration：动画持续时间 （2）TimeInterpolation ： 用于定义 动画变化率 的接
Objective-C方法与函数的区别 方法是唯对象所有 函数是不依赖于对象存在的 方法 函数 - (void) void test(); 方法是以减号 - 开头 - 类型要用()括起来 - 声明必须写在@interface-@end之间，实现必须写在@implementation-@end之间 可以写在文件中的任意位置 只能由对象来调用 - 可以直接访问成员变量 不可以直接访问成员变量 Objective-C成员方法与类方法的区别 成员方法是以减号 “-” 开头 类方法是以加号 “+” 开头
Android App 的大小随着 Android 平台持续增长。当你的应用程序和它引用的库达到某个大小，你会遇见预示你的 App 已经达到 Android 应用构建架构极限的构建错误。早期版本的构建系统报告如下错误：
Conversion to Dalvik format failed: Unable to execute dex: method ID not in [0, 0xffff]: 65536 最近版本的 Android 构建系统显示一个不同的错误，他指示这同样的问题：
拿到美工效果图，咱们程序员就得画得一模一样。 为了不被老板喷，只能多练啊。 听说你觉得前面几篇都so easy,那今天就带你做个相对比较复杂的。 转载请注明出处：http://blog.csdn.net/wingichoy/article/details/ 今天的效果图如下(左边是ui图 右边是实现图)： 自我感觉总体效果还不错，至少大概画得一样了。上一个动态图： 其实这个效果实现起来也不是很难，就是计算坐标，弧度之类的可能会比较麻烦，这里分享写这个其中一张手稿，请无视掉很丑的字，其实做自
第十六章、访问者模式 访问者模式是一种行为型模式，它是23种设计模式中最复杂的一个，虽然使用频率不高，但是并不代表可以忽略，在合适的地方，它会带来意想不到的灵活性。访问者模式，顾名思义使用了这个模式后就可以在不修改已有程序结构的前提下，通过添加额外的“访问者”来完成对已有代码功能的提升。 1.定义 封装一些作用于某种数据结构中的各元素的操作，它可以在不改变这个数据结构的前提下定义作用于这些元素的新的操作。 2.使用场景 （1）对象结构比较稳定，但经常需要在此对象结构上定义新的操作。 （2）需要对一个对象结
Copyright (C)
ITfish.net输入关键字或相关内容进行搜索
React Native
3 人关注该话题
发起了问题 o 1 人关注 o 0 个回复 o 92 次浏览 o
发起了问题 o 1 人关注 o 0 个回复 o 95 次浏览 o
发起了问题 o 1 人关注 o 0 个回复 o 80 次浏览 o
发起了问题 o 1 人关注 o 0 个回复 o 65 次浏览 o
发起了问题 o 1 人关注 o 0 个回复 o 58 次浏览 o
回复了问题 o 2 人关注 o 2 个回复 o 119 次浏览 o
发起了问题 o 1 人关注 o 0 个回复 o 50 次浏览 o
发起了问题 o 1 人关注 o 0 个回复 o 71 次浏览 o
发起了问题 o 1 人关注 o 0 个回复 o 54 次浏览 o
发起了问题 o 1 人关注 o 0 个回复 o 87 次浏览 o
facebook在HTML5上的一举一动都是全世界都在关注。2013年放弃HTML5也是产生非常大的影响力。不过这次，它可不是又把HTML5捡起来了，而是拿出了替代HTML5的新的跨平台方案。
整体而言，facebook的大思路和DCloud是差不多的，两家...
facebook在HTML5上的一举一动都是全世界都在关注。2013年放弃HTML5也是产生非常大的影响力。不过这次，它可不是又把HTML5捡起来了，而是拿出了替代HTML5的新的跨平台方案。
整体而言，facebook的大思路和DCloud是差不多的，两家都是W3C会员，深刻清楚HTML5的弱点在于渲染，尤其是动态交互。认清这点并认真解决是做实事。这比cordova、ionic这些产品的思路要靠谱。cordova等产品仍然认为SPA是王道，耐心等待硬件升级就好了。
但是除了渲染，DCloud认为HTML5比原生还有2个关键环节弱就是能力和开发工具，所以在这2方面也做了react native没有做的强化工作。
以及同样是优化动态交互，DCloud和react native也走了不同的路线。
首先声明一点，DCloud并非做不出来react native这样的产品从而鼓吹5+好，抨击react native不好。
恰恰是我们团队之前在08年-12年也走过react native的那条路，使用v8下的js操作原生控件。但是随着时代的发展，我们淘汰了那个技术。
原因是什么？因为手机硬件在快速发展，HTML5起来了。
现在的HTML5，虽然还有虽然有部分场景表现不佳，但不至于被全面否定。
对于HTML5表现不佳的地方，比如窗体切换、区域滚动、下拉刷新等，采用原生强化的方式进行补充，其余HTML5可用部分，仍使用HTML5就好了。
这也就是HTML5+的思路，面向核心问题、改进核心问题，做强化，而不是全面否定重新来一套。
而经过体验强化的部分，DCloud又推出mui前端框架，做标准兼容，让窗体切换、下拉刷新这些强化代码在普通浏览器下也可以兼容降级运行，虽然没有带着5+引擎时那么流畅，但也能用。
这才是有更有效率的解决方案，开发一次、多端发布。
打个比方，一辆车只是轮子不够好，改进轮子就好了，非要整车重做何必呢。
**而react native的问题，就是过于否定HTML5的价值。**
接下来我们系统的总结下2个产品的区别：
### 1. 理念的区别：
react native与HTML5无关。
它使用的语言还是javascript，但没有HTML和css。
可以把它称为no HTML5。
也就是使用js语言编程，但不使用浏览器引擎渲染，而是用独立v8引擎解析指定的js语法，然后由js操作绘制界面。
NO HTML5，这对于W3C和浏览器厂商，这是个有点打脸的事情。
这样广大开发者所学的HTML和css知识就用不到了。
而HTML5Plus，看名字就知道是完全不同的路线。
5+是基于HTML5的现状，扩展和完善它的不足。
并且html5plus.org定义的扩展，也都会提交给W3C。
面对HTML5的不足，是打翻重来好，还是增强好？答案肯定是如果有增强的方案且效果一样，何必打翻重来。
### 2. 平台支持
目前react native在ios上仅支持ios7以上，Android仅支持Android4.1以上。以下的平台，会被转换成普通HTML5运行，效果很差。
而5+的平台支持是iOS5+和Android2.3+。
你的老板可能会问你为什么竞品app的次日留存是30%而你的app是20%，然后风投就投给了你的竞品，其实答案就在于你的app兼容的手机不够多。
### 3. 编码的区别
先说明一个概念，reactjs之前是facebook推出的一个前端框架。在前端框架层面定义了一套自己的api，然后用js再解析成dom。
刚刚推出的react native，原生实现了之前reactjs的api的解析，不再转换为dom。
之前reactjs前端框架出来时，业内争议就很大，很多人认为这种写法难以理解、不优雅。
```javascript
React.render(
&h1&Hello, world!&/h1&,
document.getElementById('example')
有点像使用innerHTML来创建dom，然后注意&h1的左边是没有引号包围，也就是说这个参数并不是字符串。真是把js的动态性发挥的淋漓尽致。
另外React Native的理念是Learn Once , Write Anywhere，ios、Android2个平台很多代码都无法统一。
### 4. 引擎的体积
react native是自己的渲染引擎，不是webkit或任何我们熟悉的浏览器。相当于是facebook的定制浏览器。
引擎包的体积不小，hello world就是7M。而功能更多的5+基础基座只有几百K大小。原因是5+只是做强化，基础的HTML5处理是os做的。当然由此开发者也得注意编码时不要依赖太新的css，容易引发应用兼容性问题。
### 5. 性能的区别
其实不管是浏览器，还是react native，还是5+，渲染都是原生语言解析动态语言来渲染，不同的只是谁的原生渲染引擎高效，再往本质说，就是谁的语法简单。越复杂的语法，越灵活，也渲染越慢。
从理论上来讲，reactjs的性能一般，但react native的性能确实好于webkit，但react native与5+的性能谁高谁低？有点复杂，慢慢解释。
5+分HTML5部分和原生扩展部分。
- 使用纯HTML5时，比如用js操作一个动画，那么react native比dom+css3的HTML5方案性能高。
- 但使用5+的原生扩展时，那react native的性能略逊于5+。比如窗体切换，5+提供更为强大的截图切换方案，支持提前对窗体静态截图，移动窗体时不移动webview、只移动静态截图的，此时不会在移动窗体时频繁触发dom和css的重绘，性能是很好的，rn也比不了，rn仍然是要动态渲染绘制的。
在DCloud的mui里，switch等控件是纯HTML5的，所以性能比react native要差。
但为何DCloud明知如此也不给switch做native版本？要知道DCloud给很多UI控件做了native版本。
原因是DCloud的原则是HTML5能做好的事情不动原生。mui的switch理论上比react native性能差，但实际中用户很难感受到动画少几帧的差别，既然已经能满足商用，何必搞原生增加引擎体积？
### 6. 能力的区别
原生能力调用这个就不是react native的擅长了，几乎没什么原生能力调用。需要原生工程师开发原生代码封装接口给js用。
5+ runtime有几十万原生api可以直接调用，能力远多于react native。大多数常见的功能api都封装在htmlplus的标准规范里，更多api可以灵活的使用Native.js操作，也有大量示例，无需原生工程师就能完成app。
所以目前react native常见的应用是hybrid，不太在意app体积的开发商使用rn做热更新。但没有原生工程师时，如果想纯js完成app，那react native是不行的。这对于创业公司就失去了吸引力，既然要用跨平台技术，就是要省成本，还得再雇佣原生工程师何必呢。
### 7. 成熟度的区别
开发者肯定喜欢坑少的产品。react native是2015上半年发布ios，下半年发布Android。HTML5+更早一年，是2014年初发布，基于5+已上线数万App，包括360、大众点评、京东、唯品会、携程等众多知名公司都在使用。坑不能说没有，但不会比react native多。
### 8. 开发工具的区别
facebook没有提供配套的ide，开发调试非常麻烦。没有原生开发基础的话甚至可能搭不起来开发环境。
打包也不方便，没有mac电脑无法调试或打包ios应用
### 9. 发展方向的区别
作为一个开发者，我仍然认为react native是一个短期的产品。
因为随着硬件、OS和HTML5强化技术的成熟，HTML5的性能已经大幅提升，react native的性能会略好一点点，但不会很明显，为了这一点点要重新学习、重新编码，不值得。
而且随着时间的推移，性能优势会越来越小。
花费很大精力学习一个很短期的过渡产品，我想大多数人不会这么选择。
如果你本来就是reactjs的开发者，且准备进入facebook生态圈，那么react native这步顺利成章。
如果你本来不会reactjs，现在想用react native开发跨平台app，那么没什么意义。
如果你是一个原生开发者，想要利用react native解决热更新和跨部门组件整合，那没问题，实际上目前react native的主要使用场景就在此。
如果你想用HTML5做跨平台开发，不招原生开发，那react native玩不转，只能使用HTML5+。
最后总结下：
HTML5需要强化毋庸置疑，但到底该怎么强化？
一种是打翻重来一套，一种是增强HTML5的不足。如果最终效果差不多，当然是后者的方案靠谱。
一个HTML5移动站，通过5+略加改造就可以变成原生体验的App。但如果是react native，就需要重头学重头写，代价高昂，收益却没有提升多少。
功能：5+远大于react native
性能：两者各有千秋
包体积：5+远小于react native
OS支持范围：5+大于react native
国内开发者支持：5+优于react native
长期演进生命力：react native像过渡产品，随着手机硬件的提升，该项目存在的意义在下降。如果说未来有一天，有谁能替代原生成为移动互联网主流技术，那只能是HTML5，不会是诸如react native这类技术。
光说理论也不够，建议大家亲身体验一下react native的案例和DCloud的案例，装在低端手机上看看。
react native的案例：/cases.html。
DCloud的案例：http://dcloud.io/case/ 推荐使用最新版流应用体验。
我相信大家很难感知到性能差别。
发表了文章 o 1 个评论 o 156 次浏览 o
发表了文章 o 0 个评论 o 134 次浏览 o
发表了文章 o 0 个评论 o 195 次浏览 o
发表了文章 o 0 个评论 o 156 次浏览 o
发表了文章 o 0 个评论 o 161 次浏览 o
发表了文章 o 0 个评论 o 208 次浏览 o
发表了文章 o 0 个评论 o 230 次浏览 o
发表了文章 o 0 个评论 o 161 次浏览 o
发表了文章 o 0 个评论 o 953 次浏览 o
获得 1 次赞同, 0 次感谢
获得 1 次赞同, 0 次感谢
获得 2 次赞同, 0 次感谢
获得 1 次赞同, 0 次感谢
获得 1 次赞同, 0 次感谢iOS程序员的React Native开发工具集
招聘信息：
本文整理了React Native iOS开发过程中有用的工具、服务、测试、库以及网站等。工具你可以选择不同的开发环境：、或者你可以使用+,目前我使用EXPO XDE，不推荐使用DECO、和是React Native iOS初学者的工具包主要提供了着手React Native开发的新手教程是一款Chrome Extension，可以检查React组件层如果你需要本地playground，可以使用是另一款节省时间的利器，基于云服务可以直接在用户设备上部署APP的更新可轻松添加、移除以及更新全局和本地packages是一个跨平台的崩溃报告和聚合工具和可帮你编写高质量的正确代码让你实时的监控Redux状态树的Store，有助于热重载和自定义UI库和用于页面间的跳转测试&&网站&&&视频服务&四款React Native beta版测试工具：、、以及，个人比较喜欢用Buddybuild
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量5547点击量4046点击量3713点击量3657点击量3251点击量3243点击量3231点击量3195点击量3116
&2016 Chukong Technologies,Inc.
京公网安备89966,690 八月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
React Native 开发之 IDE 选型和配置
React Native 开发之 IDE 选型和配置
0&他的粉丝
日. 估计阅读时间:
硅谷人工智能、机器学习、互联网金融、未来移动技术架构 ，
相关厂商内容
相关赞助商
Nuclide 是 Facebook 基于 Atom 的基础上开发的一个插件 IDE，可以用来开发 React Native，iOS 和 Web 应用，目前不支持 Windows 平台，只支持 Mac OS X 和 Linux。
Nuclide 内置了对 React Native 的支持，包括代码自动补全，代码诊断等，下图是代码补全的截图：
Nuclide 是 Facebook 官方提供的 React Native IDE，对 React Native 的支持应该是最好的，因此，推荐大家首选这个，如果在你的电脑运行起来不会卡顿的话。Nuclide 的安装很简单，在确保 Atom 安装之后，在命令行中执行 apm install nuclide 即可。在使用 Nuclide 之前，建议好好看下官网的说明：https://nuclide.io/docs/quick-start/getting-started/
WebStorm 是著名的 JetBrains 公司开发的号称最智能的 Javascript 集成开发环境，可以用于复杂的客户端应用开发以及基于 Node.js 的服务端开发。如果你之前使用 Android Studio 开发过 Android 应用的话，你一定会觉得 WebStorm 的界面似曾相识，没错，因为 WebStorm 和 Android Studio 都是 JetBrains 的杰作。WebStorm 支持 Windows、Mac OS X、Linux 三大桌面平台，不过和 Android Studio 可以免费使用不同，WebStorm 是需要付费使用的，只有 30 天的试用期。
由于 React Native 是基于 React 的，而 React 使用的是 JSX 语法，因此，使用 WebStorm 开发 React Native 之前，我们首先需要设置支持的 Javascript 语法，点击 WebStorm-Preferences，在打开的对话框中选择 Javascript language version 为 JSX Harmony 即可在代码编辑器中识别 JSX，如下图所示：
当然，到这一步，只能使得编辑器识别 JSX 语法的 Javascript 代码，不会导致代码标红，但对于 React Native 的 API 名称，组件名称等并不会智能提醒和自动补全，因为目前 WebStorm 只支持 React 语法，还不支持 React Native 语法。为了解决这个问题，我们可以使用一个开源的插件：ReactNative-LiveTemplate，按照 Github 上面的说明安装插件并重启 WebStorm 之后生效，这时在编辑器中输入 React Native 的组件或者 API 的首字母，会自动联想出相应的组件，如下所示，方便了很多。如果在使用过程中觉得这个插件有不完善的地方，你还可以在 Github 上面提交你的 Pull Request，贡献自己的一份力量。
Sublime Text 3
Sublime Text 3 是一款广泛使用的代码编辑器，支持 Windows、Mac OS X、Linux 三大桌面平台，它是付费应用，但目前可以无限期的试用。它支持多种编程语言的语法高亮、拥有优秀的代码自动完成功能，还拥有代码片段（Snippet ）的功能，可以将常用的代码片段保存起来，在需要时随时调用，极大的提高编程效率。
Sublime Text 3 强大功能的支撑在于它的插件机制，通过 Package Control 功能，开发者可以安装各种需要的插件，默认情况下，Sublime Text 3 没有集成 Package Control，我们需要自己安装。Package Control 有命令安装和手动安装两种方式，建议优先选择命令安装，可以参考官网安装指南。本文我们介绍命令安装方式，在 Sublime Text 3 中通过 View-&Show Console 打开命令行，执行如下命令：
import urllib.request,os, h =
'e5ee549c' + '8bc59f460fa163dafc88';
pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path();
urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) );
by = urllib.request.urlopen( 'http://packagecontrol.io/' +
pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest();
print('Error validating download (got %s instead of %s), please try
manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
上面的命令会创建安装所需的包目录，并下载 Package Control.sublime-package 到目录中。安装完成后，可以在 Preferences 菜单下找到 Package Settings 和 Package Control 两个子菜单。
在 Sublime Text 3 中，React Native 开发相关的插件主要有：
babel-sublime：支持 Javascript，ES6 和 JSX 语法高亮
react-native-snippets：支持 React Native 代码片段
在 Package Control 对话框中选择 Package Control:Install Packages 并在弹出的对话框中输入 Babel，即可找到 babel-sublime：
安装完成之后，需要启用它，如下图所示菜单操作即可：
react-native-snippets 插件同样通过 Package Control 进行安装，在 Install Package 对话框中搜索 react-native-snippets 安装即可：
安装完成之后，在代码编辑器中输入代码片段的缩写，例如我们新建一个名为 UserDetail.js 的文件，在其中输入 rncc 来创建一个 React Native 的类，智能提醒如下所示：
按下 Enter 键，插件自动生成如下样板代码，节省了很多手动输入所需花费的时间：
除了 rncc，其他常见的代码片段如下所示，更多内容参见插件的 Github 首页。
Visual Studio Code
Visual Studio Code 是微软推出的一个轻量级的开源 Web 集成开发环境，支持超过 30 种语言的开发，同时支持 Windows、Mac OS X、Linux 三大桌面平台。对于开发 React Native 而言，微软提供了专门的插件：vscode-react-native，按照官网的说明进行插件的安装即可。这个插件使得开发者可以在 VS Code 中调试 React Native 代码，快速执行 react-native 命令，以及对 React Native 的 API 具备智能提醒功能，如下所示：
Deco 是不久前刚发布的一个开源的专门为 React Native 打造的 IDE，目前只支持 Mac OS X 平台。它封装了 React Native 开发中经常会使用到的功能，例如集成 npm install 功能，集成 iPhone 和 iPad 模拟器，新建工程时快速生成 AwesomeProject，开发者不再需要通过执行 react-native init AwesomeProject 命令来生成了，关键是如果网络不好的话，免去了漫长的等待。
Deco 区别于其他 IDE 最显著的特性是支持常用控件的拖拽生成代码和可视化编辑，这些控件既有 React Native 原生控件，也有一些知名的开源控件，当然，目前 Deco 集成的数量还比较少，如下图所示，我们拖拽一个名为 Lightbox 的开源控件，如果是第一次使用，Deco 会执行 npm install react-native-lightbox 命令首先下载安装这个控件，然后在代码编辑区自动生成代码，同时在右边的属性编辑区中会有对应的属性值，修改属性编辑区的属性值，会实时反应到代码中。
更直观的感受可以自己下载 Deco 执行一下，或者到官网观看一个 30 秒的演示视频。
本文介绍了目前开发 React Native 的几款可选的主流 IDE，大家可以根据自己的具体情况进行选择，当然，团队开发中建议使用统一的 IDE。选择哪一款 IDE，首先取决于你们团队的硬件配置以及对付费软件使用的态度，然后才是 IDE 的功能特性。
如果你的团队都是使用 MacBook Pro 进行开发，那么上面五款 IDE 都可以使用，如果团队中既有 Windows 电脑，也有 Mac 电脑，那么 Atom ＋ Nuclide 和 Deco 就使用不了了。
如果你们团队能够负担起付费应用，那么 WebStorm 是不错的选择，特别对于之前是 Android 开发的同学来说，可以实现 Android Studio 和 WebStorm 的无缝衔接。
如果上面两个条件都不满足，那么就只剩下 Sublime Text 3 和 Visual Studio Code 可选了。从我们上面的介绍中可以了解到，这两款也都是非常强大的，如何选择取决于你自己。
VS Code（1.2.0）最新亮点和特性全介绍：/Updates#1.2
Atom 1.8和1.9 beta发布：http://blog.atom.io//atom-1-8-and-1-9-beta.html
React Native开发IDE安装及配置：http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E5%BC%80%E5%8F%91ide%E5%AE%89%E8%A3%85%E5%8F%8A%E9%85%8D%E7%BD%AE/
新编码神器Atom使用纪要：//-how-to-use-atom/
Visual Studio Code Guide[中文版]：http://i5ting.github.io/vsc/
Sublime Text 3 搭建 React.js 开发环境：/a/8071
用Sublime 3作为React Native的开发IDE：/p/2ddfff095e90
感谢对本文的审校。
给InfoQ中文站投稿或者参与内容翻译工作，请邮件至。也欢迎大家通过新浪微博（，），微信（微信号：）关注我们。
Author Contacted
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
InfoQ每周精要
订阅InfoQ每周精要，加入拥有25万多名资深开发者的庞大技术社区。
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
找回密码....
InfoQ账号使用的E-mail
关注你最喜爱的话题和作者
快速浏览网站内你所感兴趣话题的精选内容。
内容自由定制
选择想要阅读的主题和喜爱的作者定制自己的新闻源。
设置通知机制以获取内容更新对您而言是否重要
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。