“LearnOnce，WriteAnyWhere”...
“Learn Once，Write AnyWhere”
，React Native面世以来，确实让我们看到它所带来的各种便利，运用 React 和 Relay 提供的声明式编程模型，写JavaScript来构建 iOS 和 Android 应用，这种做法使得代码既精简又更容易理解和阅读，被不少人称作为目前最火的前端技术，同时这些代码还可以在多个平台共享，不用再开发时等待漫长的编译，加快了迭代速度。发布更快，细节更完美，运行更流畅的特点使不少喜欢尝鲜的程序员投入到这个领域。然而为了让用户更加流畅的使用应用，优化性能不可避免的会成为工作的一大重要部分，虽然官方一直尽可能的优化其性能为了能让其媲美原生App的速度，现实感觉有点不尽人意。
那么在实践中，我们会遇到哪些React Native的性能问题，以及有什么优化方案呢？
1、Navigator页面切换动画
场景：一旦用Navigator后，定义的切换动画会使JS线程出现严重的掉帧(卡顿现象)。
原因：NavigatorIOS的切换动画是跑在UI主线程上，而不是JS线程上的，所以不受JS线程上的掉帧影响。
2、数据类型
场景：基本上每个页面都需要加载和渲染数据，如果页面列表数据结构复杂,有时刷新数据时state中的未必有修改，但是遇到这样的语句this.setState({data:samedata}) ,界面却被重新render。
原因：这是react-native的生命周期，当你调用setState时，总是会触发render的方法。
3、数据加载
场景：在首屏页面加载时，加载前6分钟的数据分6页显示，并需保持当前选择页的时间的前6分钟，如果按照此场景开发所遇到问题是：首页加载时间太长，加载新数据时页面显示加载用户体验不顺畅。
原因：首页请求数据量过大,导致首屏页面加载很慢;后台数据更新时导致用户体验不顺畅。
4、组件响应速度
场景：一个页面包含多个类别的列表，由于列表都比较长，所以需要增加折叠功能并增加折叠动画，问题是当点击折叠或者展开按钮时出现延迟响应和动画掉帧的问题。
原因：在TouchableHighlight组件的onPress方法中执行了setState的操作，由于列表的对象相对来说比较复杂需要大量计算的工作，所以导致了延迟响应和JS线程的掉帧。
5、页面加载与显示
场景：某些页面需要访问一个或多个业务数据服务，虽然取数据是异步，但是页面总是会有一段较长的loading的时间。
原因：首屏所需的数据服务访问的等待数据时间较长。
以上的这些问题在React Native成长期这个阶段可以说是经常能够遇到，用好React Native还应该注意什么呢？应用性能管理大讲堂2016年终盛典携程网魏晓军老师将现场畅谈React Native性能优化之拆包技术及其实现原理。想要了解更多性能优化干货应用性能管理大讲堂2016年终盛典——心路，将迎来更全面的技术干货，更强大的讲师阵容，一起听互联网金融、O2O、游戏、OTA、电商、在线视频行业领域大咖们走过的路，踩过的坑，让2016那些坑成为过去，迎来一路畅通的2017！
地点：上海市张江高科科技园区 张江美居酒店
时间：11月26日周六 09：30
参与方式：免费报名
09：00-09：30
09：30-10：10
盛大游戏高级研究员 胥峰
《云和容器技术在游戏公司的探索和实践》
10：15-10：55
听云技术支持总监
《秒极时代下的全栈溯源》
11：00-11：40
饿了么移动技术部研发经理 张春林
《饿了么移动端性能优化实践》
11：45-12：00
12：00-13：00
13：00-13：40
蚂蚁金服高级研发工程师
《聊聊你不一定知道的JVM性能问题》
14：45-15：25
携程框架研发部高级研发经理 魏晓军
《React Native性能优化之拆包技术及其实现原理》
15：30-16：10
哔哩哔哩运维开发负责人
《Docker在B站的应用实战分享》
16：15-16：55
天天拍车运维总监 李强
《运维如何理解高并发》
17：00-17：15
盛大游戏高级研究员 胥峰
资深运维专家，有10年运维经验，在业界颇具威望和影响力。2011年加入盛大游戏，工作至今，曾参与盛大游戏多款大型端游和手游的运维，主导运维自动化平台的功能设计和实施。通过公众号“运维技术实践”发布 “网络分析技术实践”系列主题技术文章，引发万人阅读转发。拥有工信部认证高级信息系统项目管理师资格
演讲主题《云和容器技术在游戏公司的探索和实践》听云华东大区技术总监 王凡
20年IT运维管理经验；17年APM工作经验；中国最早一代从事APM方案咨询和服务。曾任美国冠群电脑（中国）有限公司（CA）业务技术架构师、惠普公司软件部技术顾问、深圳市华为技术有限公司高级产品经理；美国冠远科技有限公司资深产品经理；亿阳信通股份有限公司资深产品经理；合力思（中国）有限公司技术经理。
演讲主题《秒极时代下的全栈溯源》饿了么移动技术部研发经理 张春林
饿了么MT移动技术部研发经理，负责商户端和后台支撑的移动开发，对于系统框架以及trouble shooting有较为丰富的经验积累，兴趣点在于新技术的研究和需求预研。毕业于中山大学，6+移动开发经验，4+年研发管理经验，先后就职于TP-LINK，百度UUCUN事业部。
演讲主题《饿了么移动端性能优化实践》蚂蚁金服JVM专家
花名寒泉子，蚂蚁金服JVM专家，公众号“你假笨“博主
演讲主题《聊聊你不一定知道的JVM性能问题》携程框架研发部高级研发经理 魏晓军
携程框架研发部高级研发经理，负责携程无线前端框架团队。2011年加入携程，先后从事携程PC端前端框架、数据可视化框架、无线端前端框架等开发工作。 现负责携程无线前端框架的开发和性能优化工作以及React Native的研究和引入工作，也是《React Native入门与实战》的作者之一。
演讲主题《React Native性能优化之拆包技术及其实现原理》哔哩哔哩运维开发负责人
哔哩哔哩弹幕网（B站）运维开发负责人，曾就职猎豹移动任运维开发负责人。目前主要负责哔哩哔哩视频网站运维与运维技术栈建设，对于服务端负载均衡高可用，持续交付，集中式配置管理领域具有丰富经验。
演讲主题《Docker在B站的应用实战分享》天天拍车运维总监 李强
运维帮专家顾问团成员，先后在AdMaster、饿了么担任运维经理，现任天天拍车运维总监，主要负责天天拍车运维架构的管理、持续优化以及运维团队的建设、培养。拥有9年以上运维及管理经验。 同时作为国内最早一批思科网络模拟器的推广者、虚拟化先锋论坛的创始人，一直致力于网络模拟器使用的推广，为国内培养网络工程师尽一份力。
演讲主题《运维如何理解高并发》零距离接触技术专家暖心午餐+精彩互动环节丰厚的技术礼品
猛戳原文300个免费席位！快快报名！
手机浏览器扫一扫下载神器
安全&& 正版
微信扫一扫关注公众号
要回复文章请先或
微信扫一扫 进一步关注12166人阅读
ReactNative（3）
Navigator即导航器，通过导航器我们可以实现应用在不同的页面之间进行跳转。
导航器会建立一个路由栈，用来弹出，推入或者替换路由状态。该路由栈相当于android原生中使用的任务栈。
renderScene
该方法就相当于我们使用的startActivity方法了，我们可以在该方法中设置需要渲染的场景（跳转的页面），该方法接收两个参数（必要参数），route和navigator，其中route就是路由的页面，navigator是一个Navigator对象，因为Navigator对象拥有pop，push，jump等方法，我们需要导航器对象来实现页面的跳转。而路由route需要我们提前进行配置。
我们来看一下renderScene的使用：
renderScene={(route, navigator) =& {
let Component =
{...route.params} navigator={navigator} /&
通过上面的方法来实现页面的跳转，同时将导航器作为属性进行传递过去。之前说过，route需要进行配置，通过initialRoute方法来对我们的路由进行初始化，
如下所示：
initialRoute={{ name: defaultName, component: defaultComponent }}
initialRoute是一个对象，我们通过给对象设置名称和对应的组件完成route的初始化，即只要传入需要跳转的组件的名称和组建对象，即可在renderScene中完成页面的跳转。
再回头看renderScene方法，route参数就是我们通过initialRoute初始化的对象，我们通过ponent即可获得我们需要渲染（即跳转到）的对象，然后在return的时候返回这个对象完成页面的跳转。为了防止出现问题，我们加上ponent为空的判断，如果不为空，再进行渲染。
renderScene={(route, navigator) =& {
let Component =
if(ponent){
return &Component {...route.params} navigator={navigator} /&
configureScene
该方法用来设置指定路由对象的配置信息，从而改变场景的动画或者手势。
configureScene={(route) =& {
return Navigator.SceneConfigs.VerticalDownSwipeJ
例如通过如下的方法我们就可以对我们即将要跳转的界面设置跳转动画。
Navigator.SceneConfigs为我们提供了大量的跳转动画，具体可以参考如下文件。
MyProject\node_modules\react-native\Libraries\CustomComponents\Navigator\NavigatorSceneConfigs.js
这样我们就完成了在程序默认页面到我们自定义页面之间的跳转过程。
完整代码如下所示：
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
TextInput,
} from 'react-native';
import FirstPageComponent from './app/src/FirstPageComponent';
export default class MyProject ponent {
render() {
var defaultName = 'FirstPageComponent';
var defaultComponent = FirstPageC
&Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) =& {
return Navigator.SceneConfigs.FadeA
renderScene={(route, navigator) =& {
let Component =
if(ponent){
return &Component
navigator={navigator} /&
AppRegistry.registerComponent('MyProject', () =& MyProject);
其中FirstPageComponent是我们自定义的一个组件，没有添加功能，只放了一个Text，如下所示：
import React,{
} from 'react-native';
export default class FirstPageComponent ponent{
constructor(props){
super(props);
this.state = {};
&Text&我是默认页面&/Text&
如果我们现在想要实现一个从FirstPageComponent到另一个页面之间的跳转，那我们需要怎么做呢？
因为我们之前在页面跳转的时候将导航器对象作为属性传递给了我们的FirstPageComponent，那么我们此时就可以获取这个navigator对象，navigator中有很多方法可以供我们调用进行导航。
首先我们给创建一个可点击的区域包裹Text，这样点击Text就可以触发事件，如下所示，改造render，
render() {
onPress={this._pressButton.bind(this)}&
&点我跳转&
我们先不关注TouchableOpacity是什么，只知道他是一片可点击的区域，并且拥有点击事件即可。
然后我们实现_pressButton方法，如下所示：
_pressButtoon(){
const { navigator} = this.
if (navigator) {
navigator.push({
name:'SecondPageComonent',
component:SecondPageComonent,
我们从传递过来的属性中获取navigator，然后调用navigator的push方法，push方法接收的参数为route对象，我们定义route对象的名称和组件对象，将其放入路由栈，这样我们通过操控路由栈的方式实现了另一个页面的跳转。
这样我们改造后的FirstPageComponent如下所示：
import React,{
TouchableOpacity
} from 'react-native';
import SecondPageComonent from "./SecondPageComponent";
export default class FirstPageComponent ponent{
constructor(props){
super(props);
this.state = {};
_pressButtoon(){
const { navigator} = this.
if (navigator) {
navigator.push({
name:'SecondPageComonent',
component:SecondPageComonent,
&TouchableOpacity onPress={this._pressButtoon.bind(this)}&
&Text&点我跳转&/Text&
&/TouchableOpacity&
其中SecondPageComonent是我们定义的另一个组件，实现代码如下所示：
import React,{
TouchableOpacity,
} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
export default class SecondPageComponent ponent{
constructor(props){
super(props);
this.state = {};
_pressButton(){
const { navigator } = this.
if(navigator){
navigator.pop();
&TouchableOpacity onPress={this._pressButton.bind(this)}&
&Text&点我跳转回去&/Text&
&/TouchableOpacity&
在SecondPageComponent中，我们通过控制路由栈将页面出栈的方式pop()完成跳转回到第一个页面的功能。
我们发现，页面的跳转都是通过navigator对象的一系列方法通过对路由栈的操控来实现页面之间跳转加载的功能的，我们看一下导航器都有那些方法：
getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。
jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。
jumpForward() - 上一个方法不是调到之前的路由了么，用这个跳回来就好了。
jumpTo(route) - 跳转到已有的场景并且不卸载。
push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去
pop() - 跳转回去并且卸载掉当前场景
replace(route) - 用一个新的路由替换掉当前场景
replaceAtIndex(route, index) - 替换掉指定序列的路由场景
replacePrevious(route) - 替换掉之前的场景
immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
popToRoute(route) - pop到路由指定的场景，其他的场景将会卸载。
popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。
参数的传递
当我们从一个页面跳转到另一个页面的时候，总免不了需要进行参数的传递，那么我们怎么将参数传递到另一个页面呢？
我们可以通过push()方法将参数传递过去。
首先我们需要明确FirstPageComponent，MyProject和SecondPageComponent三者之间的关系，程序启动时首先会启动MyProject，然后看到在MyProject中有一个导航器，该导航器初始化路由的时候获取了我们的FirstPageComponent，将其解析为一个组件在renderScene的时候将其加载到页面上。我们再来看一下导航器加载的方法：
renderScene={(route, navigator) =& {
let Component =
if(ponent){
return &Component
navigator={navigator} /&
我们所有的组件都是通过导航器加载到页面上的，第一个页面是，第二个页面并不是由第一个页面启动的，而是有导航器控制路由栈来显示在页面上的，我们在renderScene是获取到第一个页面，并且将其渲染到屏幕上，我们在第一个页面中设置的push信息也是将信息传递给导航器的，那么我们就可以在这个时候将需要传递给Navigator，然后让其在传递给第二个页面，这样就可以完成参数的传递。
首先我们更改FirstPageComponent的按钮点击事件，如下所示：
navigator.push({
name:'SecondPageComonent',
component:SecondPageComonent,
message:"I am from FirstPageComponent",
然后在Navigator中获取，如下所示：
renderScene={(route, navigator) =& {
let Component =
if(ponent){
return &Component
{...route.params} navigator={navigator} /&
在这里就相当于将参数传递给了Navigator，展开成然后我们就可以在第二个页面中通过props.message获取到信息，如下所示,添加页面挂载时的方法，设置状态的方法将获取到的参数保存在state中：
componentDidMount(){
this.setState({
message:this.props.message,
如果当我们返回的时候需要携带参数，我们可以通过给navigator设置一个回调方法，用于给第一个页面设置信息，这样就可以完成返回时数据的传递了。
完整代码如下所示：
index.android.js
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
TextInput,
} from 'react-native';
import FirstPageComponent from './app/src/FirstPageComponent';
export default class MyProject ponent {
render() {
var defaultName = 'FirstPageComponent';
var defaultComponent = FirstPageC
&Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) =& {
return Navigator.SceneConfigs.FadeA
renderScene={(route, navigator) =& {
let Component =
if(ponent){
return &Component {...route.params} navigator={navigator} /&
AppRegistry.registerComponent('MyProject', () =& MyProject);
FirstPageComponent.js
import React,{
TouchableOpacity
} from 'react-native';
import SecondPageComonent from "./SecondPageComponent";
export default class FirstPageComponent ponent{
constructor(props){
super(props);
this.state = {
resultMessage:"hello",
_pressButtoon(){
var _this = this;
const { navigator} = this.
if (navigator) {
navigator.push({
name:'SecondPageComonent',
component:SecondPageComonent,
message:"I am from FirstPageComponent",
getResult:function(myMessage){
_this.setState({
resultMessage:myMessage,
&TouchableOpacity onPress={this._pressButtoon.bind(this)}&
&Text&{this.state.resultMessage}&/Text&
&/TouchableOpacity&
SecondPageComponent.js
import React,{
TouchableOpacity,
} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
export default class SecondPageComponent ponent{
constructor(props){
super(props);
this.state = {
message:"",
componentDidMount(){
this.setState({
message:this.props.message,
_pressButton(){
const { navigator } = this.
if(this.props.getResult){
this.props.getResult("This is from SecondPageComponent");
if(navigator){
navigator.pop();
&TouchableOpacity onPress={this._pressButton.bind(this)}&
&Text&{this.state.message}&/Text&
&/TouchableOpacity&
最终效果如下所示：
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：35365次
排名：千里之外
原创：19篇
评论：12条
(3)(5)(5)(4)(2)ReactNative页面跳转实例代码
作者：嘆世殘者——華帥
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了ReactNative页面跳转的代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
效果图如下所示：
进入工作目录，运行
react-native init NavigatorProject
创建项目NavigatorProject
import React, { Component } from 'react';
AppRegistry,
StyleSheet,
TouchableHighlight,
} from 'react-native';
class navigatorProject extends Component{
let defaultName = 'firstPageName';
let defaultComponent = FirstPageC
&Navigator
initialRoute = {{name: defaultName, component: defaultComponent}}　　//初始化导航器Navigator,指定默认的页面
configureScene = {
(route) =& {
return Navigator.SceneConfigs.FloatFromR　　//配置场景动画，页面之间跳转时候的动画
renderScene = {
(route, navigator) =&{
let Component =
return &Component{...route.params} navigator = {navigator} /&　　//渲染场景
//第一个页面
class FirstPageComponent extends Component{
clickJump(){
const{navigator} = this.
if(navigator){
navigator.push({　　//navigator.push 传入name和你想要跳的组件页面
name: "SecondPageComponent",
component: SecondPageComponent
&View style = {styles.container}&
&Text&我是第一个页面&/Text&
&TouchableHighlight
underlayColor = "rgb(180,135,250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 8,
backgroundColor: "#F30"
onPress = {this.clickJump.bind(this)}&
&Text&点击进入第二个页面&/Text&
&/TouchableHighlight&
//第二个页面
class SecondPageComponent extends Component{
clickJump(){
const{navigator} = this.
if(navigator){
navigator.pop();　　//navigator.pop 使用当前页面出栈, 显示上一个栈内页面.
&View style = {styles.container}&
&Text&我是第二个页面&/Text&
&TouchableHighlight
underlayColor = "rgb(180, 135, 250)"
activeOpacity = {0.5}
style = {{
borderRadius: 8,
padding: 8,
marginTop: 5,
backgroundColor: "#F30"
onPress = {this.clickJump.bind(this)}&
&Text&点击返回第一个页面&/Text&
&/TouchableHighlight&
const styles = StyleSheet.create({
　container: {
　　flex: 1,
　　justifyContent: 'center',
　　alignItems: 'center',
　　backgroundColor: '#FFFFFF',
AppRegistry.registerComponent('navigatorProject', () =& navigatorProject);
以上所述是小编给大家介绍的ReactNative页面跳转实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具966,690 六月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
React Native 开发之 IDE 选型和配置
React Native 开发之 IDE 选型和配置
日. 估计阅读时间:
智能化运维、Serverless、DevOps......2017年有哪些最新运维技术趋势？!
相关厂商内容
相关赞助商
CNUTCon全球运维技术大会，9月10日-9月11日，上海&光大会展中心大酒店，
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添加至白名单，感谢您的理解与支持。