本文标签：
一、React Native背景
有没有朋友想过一个问题，为什么取名React Native?，？
React 是由Facebook推出的一个JavaScript框架，主要用于前段开发。
React 采用组件化方式简化Web开发
DOM:每个HTML界面可以看做一个DOM
原生的web开发方式，HTML一个文件，javaScript一个文件，文件分开，就会导致修改起来比较麻烦。
可以把一组相关的HTML标签和单独封装到一个组件类中，便于复用，方便开发。
React 可以高效的绘制界面
原生的Web,刷新界面()，需要把整个界面刷新.
React只会刷新部分界面，不会整个界面刷新。
因为React独创了Virtual DOM机制。Virtual DOM是一个存在于内存中的对象，它与DOM是一一对应的关系，当界面发送变化时，React会利用DOM Diff算法，把有变化的进行刷新.
React是采用JSX语法，一种JS语法糖，方便快速开发。
想要了解Native是什么，需要了解下开发App有哪些开发模式，卖了一个馆子，请继续往下看。
二、常见的五种App开发模式
常见的开发模式有5种（）
Native App:指使用原生API开发App,比如iOS用OC语言开发
优点：性能高
缺点：开发维护成本高，养一个原生开发工程师需要很多钱，最重要iOS版本更新也成问题。
Web App:指使用Html开发的移动端网页App,类似微信小程序，整个App都是网页。
优点：用户不需要安装，不会占用手机内存
缺点：用户体验不好，不能离线，必须联网
Hybrid App
App:混合开发模式，原生Api+Html共同开发，比如iOS,用html写好界面，用展示。
优点:界面复用性强，一个界面，iOS和安卓都可以使用
缺点:相对于原生，性能相对有所损害
Weex:基于Vue(JS框架)的语法开发的App,底层会自动把JS代码解析成对应平台(iOS,安卓)的原生API，本质还是原生API开发，只不过表面是用Vue开发。
优点:可以做到一套代码，跨平台执行，底层会自动判断当前是哪个平台，转换为对应平台的原生API代码。
缺点：开源较晚，互联网上相关资料还比较少，社区规模较小
React Native
React Native:基于React开发的App
优点：跳过App Store审核，远程更新代码，提高迭代频率和效率，既有Native的体验，又保留React的开发效率。
缺点:对于不熟悉前端开发的人员上手比较慢，不能真正意义上做到跨平台，使用后，对app体积增加。
相信大多数人了解完，越来越困惑了，那不是跟Native冲突了吗，Native是用原生Api开发,但是React Native又是用React开发。
要想彻底搞明白，需要了解React Native底层实现原理，又来了，想知道原理，继续往下看
三、React Native原理
React Native原理其实跟Weex差不多，底层也会把React转换为原生API
和Weex区别在于跨平台上面，Weex只要写一套代码，React Native需要iOS,安卓都写，说明React Native底层解析原生API是分开实现的，iOS一套，安卓一套。
四、React Native如何把React转化为原生API
React Native会在一开始生成OC模块表，然后把这个模块表传入JS中，JS参照模块表，就能间接调用OC的代码。
相当于买了一个机器人（OC），对应一份说明书（模块表），用户（JS）参照说明书去执行机器人的操作。
五、React Native是如何做到JS和OC交互
iOS原生API有个JavaScriptCore框架，通过它就能实现JS和OC交互，想了解JavaScriptCore，请点击
1.首先写好JSX代码（React框架就是使用JSX语法）
2.把JSX代码解析成javaScript代码
3.OC读取JS文件
4.把javaScript代码读取出来，利用JavaScriptCore执行
5.javaScript代码返回一个数组，数组中会描述OC对象，OC对象的属性，OC对象所需要执行的方法，这样就能让这个对象设置属性，并且调用方法。
JS和OC交互.png
六、React Native启动流程(iOS)
1.创建RCTRootView -& 设置窗口根控制器的View,把RN的View添加到窗口上显示。
2.创建RCTBridge -& 桥接对象,管理JS和OC交互，做中转左右。
3.创建RCTBatchedBridge -& 批量桥架对象，JS和OC交互具体实现都在这个类中。
4.执行[RCTBatchedBridge loadSource] -& 加载JS源码
5.执行[RCTBatchedBridge initModulesWithDispatchGroup] -& 创建OC模块表
6.执行[RCTJSCExecutor injectJSONText] -& 往JS中插入OC模块表
7.执行完JS代码，回调OC，调用OC中的组件
8.完成UI渲染
React Native启动流程(iOS).png
七、React Native加载JS源码流程(iOS)
1.[RCTJavaScriptLoader loadBundleAtURL] -& 加载远程服务器中JS代码
2.attemptAsynchronousLoadOfBundleAtURL(C函数) -& 开启异步加载JS代码
3.[RCTBatchedBridge executeSourceCode:sourceCode] -& 让批量交接对象执行源代码
[RCTJSCExecutor executeApplicationScript] -& 交给JS执行者（RCTJSCExecutor）执行源码)
真正执行JS代码的是RCTJSCExecutor对象
5.[postNotificationName:RCTJavaScriptDidLoadNotification] -& 发送JS代码执行完成通知
6.RCTRootView监听到RCTJavaScriptDidLoadNotification通知
7.创建RCTRootContentView
8.获取RCTBridge中的RCTUIManager注册RCTRootView,并且记录RCTRootView，_viewRegistry
RCTUIManager:管理UI组件
_viewRegistry：保存所有注册的View
9.[RCTRootView runApplication:bridge] -& 通知JS运行App
10.[RCTBridge enqueueJSCall:@"AppRegistry"
method:@"runApplication"
args:@[moduleName, appParameters]
completion:NULL] -& 通过桥接对象让JS调用AppRegistry
11.[RCTBatchedBridge _actuallyInvokeAndProcessModule:module method:method arguments:args queue:RCTJSThread] -& 通过批量桥架让JS执行AppRegistry方法
12.[RCTJSCExecutor _executeJSCall:bridgeMethod arguments:@[module, method, args] unwrapResult:unwrapResult callback:onComplete] -& 让JS执行者调用JS代码
13.执行完JS代码，就能获取执行JS结果，是一个数组，OC需要做的事情都会保存到这个数组中
14.[RCTBatchedBridge _processResponse:json error:error] -& 处理执行完JS代码返回的结果对象
15.[RCTBatchedBridge handleBuffer] -& 处理JS返回的数据，JS会返回的方法调用数组：按顺序描述需要调用哪个对象的方法，一组调用包含（module，method，arguments）
16.[self callNativeModule:[moduleIDs[index] integerValue]
method:[methodIDs[index] integerValue]
params:paramsArrays[index]] -& 遍历数组，依次执行原生方法
注意：当前方法，在遍历数组中的代码块中执行，不只是执行一次.
React Native加载JS源码流程.png
八、React NativeUI控件渲染流程(iOS)
1.[RCTRootView runApplication:bridge] -& 通知JS运行App
2.[RCTBatchedBridge _processResponse:json error:error] -& 处理执行完JS代码(runApplication)返回的相应，包含需要添加多少子控件的信息。
3.[RCTBatchedBridge batchDidComplete] -& 批量桥架对象调用批量处理完成方法
4.[RCTUIManager batchDidComplete] -& RCTUIManager调用批量处理完成的方法，就会开始去加载rootView的子控件。
5.[RCTUIManager createView:viewName:rootTag:props] -& 通过JS执行OC代码，让UI管理者创建子控件View
通过RCT_EXPORT_METHOD宏定义createView这个方法
RCT_EXPORT_METHOD(createView:(nonnull NSNumber *)reactTag
viewName:(NSString *)viewName
rootTag:(__unused NSNumber *)rootTag
props:(NSDictionary *)props)
RCT_EXPORT_METHOD宏:会在JS中生成对应的OC方法，这样JS就能直接调用
注意每创建一个UIView,就会创建一个RCTShadowView，与UIView一一对应
RCTShadowView:保存对应UIView的布局和子控件,管理UIView的加载
6.[RCTUIManager _layoutAndMount] -& 布局RCTRootView和增加子控件
7.[RCTUIManager setChildren:reactTags:] -& 给RCTRootView对应的RCTRootShadowView设置子控件
注意：此方法也是JS调用OC方法
8.[RCTRootShadowView insertReactSubview:view atIndex:index++] -& 遍历子控件数组，给RCTRootShadowView插入所有子控件
9.[RCTShadowView processUpdatedProperties:parentProperties:] -& 处理保存在RCTShadowView中属性，就会去布局RCTShadowView对应UIView的所有子控件
10.[RCTView didUpdateReactSubviews] -& 给原生View添加子控件
11.完成UI渲染
React Native (UI控件渲染流程).png
九、React Native事件处理流程(iOS)
1.在创建RCTRootContentView的时候，内部会创建RCTTouchHandler
RCTTouchHandler:继承UIGestureRecognizer，也就是它就是一个手势
并且它会作为RCTRootContentView的手势，这样点击RCTRootContentView，就会触发RCTTouchHandler
RCTTouchHandler:内部实现了touchBegin等触摸方法，用来处理触摸事件
2.在创建RCTTouchHandler的时候，内部会创建RCTEventDispatcher
RCTEventDispatcher:用来把事件处理传递给JS的方法处理，也就是当UI界面产生事件，就会执行JS的代码处理。
3.通过RCTRootContentView截获点击事件
产生事件就会去触犯RCTRootContentView中的RCTTouchHandler对象。
4.当产生事件的时候,会执行[RCTTouchHandler touchBegin]
5.RCTTouchHandler的touch方法，会执行[RCTTouchHandler _updateAndDispatchTouches:eventName:]
内部会创建RCTTouchEvent事件对象
6.[RCTEventDispatcher sendEvent:event] -& 让事件分发对象调用发送事件对象
内部会把事件保存到_eventQueue（事件队列中）
7.[RCTEventDispatcher flushEventsQueue] -& 让事件分发对象冲刷事件队列，就是获取事件队列中所有事件执行
8.[RCTEventDispatcher dispatchEvent:event] -& 遍历事件队列，一个一个分发事件
分发事件的本质：就是去执行JS的代码，相应事件。
9.[RCTBatchedBridge enqueueJSCall:[[event class] moduleDotMethod] args:[event arguments]]; -& 让桥架对象调用JS处理事件
本质：就是产生事件调用JS代码
10.这样就能完成把UI事件交给JS代码相应
React Native (事件处理流程).png
写在最后：FOR Freedom 看看外边的世界，以及IT这一行，少不了去Google查资料，最后，安利一个加速器代理。，去Google查资料是绝对首选，连接速度快，使用也方便。我买的是99￥一年的，通过这个链接（）注册后输上 优惠码wh80，终身85折 ，平摊下来，每月才7块钱，特实惠。
本文标签：
原文地址：
相关阅读:《》
相关阅读:《》
相关阅读:《》
相关BLOG：
原文地址：
网站的维护离不开大家的支持鼓励，捐赠让我更有动力走的更远：
本博客所有文章如无特别注明均为原创。作者： ，复制或转载请以超链接形式注明转自
。原文地址《》
邮箱（必填）
网址（选填）输入关键字或相关内容进行搜索
尊敬的dcloud:能否分析一下React Native和h5plus的发展前景?
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. 理念的区别：\nreact native与HTML5无关。
它使用的语言还是javascript，但没有HTML和css。
可以把它称为no HTML5。
也就是使用js语言编程，但不使用浏览器引擎渲染，而是用独立v8引擎解析指定的js语法，然后由js操作绘制界面。
NO HTML5，这对于W3C和浏览器厂商，这是个有点打脸的事情。
这样广大开发者所学的HTML和css知识就用不到了。而HTML5Plus，看名字就知道是完全不同的路线。
5+是基于HTML5的现状，扩展和完善它的不足。
并且html5plus.org定义的扩展，也都会提交给W3C。
面对HTML5的不足，是打翻重来好，还是增强好？答案肯定是如果有增强的方案且效果一样，何必打翻重来。2. 平台支持\n目前react native在ios上仅支持ios7以上，Android仅支持Android4.1以上。以下的平台，会被转换成普通HTML5运行，效果很差。
而5+的平台支持是iOS5+和Android2.3+。
你的老板可能会问你为什么竞品app的次日留存是30%而你的app是20%，然后风投就投给了你的竞品，其实答案就在于你的app兼容的手机不够多。3. 编码的区别\n先说明一个概念，reactjs之前是facebook推出的一个前端框架。在前端框架层面定义了一套自己的api，然后用js再解析成dom。
刚刚推出的react native，原生实现了之前reactjs的api的解析，不再转换为dom。
之前reactjs前端框架出来时，业内争议就很大，很多人认为这种写法难以理解、不优雅。React.render(
&h1&Hello, world!&/h1&,
document.getElementById('example')
\n有点像使用innerHTML来创建dom，然后注意&h1的左边是没有引号包围，也就是说这个参数并不是字符串。真是把js的动态性发挥的淋漓尽致。
另外React Native的理念是Learn Once , Write Anywhere，ios、Android2个平台很多代码都无法统一。4. 引擎的体积\nreact native是自己的渲染引擎，不是webkit或任何我们熟悉的浏览器。相当于是facebook的定制浏览器。
引擎包的体积不小，hello world就是7M。而功能更多的5+基础基座只有几百K大小。原因是5+只是做强化，基础的HTML5处理是os做的。当然由此开发者也得注意编码时不要依赖太新的css，容易引发应用兼容性问题。5. 性能的区别\n其实不管是浏览器，还是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. 能力的区别\n原生能力调用这个就不是react native的擅长了，几乎没什么原生能力调用。需要原生工程师开发原生代码封装接口给js用。
5+ runtime有几十万原生api可以直接调用，能力远多于react native。大多数常见的功能api都封装在htmlplus的标准规范里，更多api可以灵活的使用Native.js操作，也有大量示例，无需原生工程师就能完成app。
所以目前react native常见的应用是hybrid，不太在意app体积的开发商使用rn做热更新。但没有原生工程师时，如果想纯js完成app，那react native是不行的。这对于创业公司就失去了吸引力，既然要用跨平台技术，就是要省成本，还得再雇佣原生工程师何必呢。7. 成熟度的区别\n开发者肯定喜欢坑少的产品。react native是2015上半年发布ios，下半年发布Android。HTML5+更早一年，是2014年初发布，基于5+已上线数万App，包括360、大众点评、京东、唯品会、携程等众多知名公司都在使用。坑不能说没有，但不会比react native多。8. 开发工具的区别\nfacebook没有提供配套的ide，开发调试非常麻烦。没有原生开发基础的话甚至可能搭不起来开发环境。
打包也不方便，没有mac电脑无法调试或打包ios应用9. 发展方向的区别\n作为一个开发者，我仍然认为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/ 推荐使用最新版流应用体验。
我相信大家很难感知到性能差别。
我还以为打开的知乎……
看了评论，怎么发现都是说5+不好的？只想说，不能为了所谓的技术而技术，你弄技术的目的是什么？如果简单的技术已经可以满足需求，干嘛还非要折腾，又不是推动技术进步的基础学科，多有点时间干点更多地事不更好吗？为毛现在it界非得各种语言乱飞，有用吗？就为了让人不明觉历？然后非得学所谓的新东西？绝大部分东东现有技术都能解决，弄点乱七八糟的出来骗小白。google自己放出来的新东西几年就扔掉的也不少了，打脸那是啪啪的，facebook有能如何？专心干点正事吧。真心希望DCloud的产品能继续进步！
官方在与硬件上的交互上一直没有解决方案！！5+能添加蓝牙的API就好了，也不用去学习原生开发了，话说官方真的不打算封装蓝牙吗？
我刚查了一下，没有发现facebook新推出把React Native编译成原生代码的功能。请问你在哪里看到的？
就像React JS只是一个View的部分，如果React Native 也只是View的部分，那也没啥存在的必要。毕竟抛除能力方面的要求，HTML+CSS在View端能力已经远超原生的页面布局了。
我还是那句话，适合自己的才是最好的。。。。。
还有就是React-Native 也是可以调用原生Api的哦!
官网文档里都写着呢。。
简单点来说,就是做了桥接,让css来格式化原生组件的外观,然后用RJX来控制.
由于没了DOM,所以体验感肯定没问题.
真是不思进取啊，为什么h5+没有火起来，还是性能和体验问题，既然你们早就意识到了，又何必急功近利的去做一些华而不实的东西呢？比如mui，你的性能都不行，还会用mui吗？我早就说过，把性能做好是当务之急，把mui做好想直接面向市场就可以了吗？不行。其实没有看到Facebook这个框架之前我都有这样的想法，只是个人能力不够而已。再说h5+，我觉得你们没有吧钢用到刀刃上，要承认没有珍惜这个时间点，你们完全可以早一点并行开发一套适合中国人的 语法和框架，去调用原生态控件。既然有人有理想，现在做出一个四不像的东西，感觉不可理解！等webview性能强大了，也不见得比原生态强，再说感觉webview什么时候才行呢？
有点同感，官方确实要考虑尽快多地封装一些常用接口API，能少去调用原生的最好，这样的话才能保证真正的跨平台能力和一致的使用体验，对不？
我们一直在思考的是HTML5+和Hbuilder这一套组合是否也可以开发出能安装在PC版Windows10上的软件？没完全想明白真正的技术障碍会在哪，哪位大拿指点指点？多谢。
别误导人好不，React Native 是编译成原生的代码运行的，所以为什么现在React Native还没有Android版的原因。
要回复问题请先或
浏览: 18442
关注: 16 人从零学React Native之01创建第一个程序 - 简书
从零学React Native之01创建第一个程序
上一篇文章介绍了React Native。大家应该对React Native有个初步的认识。
接下来我们就可以初始化一个React Native项目了。
打开命令窗口，进入我们希望建立的项目目录所在的父目录后，输入命令
react-native init AwesomeProject
其中AwesomeProject是项目的名称。默认init的版本都是ReactNative最新版本，目前最新版本0.32.0。可以通过项目目录下package.json文件查看.
初始化项目时间可能需要一段时间。
React Native在init时将项目需要用到的依赖包都下载到了当前目录下的node_modules目录中; Android运行程序在android目录下, 这个目录是可以导入Android Studio中进行调试。同样IOS运行程序在ios目录下。
以调试Android程序为例,在安装目录下，输入命令：react-native run-android，程序会自动运行到模拟器或真机中(记得打开USB调试,和电脑在一个wifi下),同时也会运行React packager服务窗口（类似Tomcat,程序在调试阶段不要关）。
如果手机已经装过程序, 只需要在命令窗口输入命令react-native start 打开React packager窗口,手机直接打开程序就可以了。
修改JSX代码,获取手机宽高
打开项目目录下的index.android.js(如果使用Android手机调测)或者index.ios.js(如果使用iPhone手机调测) 文件,可以对代码进行修改,比如我们经常需要计算手机的宽,高和屏幕密度.
* Sample React Native App
* /facebook/react-native
import React, { Component } from 'react';
AppRegistry,
StyleSheet,
} from 'react-native';
var Dimensions=require('Dimensions');//加载Dimensions模块
let PixelRatio=require('PixelRatio'); // 加载PixelRatio模块
////获取屏幕宽度,单位PT,单位不是实际的物理像素,而是逻辑像素, 类似于Android中dp或者ios中点
let totalWidth=Dimensions.get('window').
let totalHeight=Dimensions.get('window'). //获取屏幕高度
let pixelRatio=PixelRatio.get(); // 获取屏幕密度, 1PT等于多少实际像素
// 这是ES6语法 和java非常相似
class AwesomeProject extends Component {
render() {
// 打印日志, 可以通过chrome装插件进行查看
console.log('aaaa');
console.log('totalHeight is'+totalHeight);
console.log('aValue is:'+aValue);
console.log('the type of aValue is:'+typeof (aValue));
&View style={styles.container}&
&Text style={styles.welcome}&
pixelRatio={pixelRatio}
&Text style={styles.instructions}&
totalHeight={totalHeight}
&Text style={styles.instructions}&
totalWidth={totalWidth}
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5
AppRegistry.registerComponent('AwesomeProject', () =& AwesomeProject);
修改完了代码, 不需要重新部署, 可以直接Reload JavaScript,就马上看到对UI所做的变更。具体操作如下，通过摇晃手机(模拟器输入命令adb shell input keyevent 82)弹出调试菜单点击Reload即可,非常方便。
注意: 后面的在高版本上不需要了如果你有Chrome浏览器,可以给Chrome浏览器装个扩展包,进行调试。地址：
下载的程序拖入到Chrome扩展程序中,点击启用,允许访问网络
装好扩展包，当点击第二项调试的时候Chrome浏览器会自动启动,windows系统点击ctrl+shift+j 就来到调试页面,可以看到程序输出的日志。
Paste_Image.png
是不是非常方便啊。
React Native出来1年多了, 有好多编译器都支持了, 比如WebStorm，Sublime Text 3等等。可以参考
更多精彩请关注微信公众账号likeDev
likeDev.jpg
微信公众账号: likeDev
Android电子书:
CSDN博客地址:http://blog.csdn.net/yulianlin