@author ASCE1885的 Github
本文首发于 InfoQ 移动公众号：移动开发前线
由于潜在的商业目的，未经许可不开放全文转载许可，谢谢！
React Native 发布一年多了，有不少公司已经在线上中或小范围试水，或大范围应用，很多公司或都在为 React Native 的生态系统作出自己的贡献。React Native 的开发基本上是 script ＋ 系统原生开发语言（Java，Objective-C，Swift），原生语言的开发所用的 IDE 没有多余的选择， 平台只能使用 Android Studio（不要告诉我你还在使用 Eclipse），iOS 平台只能使用 XCode，而开发
的 IDE 选择就多了，从
官方推荐的 Atom＋Nuclide，到与 Android Studio 同系列的 Javascript IDE WebStorm，再到功能强大的 Sublime Text 3，以及推出的 Visual Studio Code 和 deco 专门为 React Native 打造的开源 IDE Deco，甚至 Vim，NodePad++ 等等，都可以用来开发 React Native，唯一的前提能够支持识别 Javascript 语法，识别 JSX 和 React Native API 的智能提醒。接下来我们就来介绍最常用的五款 IDE 的配置和选型。
Atom1＋Nuclide2
Atom 是由 Github 打造的下一代开发利器，支持 、Mac OS X、 三大桌面平台，免费且开源。Atom 支持各种的代码高亮，同时具备强大的代码补全功能，能够极大的提高编程效率，Atom 本质上是一个文本，而不是一个 IDE，因此在用来开发 React Native 时需要配合 Nuclide 一起使用。
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 之前，建议好好看下官网的说明3。
WebStorm 是著名的 JetBrains5 公司开发的号称最智能的 Javascript 集成开发环境，可以用于复杂的应用开发以及基于 Node.js6 的开发。如果你之前使用 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
为 JSX Harmony 即可在代码编辑器中识别 JSX，如下图所示：
当然，到这一步，只能使得编辑器识别 JSX 语法的 Javascript 代码，不会导致代码标红，但对于 React Native 的 API 名称，组件名称等并不会智能提醒和自动补全，因为目前 WebStorm 只支持 React 语法，还不支持 React Native 语法。为了解决这个问题，我们可以使用一个开源的插件：ReactNative-LiveTemplate7，按照 Github 上面的说明安装插件并重启 WebStorm 之后生效，这时在编辑器中输入 React Native 的组件或者 API 的首字母，会自动联想出相应的组件，如下所示，方便了很多。如果在使用过程中觉得这个插件有不完善的地方，你还可以在 Github 上面提交你的 Pull Request，贡献自己的一份力量。
Sublime Text 38
Sublime Text 3 是一款广泛使用的代码编辑器，支持 Windows、Mac OS X、Linux 三大桌面平台，它是付费应用，但目前可以无限期的试用。它支持多种编程语言的语法高亮、拥有优秀的代码自动完成功能，还拥有代码片段（Snippet
）的功能，可以将常用的代码片段保存起来，在需要时随时调用，极大的提高编程效率。
Sublime Text 3 强大功能的支撑在于它的插件机制，通过
Control 功能，开发者可以安装各种需要的插件，默认情况下，Sublime Text 3 没有集成 Package Control，我们需要自己安装。Package Control 有命令安装和手动安装两种方式，建议优先选择命令安装，可以参考官网安装指南9。本文我们介绍命令安装方式，在 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-sublime10：支持 Javascript，ES6 和 JSX 语法高亮
react-native-snippets11：支持 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 键，插件自动生成如下样板代码，节省了很多手动输入所需花费的时间：
'use strict';
import React, { Component } from 'react';
StyleSheet,
} from 'react-native';
class UserDetail extends Component {
render() {
const styles = StyleSheet.create({
export default UserD
除了 rncc，其他常见的代码片段如下所示，更多内容参见插件的 Github 首页。
Visual Studio Code12
Visual Studio Code 是微软推出的一个轻量级的开源 Web 集成开发环境，支持超过 30 种语言的开发，同时支持 Windows、Mac OS X、Linux 三大桌面平台。对于开发 React Native 而言，微软提供了专门的插件：vscode-react-native13，按照官网的说明进行插件的安装即可。这个插件使得开发者可以在 VS Code 中调试 React Native 代码，快速执行 react-native 命令，以及对 React Native 的 API 具备智能提醒功能，如下所示：
Deco 是不久前刚发布的一个开源的专门为 React Native 打造的 IDE，目前只支持 Mac OS X 平台。它封装了 React Native 开发中经常会使用到的功能，例如集成 npm install 功能，集成
和 iPad ，新建工程时快速生成 AwesomeProject，开发者不再需要通过执行 react-native init AwesomeProject 命令来生成了，关键是如果不好的话，免去了漫长的等待。
Deco 区别于其他 IDE 最显著的特性是支持常用控件的拖拽生成代码和可视化编辑，这些控件既有 React Native 原生控件，也有一些知名的开源控件，当然，目前 Deco 集成的数量还比较少，如下图所示，我们拖拽一个名为 Lightbox 的开源控件，如果是第一次使用，Deco 会执行 npm install react-native-lightbox 命令首先下载安装这个控件，然后在代码编辑区自动生成代码，同时在右边的属性编辑区中会有对应的属性值，修改属性编辑区的属性值，会实时反应到代码中。
更直观的感受可以自己下载 Deco 执行一下，或者到官网观看一个 30 秒的演示视频15。
本文介绍了目前开发 React Native 的几款可选的主流 IDE，大家可以根据自己的具体情况进行选择，当然，团队开发中建议使用统一的 IDE。选择哪一款 IDE，首先取决于你们团队的硬件配置以及对付费使用的态度，然后才是 IDE 的功能特性。
如果你的团队都是使用
Pro 进行开发，那么上面五款 IDE 都可以使用，如果团队中既有 Windows 电脑，也有 Mac 电脑，那么 Atom＋Nuclide 和 Deco 就使用不了了。
如果你们团队能够负担起付费应用，那么 WebStorm 是不错的选择，特别对于之前是 Android 开发的同学来说，可以实现 Android Studio 和 WebStorm 的无缝衔接。
如果上面两个条件都不满足，那么就只剩下 Sublime Text 3 和 Visual Studio Code 可选了。从我们上面的介绍中可以了解到，这两款也都是非常强大的，如何选择取决于你自己。
《VS Code（1.2.0）最新亮点和特性全介绍》16
《Atom 1.8和1.9 beta发布》17
《React Native开发IDE安装及配置》18
《新编码神器Atom使用纪要》19
《Visual Studio Code Guide[中文版]》20
《Sublime Text 3 搭建 React.js 开发环境》21
《用Sublime 3作为React Native的开发IDE》22
欢迎关注我的公众号，专注与原创或者分享 Android，iOS，ReactNative，Web 前端移动开发领域高质量，主要包括业界最新，前沿技术趋势，开源函数库与工具等。
https://atom.io/ ?https://nuclide.io/ ?https://nuclide.io/docs/quick-start/getting-started/ ?/webstorm/ ?/ ?https://nodejs.org/en/ ?/virtoolswebplayer/ReactNative-LiveTemplate ?/3 ?https://packagecontrol.io/installation#st3 ?/babel/babel-sublime ?/Shrugs/react-native-snippets ?/en-us/products/code-vs.aspx ?//vscode-react-native ?/ ?/ ?http://geek.csdn.net/news/detail/80215 ?http://geek.csdn.net/news/detail/80212 ?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/ ?//-how-to-use-atom/ ?http://i5ting.github.io/vsc/ ?/a/8071 ?/p/2ddfff095e90 ?966,690 三月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
React-Native痛点解析之开发环境搭建及扩展
React-Native痛点解析之开发环境搭建及扩展
日. 估计阅读时间:
道AI风控、Serverless架构、EB级存储引擎，尽在!
Author Contacted
相关厂商内容
相关赞助商
ArchSummit深圳-8日，深圳&华侨城洲际酒店，
告诉我们您的想法
允许的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
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。【React Native开发】React Native开发IDE安装及配置(2)
&#xe614;博客专家
【React Native开发】React Native开发IDE安装及配置(2)
React Native
转载请标明出处：本文出自:(一)前言&&&&&&&& & & & &【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:& & & & 上一讲我们已经对于在OS X系统上面对于React Native For Android的环境搭建以及第一个实例做了详细讲解。所谓工欲善其事，必先利其器，做React&Native开发也和其他应用开发一样，最好有一个比较好的IDE工具。那么这边比较推荐以下几款工具:sublime,webstorm以及官网推荐的Nuclide。下面我们主要讲解一下后面两款工具。& & & & &&刚创建的React Native技术交流3群(),React Native技术交流4群()，请不要重复加群！欢迎各位大牛,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),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)关注我的微博，可以获得更多精彩内容&
&#xe60e;10
我的热门文章
即使是一小步也想与你分享桥接android模块
& &新项目决定开始使用React Native，故也不得不学习新的知识。React Native简介此不做赘述，官网有详细的介绍。因RN出来的时间还算很短，所以很多东西并不是很完善...比如第三方库的丰富度上...
& &拿真实例子举例，我这边的截图功能采用的是这个第三方截图....但是忘源码一看，大写的懵&#36924;，Android竟然是暂不支持的
好的，那只能做扩展了，首先fork作者的开源项目，在其上编写Android的逻辑代码(实际上Android上的截图逻辑也较为简单，不知道为什么暂不支持)，先看文件目录
实际上用到的文件夹只有2个，ReactTestPackage.java和SnapshotterModule.java，那么进入其中看具体实现，首先是ReactTestPackage
方法足够简单，只需要在creatNativeModules里将模块注册进去就好了，然后是SnapshotterModule
至于具体的逻辑，不难，唯一需要提的一点就是&uiManager.addUIBlock和View dView = nativeViewHierarchyManager.resolveView(tag);
该段逻辑是为将RN的视图通过tag标识传给native层，并将此tag转化为View视图，从而实现将View视图截屏保留成图片。
最后就是项目的配置问题了，曾经折腾了我好久
在RN项目的配置中，需要在android模块的setting.gradle文件中将这个工程导入(工程模块都在node_modules中)，如下
include ':react-native-view-snapshot'
project(':react-native-view-snapshot').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-view-snapshot/android')
同时在app目录下的build.gradle文件下将该工程依赖进去
compile project(':react-native-view-snapshot')
做完这些还不够，最后还得在项目的package.json下更改文件路径，毕竟只是我fork的一个版本，不是原来的
如上配置完以后，打开git命令行，执行npm install命名，就会自动从我的仓库去下载安装
附上github地址，各位有兴趣的话也可以尝试fork，更改为自己的仓库
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4707次
排名：千里之外
原创：12篇
(2)(4)(1)(1)(1)(1)(2)(1)