转载

ReacNative iOS源码解析(二)(未完成)

上一篇了解了 ReactNative是如何初始化一整套JS/OC通信机制,是如何相互通信的。通篇在讲JS/OC的通信的源代码流程,解释了为什么JS可以调用OC,为什么OC可以调用JS,这相互之间的通信,是如何通过代码进行控制与管理的

但是上一篇讲的内容有一点太抽象了,全都是底层通信,我们依然不知道:

上层的业务module是如何一步步用js搭建出一款app的

于是就进入了今天的环节,ReactNative中的Native,具体讲讲各种各样的Module是如何工作的,官方写好的Module以及我们可以自行扩展的Module

这里面分为2种module

  • 源生API模块 - RCTModuleData
  • 源生UI组件模块 - RCTComponentData

本文在源码分析部分,对照前文的代码流程可以加深理解

源生API型模块

什么叫APIModule?

APIModule是一种面向过程式的模块调用

JS只需要用一个模块名,一个API名,就能通过bridge找到对应的native的方法进行调用,JS Call OC Method

这个过程就是一个函数调用而已,不存在操作某个实例对象,只是传递参数,操作参数,处理逻辑,返回数值 OC Call JS(通过前文知道,bridge都是异步的,通过callback block返回)

如何使用APIModule呢?

APIModule的源码是如何运作的呢?

前文说过:

需要说明的是,RCTModuleData与Module不是一个东西,各类Module继承自NSObject,RCTModuleData内部持有的instance实例才是各类Module,因此这个环节是初始化RCTModuleData真正各类Module实例的环节

APIModule最后会被RCTModuleData给包装一下,统一被RCTBatchBridge维护的一个kev-value字典表来进行管理。

源生UI组件模块

什么叫UIModule?

UIModule是一种面向对象式的UI组件调用

每一个React的Component都是一个独立的UI组件,经过React的flexbox排版计算,有自己的大小,形状,样式。

每一个被RN渲染出来的RCTView都是继承自UIView的纯源生UI组件,他是根据React的Component的计算结果(大小,形状,样式)从而创建出来的。

RCTView与Component是一一对应的

当一个JS Component对象想要创建/改变自己的颜色,大小,样式的时候,就需要通过brdige找到自己所对应的那个RCTView,传递过去相应的数据参数,对RCTView生效传来的数据 JS CALL OC

当RCTView发生了触摸等源生事件响应的时候,通过brdige找到自己所对应的JS Component,把触摸的事件和数据参数传过去,让React.JS根据数据进行JS Component的重新布局或者界面响应

原文  http://awhisper.github.io/2016/07/02/ReactNative源码分析2/
正文到此结束
Loading...