RN通信机制和渲染流程

前言

React Native与传统的HybirdApp最大区别就是抛开WebView&＃xff0c;使用JSC&＃43;原生组件的方式进行渲染&＃xff0c;那么整个App启动/渲染流程又是怎样的呢&＃xff1f;

一、整体框架

RN 这套框架让 JS开发者可以大部分使用JS代码就可以构建一个跨平台APP&＃xff1b;

React 与 React native 的原理是相同的,都是由 Javascript 实现的虚拟DOM 来驱动界面 View 的渲染,只不过 React.js 驱动 HTML DOM 的渲染, RN 是驱动 ios/android 原生组件的渲染

二、前端页面开发及渲染

1、js入口

import { AppRegistry } from "react-native";
import App from "./src/index";AppRegistry.registerComponent("Wubacst", () &＃61;> App);


把当前APP的对象注册到AppRegistry组件中&＃xff0c; AppRegistry组件是js module

2、RN AppRegistry

• AppRegistry 是运行所有 React Native 应用程序的 JS 入口点
• 应用程序跟组件需要通过 AppRegistry.registerComponent 来注册它们自身
• 然后本地系统就可以加载应用程序的包&＃xff0c;再然后当 AppRegistry.runApplication准备就绪后就可以真正的运行该应用程序了
• AppRegistry 在 require 序列里是 required&＃xff0c;确保在其他模块被需求之前 JS 执行环境已经被 required

AppRegistry常用方法

//static静态方法,用来注册配置信息
static **registerConfig**(config: Array) //static静态方法,注册组件
static **registerComponent**(appKey: string, getComponentFunc: Function) //static静态方法,注册线程
static **registerRunnable**(appKey: string, func: Function) //static静态方法,进行运行应用
static **runApplication**(appKey: string, appParameters: any)

runApplication: function runApplication(appKey, appParameters) {var msg &＃61; &＃39;Running application "&＃39; &＃43; appKey &＃43; &＃39;" with appParams: &＃39; &＃43; JSON.stringify(appParameters) &＃43; &＃39;. &＃39; &＃43; &＃39;__DEV__ &＃61;&＃61;&＃61; &＃39; &＃43; String(__DEV__) &＃43; &＃39;, development-level warning are &＃39; &＃43; (__DEV__ ? &＃39;ON&＃39; : &＃39;OFF&＃39;) &＃43; &＃39;, performance optimizations are &＃39; &＃43; (__DEV__ ? &＃39;OFF&＃39; : &＃39;ON&＃39;);infoLog(msg);BugReporting.addSource(&＃39;AppRegistry.runApplication&＃39; &＃43; runCount&＃43;&＃43;, function () {return msg;});invariant(runnables[appKey] && runnables[appKey].run, &＃39;Application &＃39; &＃43; appKey &＃43; &＃39; has not been registered.\n\n&＃39; &＃43; "Hint: This error often happens when you&＃39;re running the packager " &＃43; &＃39;(local dev server) from a wrong folder. For example you have &＃39; &＃43; &＃39;multiple apps and the packager is still running for the app you &＃39; &＃43; &＃39;were working on before.\nIf this is the case, simply kill the old &＃39; &＃43; &＃39;packager instance (e.g. close the packager terminal window) &＃39; &＃43; &＃39;and start the packager in the correct app folder (e.g. cd into app &＃39; &＃43; "folder and run &＃39;npm start&＃39;).\n\n" &＃43; &＃39;This error can also happen due to a require() error during &＃39; &＃43; &＃39;initialization or failure to call AppRegistry.registerComponent.\n\n&＃39;);SceneTracker.setActiveScene({name: appKey});runnables[appKey].run(appParameters);}


3、ReactDOM.render

ReactDOM.render是React的最基本方法用于将模板转为HTML语言&＃xff0c;并插入指定的DOM节点。

ReactDOM.render(template,targetDOM),该方法接收两个参数:

• 第一个是创建的模板
• 第二个参数是插入该模板的目标位置

ReactDOM.render(,document.getElementById(&＃39;app&＃39;)
);


4、RN组件的生命周期

像 Android和iOS 开发一样&＃xff0c;React Native&＃xff08;RN&＃xff09; 中的组件也有生命周期&＃xff08;Lifecycle&＃xff09;&＃xff1b;
当应用启动&＃xff0c;React Native在内存中维护着一个虚拟DOM&＃xff0c;组件的生命周期就是指组件初始化并挂载到虚拟DOM为起始&＃xff0c;到组件从虚拟DOM卸载为终结。生命周期的方法就是组件在虚拟DOM中不同状态的描述。

组件的生命周期分为三个阶段&＃xff1a;

• 挂载&＃xff08;mounting
• 更新&＃xff08;updating&＃xff09;
• 卸载&＃xff08;Unmounting

组件挂载

挂载指的是组件的实例被创建并插入到DOM中&＃xff0c;挂载会调用如下方法。
挂载阶段调用方法&＃xff1a;

constructor(props) {super(props);this.state &＃61; {text: &＃39;构造方法&＃39;};
}


constructor是RN组件的构造方法&＃xff0c;它在RN组件被加载前先被调用。当我们的组件继承自React.Component时&＃xff0c;需要在构造方法中最先调用super(props)。如果不需要初始化state&＃xff0c;则不需要实现构造方法。

componentWillMount()


componentWillMount方法在挂载前被立即调用。它在render方法前被执行&＃xff0c;因此&＃xff0c;在componentWillMount方法中设置state并不会导致重新被渲染。它只会被执行一次

render()


渲染&＃xff0c;render方法中不应该修改组件的props和state&＃xff1b;render方法在更新阶段也会被调用&＃xff0c;前提是shouldComponentUpdate方法返回true。

componentDidMount()


componentDidMount方法在组件被挂载后立即调用&＃xff0c;在render方法后被执行

可以在这个方法中获取其中的元素或者子组件&＃xff0c;需要注意的是&＃xff0c;子组件的componentDidMount方法会在父组件的componentDidMount方法之前调用

如果需要从网络加载数据显示到界面上&＃xff0c;最好在这里进行网络请求。在componentDidMount方法中设置state将会被重新渲染。

组件更新

改变props或者state时可以导致更新&＃xff0c;当一个组件被重新渲染时&＃xff0c;会调用如下方法。

componentWillReceiveProps(nextProps)


componentWillReceiveProps方法会在挂载的组件接收到新的props时被调用&＃xff0c;它接收一个Object类型参数nextProps&＃xff0c;表示新的props。通常在这个方法中接收新的props值&＃xff0c;并根据props的变化&＃xff0c;通过调用 this.setState() 来更新组件state&＃xff0c;this.setState()不会触发 render方法的调用。

在挂载的过程中&＃xff0c;初始的props并不会触发调用componentWillReceiveProps方法&＃xff0c;这个方法只会在组件中的props更新时被调用&＃xff0c;另外&＃xff0c;调用this.setState()也不会触发调用componentWillReceiveProps方法。

shouldComponentUpdate(nextProps, nextState)


当组件接收到新的props和state时&＃xff0c;shouldComponentUpdate方法被调用&＃xff0c;它接收两个Object参数&＃xff0c;nextProps是新的props&＃xff0c;nextState是新的state。

shouldComponentUpdate方法默认返回true&＃xff0c;用来保证数据变化时&＃xff0c;组件能够重新渲染。你也可以重载这个方法&＃xff0c;通过检查变化前后props和state&＃xff0c;来决定组件是否需要重新渲染。如果返回false&＃xff0c;则组件不会被重新渲染&＃xff0c;也不会调用本方法后面的componentWillUpdate和componentDidUpdate方法。

componentWillUpdate(nextProps, nextState)


如果组件props或者state改变&＃xff0c;并且此前的shouldComponentUpdate方法返回为 true&＃xff0c;则会调用该方法。componentWillUpdate方法会在组件重新渲染前被调用&＃xff0c;因此&＃xff0c;可以在这个方法中为重新渲染做一些准备工作。需要注意的是&＃xff0c;在这个方法中&＃xff0c;不能使用 this.setState 来更改state&＃xff0c;如果想要根据props来更改state&＃xff0c;需要在componentWillReceiveProps方法中去实现&＃xff0c;而不是在这里

componentDidUpdate(prevProps, prevState)


组件重新渲染完成后会调用componentDidUpdate方法。两个参数分别是渲染前的props和渲染前的state。这个方法也适合写网络请求&＃xff0c;比如可以将当前的props和prevProps进行对比&＃xff0c;发生变化则请求网络。

组件卸载

卸载就是从DOM中删除组件&＃xff0c;会调用如下方法

componentWillUnmount()


componentWillUnmount方法在组件卸载和销毁之前被立即调用。可以在这个方法中执行必要的清理工作&＃xff0c;比如&＃xff0c;关掉计时器、取消网络请求、清除组件装载中创建的DOM元素等等。

三、React Native如何把React转化为元素的API

React Native会在一开始生成OC模块表&＃xff0c;然后把这个模块表传入JS中&＃xff0c;JS参照模块表&＃xff0c;就能间接调用OC的代码。

相当于买了一个机器人&＃xff08;OC&＃xff09;&＃xff0c;对应一份说明书&＃xff08;模块表&＃xff09;&＃xff0c;用户&＃xff08;JS&＃xff09;参照说明书去执行机器人的操作

四、React Native如何如何做到JS和OC交互

iOS原生API有个JavascriptCore框架&＃xff0c;通过它就能实现JS和OC交互

1. 首先写好前端jsx代码
2. 把jsx代码解析成Javascript代码
3. OC读取JS文件
4. 把Javascript读取出来&＃xff0c;利用JavascriptCore执行
5. Javascript代码返回一个数组&＃xff0c;数组中会描述OC对象&＃xff0c;OC对象的属性&＃xff0c;OC对象所需要执行的方法&＃xff0c;这样就能让这个对象设置属性&＃xff0c;并且调用方法

五、RN启动流程&＃xff08;iOS&＃xff09;

流程图&＃xff1a;

1、创建RCTRootView

设置窗口根控制器的View,把RN的View添加到窗口上显示

我们使用RCTRootView将React Natvie视图封装到原生组件中。RCTRootView是一个UIView容器&＃xff0c;承载着React Native应用。同时它也提供了一个联通原生端和被托管端的接口

RCTRootView *rootView &＃61; [[RCTRootView alloc] initWithBridge:bridgemoduleName:&＃64;"Wubacst"initialProperties:props];


import { AppRegistry } from "react-native";
import App from "./src/index";AppRegistry.registerComponent("Wubacst", () &＃61;> App);


2、创建RCTBridge

桥接对象,管理JS和OC交互&＃xff0c;做中转左右

1、RCTBridgeModule
在React Native中&＃xff0c;如果实现一个原生模块&＃xff0c;需要实现RCTBridgeModule”协议

2、RCT_EXPORT_MODULE()
如果我们实现了RCTBridgeModule协议&＃xff0c;我们的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定&＃xff0c;默认就会使用这个Objective-C类的名字

3、RCT_EXPORT_METHOD()
与此同时我们需要声明RCT_EXPORT_METHOD()宏来实现要给Javascript导出的方法&＃xff0c;否则React Native不会导出任何方法。

native方法注册示例&＃xff1a;

&＃64;implementation LoadPageManager
RCT_EXPORT_MODULE()// RN跳转Native //
RCT_EXPORT_METHOD(showCSTNativePage:(NSDictionary*)commonParamesdisappearCallBack:(RCTResponseSenderBlock) disappearCallBack)
{NSLog(&＃64;"start load");NSString* pagePath &＃61; [commonParames objectForKey:&＃64;"pagePath"];NSDictionary* aParams &＃61; [commonParames objectForKey:&＃64;"params"];NSString* aPostMessageEvent &＃61; [commonParames objectForKey:&＃64;"postMessageEvent"];NSInteger isCloseParent &＃61; [(NSNumber*)[commonParames objectForKey:&＃64;"isDestoryBeforePage"] intValue];NSString* aAppearEvent &＃61; [commonParames objectForKey:&＃64;"appearEvent"];NSMutableDictionary* aTmpDic &＃61; [NSMutableDictionary dictionaryWithDictionary:commonParames];// 以下代码不要删除 //NSMutableDictionary* aDic;if (aParams){aDic &＃61; [NSMutableDictionary dictionaryWithDictionary:aParams];}if (aPostMessageEvent){[aDic setValue:aPostMessageEvent forKey:PostEvent];}if (aAppearEvent){[aDic setValue:aAppearEvent forKey:AppearEvent];}// 以下代码不要删除 //if (disappearCallBack){[aTmpDic setValue:disappearCallBack forKey:DisappearCallBack];}if (isCloseParent){[self RNBackAction];}// 转一下子为了和之前Hybrid 一致 //pagePath &＃61; [pagePath stringByReplacingOccurrencesOfString:&＃64;"_" withString:&＃64;"/"];aDic &＃61; [self adpatToHybridParmers:[NSMutableDictionary dictionaryWithDictionary:aTmpDic]]; // 后期重做考虑去掉 //// 转一下子为了和之前Hybrid 一致 //dispatch_async(dispatch_get_main_queue(), ^{[[CHRDispatcher sharedDispatcher] invokeForPath:pagePath andParams: aDic];});
}


js调用示例&＃xff1a;

import { NativeModules, Platform } from "react-native";
import checker from "../lib/checker";
let pageManager &＃61; NativeModules.LoadPageManager;
function nativeBridge(type, params, disappearCallBack) {pageManager[type](params, disappearCallBack);
}
//RN跳转native页面
function jumpNativePage({ pagePath, isDestoryBeforePage &＃61; 0, jumpParameter, appearEvent, postMessageEvent, ...other },disappearCallBack &＃61; (error, nativeData) &＃61;> {} //回调函数
) {const error &＃61; checker(arguments,[{pagePath: "s|r",isDestoryBeforePage: "b",jumpParameter: "o",appearEvent: "s",postMessageEvent: "s",...other},"f"],"jumpNativePage");// 线上环境报错不调起 Native 的 APIif (error &＃61;&＃61;&＃61; "error") {return error;}let param &＃61; {pagePath,jumpParameter,appearEvent,postMessageEvent, //事件名称isDestoryBeforePage, //0:不关闭&＃xff0c;1关闭...other};nativeBridge("showCSTNativePage", param, disappearCallBack);
}


3、创建RCTBatchedBridge

批量桥接对象&＃xff0c;JS和OC交互具体实现都在这个类中

4、执行[RCTBatchedBridge loadSource]

加载JS源码

5、执行[RCTBatchedBridge initModulesWithDispatchGroup

创建OC模块表

6、执行[RCTJSCExecutor injectJSONText]

往JS中插入OC模块表

7、执行完JS代码&＃xff0c;回调OC&＃xff0c;调用OC中的组件

8、完成UI渲染

六、RN UI控件渲染流程

1、RCTRootView runApplication:bridge

通知JS运行App

2、RCTBatchedBridge _processResponse:json error:error

处理执行完JS代码(runApplication)返回的相应&＃xff0c;包含需要添加多少子控件的信息。

3、RCTBatchedBridge batchDidComplete

RCTUIManager调用处理完成的方法&＃xff0c;就会开始去加载rootView的子控件。

4、RCTUIManager createView:viewName:rootTag:props

通过JS执行OC代码&＃xff0c;让UI管理者创建子控件View

通过RCT_EXPORT_METHOD宏定义createView这个方法

RCT_EXPORT_METHOD(createView:(nonnull NSNumber *)reactTagviewName:(NSString *)viewNamerootTag:(nonnull NSNumber *)rootTagprops:(NSDictionary *)props)


RCT_EXPORT_METHOD宏:会在JS中生成对应的OC方法&＃xff0c;这样JS就能直接调用

注意每创建一个UIView,就会创建一个RCTShadowView&＃xff0c;与UIView一一对应

RCTShadowView:保存对应UIView的布局和子控件,管理UIView的加载

5、[RCTUIManager _layoutAndMount]

布局RCTRootView和增加子控件

6、[RCTUIManager setChildren:reactTags:]

给RCTRootView对应的RCTRootShadowView设置子控件

注意&＃xff1a;此方法也是JS调用OC方法

7、[RCTRootShadowView insertReactSubview:view atIndex:index&＃43;&＃43;]

遍历子控件数组&＃xff0c;给RCTRootShadowView插入所有子控件

8、[RCTShadowView processUpdatedProperties:parentProperties:]

处理保存在RCTShadowView中属性&＃xff0c;就会去布局RCTShadowView对应UIView的所有子控件

9、[RCTView didUpdateReactSubviews]

给原生View添加子控件

10、完成UI渲染

七、RN通信机制

OC生成一张模块配置表&＃xff0c;包含所有模块和模块里的方法&＃xff0c;根据特定的标识宏&＃xff08;RCT_EXPORT_MODULE()&＃xff09;&＃xff0c;将可以暴露的方法暴露给JS。

OC-JS交互流程&＃xff1a;

1. js调用OC模块暴露出来的方法
2. 把调用方法分解为ModuleName、MethodName、arguments&＃xff0c;在丢给MessageQueue处理
3. 把js的callback函数缓存在MessageQueue的一个成员变量里面&＃xff0c;同时生成一个CallbackID来代表callback&＃xff1b;在通过保存在MessageQueue的模块配置表把ModuleName、MethodName转成ModuleID、MethodID
4. 把ModuleID、MethodID、CallbackID和其他参数传给OC&＃xff08;JavascriptCore&＃xff09;
5. OC接到消息&＃xff0c;通过模块配置表拿到对于的模块和方法
6. RCTModuleMethod对js传过来的参数进行处理
7. OC模块方法执行完&＃xff0c;执行block回调
8. 调用第6步中RCTModuleMethod生成的block
9. block带着CallbackID和block传过来的参数去掉用js里的MessageQueue方法invokeCallbackAndReturnFlushedQueue
10. MessageQueue通过CallbackID找到相应的js的callback方法
11. 调用callback方法&＃xff0c;并把OC带过来的参数一起传过去完成回调

React Native用iOS自带的JavascriptCore作为JS的解析引擎&＃xff0c;但并没有用到JavascriptCore提供的一些可以让JS与OC互调的特性&＃xff0c;而是自己实现了一套机制&＃xff0c;这套机制可以通用于所有JS引擎上&＃xff0c;在没有JavascriptCore的情况下也可以用webview代替&＃xff0c;实际上项目里就已经有了用webview作为解析引擎的实现&＃xff0c;应该是用于兼容iOS7以下没有JavascriptCore的版本

通信过程

所谓的通信其实就是js和oc两者如何相互调用传参等

• 程序一开始native会调用js的RCTDeviceEventEmitter.emit方法
• 分别发送’appStateDidChange’ 和’networkStatusDidChange’两个事件

iOS端&＃xff1a;
if (![connectionType isEqualToString:self->_connectionType] ||![effectiveConnectionType isEqualToString:self->_effectiveConnectionType] ||![status isEqualToString:self->_statusDeprecated]) {self->_connectionType &＃61; connectionType;self->_effectiveConnectionType &＃61; effectiveConnectionType;self->_statusDeprecated &＃61; status;[self sendEventWithName:&＃64;"networkStatusDidChange" body:&＃64;{&＃64;"connectionType": connectionType,&＃64;"effectiveConnectionType": effectiveConnectionType,&＃64;"network_info": status}];}if (![newState isEqualToString:_lastKnownState]) {_lastKnownState &＃61; newState;[self sendEventWithName:&＃64;"appStateDidChange"body:&＃64;{&＃64;"app_state": _lastKnownState}];}//以上这些方法都是RN提供给iOS的在RCTAppState.m中


RN端&＃xff1a;
if (type &＃61;&＃61;&＃61; &＃39;change&＃39;) {this._eventHandlers[type].set(handler, this.addListener(&＃39;appStateDidChange&＃39;, function (appStateData) {handler(appStateData.app_state);}));} else if (type &＃61;&＃61;&＃61; &＃39;memoryWarning&＃39;) {this._eventHandlers[type].set(handler, this.addListener(&＃39;memoryWarning&＃39;, handler));}


• 接着调用js的AppRegistry.runApplication方法启动js应用
• 然后js层就可以通过native提供的方法来 RCTUIManager.createView来创建视图了

2、RN端发消息到iOS的过程

• 首先在iOS里面新建一个类LoadPageManager
• LoadPageManager会实现RCTBridgeModule协议
• 在LoadPageManager累的实现中添加宏定义&＃xff1a;RCT_EXPORT_MODULE()
• RCT_EXPORT_MODULE()如果你不传入参数&＃xff0c;那么你在iOS中导出的模块名就是类名&＃xff0c;你也可以插入参数作为自定义模块名

iOS端代码
&＃64;implementation LoadPageManager
//可以指定一个参数来访问这个模块,不指定就是这个类的名字(ExampleInterface)
RCT_EXPORT_MODULE()
&＃64;end


接下来就可以实现协议的代理方法了&＃xff0c;协议方法的实现需要在RCT_EXPORT_METHOD这个宏里面&＃xff1b;下面以一个页面跳转的方法示例&＃xff1a;

&＃64;implementation LoadPageManager
RCT_EXPORT_MODULE()// RN跳转Native //
// showCSTNativePage和前端交互的具体方法宏定义 //
// 在方法宏定义里面约定和前端交互的参数传递格式 //
RCT_EXPORT_METHOD(showCSTNativePage:(NSDictionary*)commonParamesdisappearCallBack:(RCTResponseSenderBlock) disappearCallBack)
{NSLog(&＃64;"start load");//接收解析前端传参NSString* pagePath &＃61; [commonParames objectForKey:&＃64;"pagePath"];NSDictionary* aParams &＃61; [commonParames objectForKey:&＃64;"params"];NSString* aPostMessageEvent &＃61; [commonParames objectForKey:&＃64;"postMessageEvent"];NSInteger isCloseParent &＃61; [(NSNumber*)[commonParames objectForKey:&＃64;"isDestoryBeforePage"] intValue];NSString* aAppearEvent &＃61; [commonParames objectForKey:&＃64;"appearEvent"];NSMutableDictionary* aTmpDic &＃61; [NSMutableDictionary dictionaryWithDictionary:commonParames];// 以下代码不要删除 //NSMutableDictionary* aDic;if (aParams){aDic &＃61; [NSMutableDictionary dictionaryWithDictionary:aParams];}if (aPostMessageEvent){[aDic setValue:aPostMessageEvent forKey:PostEvent];}if (aAppearEvent){[aDic setValue:aAppearEvent forKey:AppearEvent];}// 以下代码不要删除 ////回调函数&＃xff0c;页面返回时执行if (disappearCallBack){[aTmpDic setValue:disappearCallBack forKey:DisappearCallBack];}if (isCloseParent){[self RNBackAction];}// 转一下子为了和之前Hybrid 一致 //pagePath &＃61; [pagePath stringByReplacingOccurrencesOfString:&＃64;"_" withString:&＃64;"/"];aDic &＃61; [self adpatToHybridParmers:[NSMutableDictionary dictionaryWithDictionary:aTmpDic]]; // 后期重做考虑去掉 //// 转一下子为了和之前Hybrid 一致 //dispatch_async(dispatch_get_main_queue(), ^{[[CHRDispatcher sharedDispatcher] invokeForPath:pagePath andParams: aDic];});
}


RCTBatchedBridge

为了桥接js跟native&＃xff0c;native层引入了RCTBridge这个类负责双方的通信&＃xff0c;不过真正起作用的是RCTBatchedBridge这个类&＃xff0c;这个类应该算是比较重要的一个类了

通信在前端的实现&＃xff1a;

RN层Libraries/BatchedBridge包下面有3个JS文件&＃xff1a;BatchedBridge.js、MessageQueue.js、NativeModules.js&＃xff0c;它们封装了通信桥在RN层的实现。

BatchedBridge.js

&＃39;use strict&＃39;;const MessageQueue &＃61; require(&＃39;MessageQueue&＃39;);// MessageQueue can install a global handler to catch all exceptions where JS users can register their own behavior
// This handler makes all exceptions to be handled inside MessageQueue rather than by the VM at its origin
// This makes stacktraces to be placed at MessageQueue rather than at where they were launched
// The parameter __fbUninstallRNGlobalErrorHandler is passed to MessageQueue to prevent the handler from being installed
//
// __fbUninstallRNGlobalErrorHandler is conditionally set by the Inspector while the VM is paused for initialization
// If the Inspector isn&＃39;t present it defaults to undefined and the global error handler is installed
// The Inspector can still call MessageQueue#uninstallGlobalErrorHandler to uninstalled on attachconst BatchedBridge &＃61; new MessageQueue(// $FlowFixMetypeof __fbUninstallRNGlobalErrorHandler !&＃61;&＃61; &＃39;undefined&＃39; &&__fbUninstallRNGlobalErrorHandler &＃61;&＃61;&＃61; true, // eslint-disable-line no-undef
);// Wire up the batched bridge on the global object so that we can call into it.
// Ideally, this would be the inverse relationship. I.e. the native environment
// provides this global directly with its script embedded. Then this module
// would export it. A possible fix would be to trim the dependencies in
// MessageQueue to its minimal features and embed that in the native runtime.Object.defineProperty(global, &＃39;__fbBatchedBridge&＃39;, {configurable: true,value: BatchedBridge,
});module.exports &＃61; BatchedBridge;


可以看到在BatchedBridge中创建了MessageQueue对象

MessageQueue.js

MessageQueue的构造方法

class MessageQueue {//Js模块注册添加到_lazyCallableModules_lazyCallableModules: {[key: string]: (void) &＃61;> Object};//队列&＃xff0c;分别存放要调用的模块数组、方法数组、参数数组与数组大小_queue: [number[], number[], any[], number];//回调函数数组&＃xff0c;与_quueue一一对应&＃xff0c;每个_queue中调用的方法&＃xff0c;如果有回调方法&＃xff0c;那么就在这个数组对应的下标上。_successCallbacks: (?Function)[];_failureCallbacks: (?Function)[];//调用函数ID&＃xff0c;自动增加。_callID: number;_inCall: number;_lastFlush: number;_eventLoopStartTime: number;_debugInfo: {[number]: [number, number//Module Table&＃xff0c;用于Native Module_remoteModuleTable: {[number]: string};//Method Table&＃xff0c;用于Native Module_remoteMethodTable: {[number]: string[]};__spy: ?(data: SpyData) &＃61;> void;__guard: (() &＃61;> void) &＃61;> void;constructor(shouldUninstallGlobalErrorHandler: boolean &＃61; false) {this._lazyCallableModules &＃61; {};this._queue &＃61; [[], [], [], 0];this._successCallbacks &＃61; [];this._failureCallbacks &＃61; [];this._callID &＃61; 0;this._lastFlush &＃61; 0;this._eventLoopStartTime &＃61; new Date().getTime();if (shouldUninstallGlobalErrorHandler) {this.uninstallGlobalErrorHandler();} else {this.installGlobalErrorHandler();}if (__DEV__) {this._debugInfo &＃61; {};this._remoteModuleTable &＃61; {};this._remoteMethodTable &＃61; {};}//绑定函数&＃xff0c;也就是创建一个函数&＃xff0c;使这个函数不论怎么调用都有同样的this值(this: any).callFunctionReturnFlushedQueue &＃61; this.callFunctionReturnFlushedQueue.bind(this,);(this: any).callFunctionReturnResultAndFlushedQueue &＃61; this.callFunctionReturnResultAndFlushedQueue.bind(this,);(this: any).flushedQueue &＃61; this.flushedQueue.bind(this);(this: any).invokeCallbackAndReturnFlushedQueue &＃61; this.invokeCallbackAndReturnFlushedQueue.bind(this,);}
}


NativeModules.js

NativeModules描述了Module的结构&＃xff0c;用于解析并生成Module。

Module的结构定义如下所示

type ModuleConfig &＃61; [string, /* name */?Object, /* constants */Array, /* functions */Array, /* promise method IDs */Array, /* sync method IDs */
];


RN通过NativeModules来实现传输和接受消息
首先前端页面要引入NativeModules模块

import { NativeModules, Platform } from "react-native";


然后在我们需要使用的时候获取导出的模块&＃xff0c;我们再用模块调用iOS的导出的函数名就可以了

let pageManager &＃61; NativeModules.LoadPageManager;
function nativeBridge(type, params, disappearCallBack) {pageManager[type](params, disappearCallBack);
}
//RN跳转native页面
function jumpNativePage({ pagePath, isDestoryBeforePage &＃61; 0, jumpParameter, appearEvent, postMessageEvent, ...other },disappearCallBack &＃61; (error, nativeData) &＃61;> {} //回调函数
) {const error &＃61; checker(arguments,[{pagePath: "s|r",isDestoryBeforePage: "b",jumpParameter: "o",appearEvent: "s",postMessageEvent: "s",...other},"f"],"jumpNativePage");// 线上环境报错不调起 Native 的 APIif (error &＃61;&＃61;&＃61; "error") {return error;}let param &＃61; {pagePath,jumpParameter,appearEvent,postMessageEvent, //事件名称isDestoryBeforePage, //0:不关闭&＃xff0c;1关闭...other};nativeBridge("showCSTNativePage", param, disappearCallBack);
}
//showCSTNativePage约定此方法接收两个参数&＃xff0c;一个是页面跳转需要的所有必填参数&＃xff0c;是一个json对象&＃xff0c;一个是页面返回时的回调函数&＃xff0c;是Function类型


整个调用过程

3、native给RN主动发送事件

官网解释&＃xff1a;
最好的方法是继承RCTEventEmitter&＃xff0c;实现suppportEvents方法并调用self sendEventWithName:。

Javascript代码可以创建一个包含你的模块的NativeEventEmitter实例来订阅这些事件

iOS端导出方法

&＃64;implementation NativeNotification
RCT_EXPORT_MODULE();- (NSArray*) supportedEvents
{return &＃64;[AppearEvent];
}


RN端调用

import { NativeEventEmitter, NativeModules } from "react-native";
//NativeNotification是native监听事件的方法定义宏
//addListener是native监听事件的模块定义宏
const { NativeNotification } &＃61; NativeModules;
const eventManagerEmitter &＃61; new NativeEventEmitter(NativeNotification);//在组件中使用componentWillMount() {this.listener &＃61; eventManagerEmitter.addListener(&＃39;viewAppear&＃39;, (nativeData)&＃61;>{//nativeData native端返回数据console.log(JSON.stringify(nativeData))}); //对应了原生端的名字}//记得removecomponentWillUnmount() {this.listener && this.listener.remove();

总结&＃xff1a;
其实就是iOS端设置了桥接内容&＃xff0c;将收到的通知内容传递给RN&＃xff0c;然后RN监听有没有对应Name的事件名&＃xff0c;有的话就处理