2873人阅读
Android 开源项目分析（4）
用React Native编写跨平台APP
React Native 是一个编写iOS与Android平台实时、原生组件渲染的应用程序的框架。它基于React，Facebook的JavaScript的库，为的是构建用户接口，而并不是以浏览器为目标，它是以手机平台为目的。换句话说，如果你是一个web开发者，你可以使用React Native去编写干净、快速的移动APP，并且可以体会到熟悉的框架和单个的JavaScript的代码库。
在这之前，我们已经听到用诸如Cordova或者是Titanium这些框架的APP开发的承诺，那么使用React Native去开发APP究竟如何呢？在这篇文章中，我们将会探索React Native是什么，以及它究竟是如何工作的。然后，我们将会报道使用React Native去编写iOS以及Android的应用程序究竟是如何的，结尾，你讲会看到为什么说React Native是你的接下来的一个移动项目开发极其推荐的一个选择。
什么是React Native?
在我们准备重点介绍开发者的经验之前，我们先来说明一下React Native是什么，以及略微设计一下React Native是如何工作的。
它仅仅是React
React Native是一个为了编写用户交互接口的JavaScript的库。通常是用于web上。由Facebook开发，并于2013年开源。React已经见证了广泛的使用。React在领域内的使用相对来说是狭窄的，它仅仅关注它自己，通过渲染你的应用程序的用户交互的接口。与一般的大型的MVC风格的库呈分庭抗礼的局面。
开发者因为一系列的原因，对于React已经是趋之若鹜了。它是轻量级的，同时它提供了令人为之眼前一亮的行为，尤其是对于快速改变的数据。同时由于其自身的组件的结构，它鼓励你去写更加具有模块化的，可复用的代码。
要不是移动端，React Native果真仅仅是React。这里是有一些差别：你应当使用一个View组件而不是一个Div组件，应当使用一个Image标签，而不是img标签，开发者的绝大多数都是保持差不多相同的，当然了，如果具备一定的Objective-c或者是Java的语言知识，那就更好了。对于移动开发者，会有诸如这些机警的考虑（我是否做了多机型的适配工作？我的触摸点是否已经设置了足够大？）然而，React Native将会感觉完全熟悉，并且是舒适的，当然这是就那些已经学会如何在浏览器中用React做开发的开发者而言。
它确实是React
首当其冲，让人对React Native产生惊艳的感觉的是React Native的的确确是Native的。其余的针对移动端的JavaScript引擎是打包你的JavaScript代码进入到一个优化过的WebView当中，也许这些WebView也实现了某些本地化的UI的行为的接口，比如说动画，但是归根到底，你依旧写的是一个web app。
在React中，一个组件描述了自己的特性；React为你处理渲染。一个干净的抽象层将这两个函数隔绝开来。对于web端，为了渲染组件，React使用了标准的Html的标签，这个相同的抽象层，一般被理解为“Bridge”，能够使得React Native去触发iOS与Android上面的渲染的API，那就意味着，在iOS，你的React Native组件绘制真正的UI View，然而在Android上，它们将会绘制native View。
你将会写一些看上去比较糟糕，与标准的JavaScript、CSS、Html比较相像的代码。并非直接是向下编译成本地代码，React Native 拿到你的应用程序，使用宿主平台的JavaScript引擎运行它，同时不阻塞主UI主线程，这样，你将会得到原生的app的操作、动画、体验的效果，而不需要必须写成Objective-C或者Java形式的代码。其他的跨平台的app的开发的模式，比如说，Cordova或者是Titanium，绝对达不到与原生体验或者表现这种高度一致的效果。
一个比较好的开发者的体验
与标准的Android或者是iOS的开发相比，React Native提供了一种更加具有震撼效果的开发者的体验，因为你的应用程序几乎全部是基于JavaScript开发的，你将会获取到一系列的Web开发上面的优势，比如能够瞬间刷新你的应用程序去看到你的代码的改变。与花费长时间等待构建一个传统的移动app相比，React Native感觉简直就是上天的馈赠。
处理多个平台
令人充满感激的是，React Native支持多个平台. React Native的绝大多数的API都是跨平台的, 所以你仅仅需要编写一个React Native组件, 它将会无缝的工作于iOS与Android平台上。Facebook宣传它们的Ad Manager 应用程序 87%代码在两个平台重用, 然而我写了一个flashcard 应用程序更是没有一点平台相关的代码。如果你确实希望用到一些平台相关的代码–由于iOS与Android的两个平台的不同的交互，比如，或者是你希望重复利用一个平台的API的优势–那也是很容易的，React Native支持你去指定特定的平台的版本，对于每一个组件而言，然后，你可以将他们集成到你的React Native版本的应用程序中。
用React Native来进行开发
使用一个简单的JavaScript的代码库来进行写真正的iOS或者是Android的native 应用看上去是一件没有头脑的事情。那么用React Native来进行工作究竟是怎样的呢？
去开始开发React Native的应用程序，除了React Native以外，还需要安装一些针对iOS以及Android平台的一般性的依赖的组件。具体的可查询React Native的网站。建立React Native是简单的，如果你已经安装了一个最新版的node了，那么就可以使用npm install -g react-native-cli来安装React Native。
一旦你的这些依赖的组件已经安装，运行React Native 初始化项目的名称，将会自动生成一个React Native项目的模板。
一般性的React组件
一旦你的开发环境就绪, 是时候去写一些真正的应用程序。正如之前提到的，React Native真的仅仅是React，但是有几点不同。React Native组件对于浏览器而言，看上去更像是React组件，但是你的基本构建的块已经发生了变化，比如说类似Div、Img或者是p这样的标签。React Native为你提供了基本的组件，比如Text或者是View，在下面的例子中，就用到了基本的组件ScrollView、TouchableHighliht与Text组件，所有的这些，将会映射到Android与iOS指定的View上面去。利用它们创建一个滚动的View，伴随着合适的Touch处理是非常直截了当的：
var React = require('react-native');
var { ScrollView, TouchableHighlight, Text } = R
var TouchDemo = React.createClass({
render: function() {
&ScrollView&
&TouchableHighlight onPress={() =& console.log('pressed')}&
&Text&Proper Touch Handling&/Text&
&/TouchableHighlight&
&/ScrollView&
如果你还没有处理好html与javascript的语法混乱的时候，看上去有些混乱，React强烈建议你使用JSX，对于React Native，你也是别无选择。你的渲染的装饰，是与javascript共同搭配来控制它的行为，这经常会遭到入门者的强烈的反对。但是我强烈建议你给它一次机会。
因为React Native组件同React组件是非常的类似，使得React转换为React Native也是非常的简便。
为了使得绘制更加简单与有效, 同时鼓励便于管理的样式风格, React Native 实现了严格的CSS的子集。那就意味着你没有必要学习指定的平台的方式去设计你的View，但是这需要你花费一点时间去学习如何使用React Native的样式。
最大的不同是你没有必要担心指定的规则，因为样式的继承是相当的精简的，并且React Native使用的内联的样式的语法。
下面是一个样式表在React Native是如何被创建的例子：
var styles = StyleSheet.create({
container: {
marginTop: 30
使用内联语法，这个样式是这样被使用的：
&View style={styles.container}&
开始移动端的开发
React Native一个更加复杂的地方是开发环境的搭建。 当使用React Native来进行开发的时候，你需要具备所有移动端开发的必备的工具，以及JavaScript的编辑的工具：一个文本编辑器，以及Chrome的调试的工具。
对于iOS，这意味着Xcode的打开，同时包括iOS的模拟器。对于Android，并非是Android Studio，你将会使用命令行工具。最终，你将同时也需要React Native的包运行。你可以选择你的最喜欢的文本编辑器去使用去编辑你的JavaScript的代码。
这样的结果就是你需要有大量的工具在身边。有时候的确是感觉有太多的工具，桌面显的杂乱不堪，太多的桌面窗体打开的确是很烦人。另一方面，至少React Native并没有替你隐藏标准的APP开发的进程。
转向本地代码
React Native通过提供JavaScript接口给已经存在的平台的API，这意味着你可以向一般的React代码那样进行书写，并且React Native “Bridge”将会负责繁重的转换工作，但是如果桥接不完善的时候回发生什么呢？
不可避免，用一个新的框架，比如React Native，将会有一些API会不被支持调用，在这种情况下，可以书写本地代码，在宿主平台与JavaScript代码之间进行衔接沟通。比如：
#import "RCTBridgeModule.h"
@interface MyCustomModule : NSObject &RCTBridgeModule&
@implementation MyCustomModule
RCT_EXPORT_MODULE();
// Available as NativeModules.MyCustomModule.processString
RCT_EXPORT_METHOD(processString:(NSString *)input callback:(RCTResponseSenderBlock)callback)
callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"]]);
然后，从JavaScript模块中去使用你的native 模块，包含它就像使用另外的一个Library一样：
var React = require('react-native');
var { NativeModules, Text } = R
var Message = React.createClass({
getInitialState() {
return { text: 'Goodbye World.' };
componentDidMount() {
NativeModules.MyCustomModule.processString(this.state.text, (text) =& {
this.setState({text});
render: function() {
&Text&{this.state.text}&/Text&
你也许使用这个，当一个你需要的API不被支持，如果你希望将已经存在的oc代码或者是Java代码与React Native集成在一起，或者是你希望写一些高操作的函数去处理一些密集的图形处理。值得高兴的是，React Native给一个非常弹性的编写代码的方式，当你需要的时候，使用native module，并且这种方式是直截了当的。即使你之前从未与oc或者是Java打过交道，书写桥接代码是一个非常好的练习，在native移动app的开发过程中获取愉快的感受。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：31541次
排名：千里之外
原创：28篇
(1)(1)(6)(2)(1)(3)(5)(6)(1)(6)主题信息（必填）
主题描述（最多限制在50个字符）
申请人信息（必填）
申请信息已提交审核，请注意查收邮件，我们会尽快给您反馈。
如有疑问，请联系
CSDN &《程序员》编辑/记者，投稿&纠错等事宜请致邮
傻丫头和高科技产物小心翼翼的初恋
如今的编程是一场程序员和上帝的竞赛，程序员要开发出更大更好、傻瓜都会用到软件。而上帝在努力创造出更大更傻的傻瓜。目前为止，上帝是赢的。个人网站：。个人QQ群：、
个人大数据技术博客：关注社区微信公众号: PMvideo
【React Native】从源码一步一步解析它的实现原理
花了半个多月，把React Native源码看了一遍，大概的实现逻辑全看明白了，希望对想了解React Native实现原理的同学有所帮助，其实只要看懂文章的四幅图就明白它的原理了。
如果喜欢我的文章，可以关注我微博:,也可以来，了解下我们的iOS培训课程。后续还会更新更多内容,有任何问题，欢迎简书留言。。。
一、React Native背景
有没有朋友想过一个问题，为什么取名React Native?React是什么，Native又是什么？
React 是由Facebook推出的一个JavaScript框架，主要用于前段开发。
React 采用组件化方式简化Web开发
DOM:每个HTML界面可以看做一个DOM
原生的web开发方式，HTML一个文件，javaScript一个文件，文件分开，就会导致修改起来比较麻烦。
可以把一组相关的HTML标签和JavaScript单独封装到一个组件类中，便于复用，方便开发。
React 可以高效的绘制界面
原生的Web,刷新界面(DOM)，需要把整个界面刷新.
React只会刷新部分界面，不会整个界面刷新。
因为React独创了Virtual DOM机制。Virtual DOM是一个存在于内存中的JavaScript对象，它与DOM是一一对应的关系，当界面发送变化时，React会利用DOM Diff算法，把有变化的DOM进行刷新.
React是采用JSX语法，一种JS语法糖，方便快速开发。Native
想要了解Native是什么，需要了解下开发App有哪些开发模式，卖了一个馆子，请继续往下看。
二、常见的五种App开发模式
常见的开发模式有5种（Native App,Web App,Hybrid App,Weex,React Native）
Native App
Native App:指使用原生API开发App,比如iOS用OC语言开发
优点：性能高
缺点：开发维护成本高，养一个原生开发工程师需要很多钱，最重要iOS版本更新也成问题。
Web App:指使用Html开发的移动端网页App,类似微信小程序，整个App都是网页。
优点：用户不需要安装，不会占用手机内存
缺点：用户体验不好，不能离线，必须联网
Hybrid App
Hybrid App:混合开发模式，原生Api+Html共同开发，比如iOS,用html写好界面，用UIWebView展示。
优点:界面复用性强，一个界面，iOS和安卓都可以使用
缺点:相对于原生，性能相对有所损害
Weex:基于Vue(JS框架)的语法开发的App,底层会自动把JS代码解析成对应平台(iOS,安卓)的原生API，本质还是原生API开发，只不过表面是用Vue开发。
优点:可以做到一套代码，跨平台执行，底层会自动判断当前是哪个平台，转换为对应平台的原生API代码。
缺点：开源较晚，互联网上相关资料还比较少，社区规模较小
React Native
React Native:基于React开发的App
优点：跳过App Store审核，远程更新代码，提高迭代频率和效率，既有Native的体验，又保留React的开发效率。
缺点:对于不熟悉前端开发的人员上手比较慢，不能真正意义上做到跨平台，使用后，对app体积增加。
相信大多数人了解完React Native，越来越困惑了，那不是跟Native冲突了吗，Native是用原生Api开发,但是React Native又是用React开发。
要想彻底搞明白，需要了解React Native底层实现原理，又来了，想知道原理，继续往下看
三、React Native原理
React Native原理其实跟Weex差不多，底层也会把React转换为原生API
React Native和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
笔记社区是一个面向中高端IT开发者、程序员的知识共享社区，通过网络抓取与文章分类总结，由专家为用户提供高质量的专题文章系列。
原文链接：/p/5cc61ec04b39
声明：所有文章资源均从网络抓取，如果侵犯到您的著作权，请联系删除文章。联系方式请关注微信公众号PMvideo【锤子视频-程序员喜欢的短视频】，笔记社区开发者交流群 。
关注微信公众号:PMvideo