React Native与OC之间通信那些事儿

React Native用IOS自带的JavaScriptCore作为JS的解析引擎,普通的JS-OC通信就是React Native在OC定义一个模块方法,JS可以直接调用这个模块方法并还可以无缝衔接回调。

具体的接口调用实现方法如下所示:

  • 将OC注册进来的模块取出,调用模块中的对应函数,且将参数传入
var RCTVideo = require('react-native').NativeModules.RCTVideo;
RCTVideo.addVideoTitle('video title');
  • 利用回调参数得到访问OC的函数,并得到其返回值
RCTVideo.RNCallbackEvent('dsb',(error,callBackEvents)=>{
   if (error) {
       console.error(error);
   } else {
       AlertIOS.alert('返回值:'+JSON.stringify(callBackEvents));
   }
});
  • 利用回调参数得到访问OC的函数,并得到其返回值

callback函数:第一个参数是一个错误对象(没有发生错误的时候为null),而剩下的部分是函数的返回值。

RCTVideo.RNCallbackEvent('dsb',(error,callBackEvents)=>{
   if (error) {
       console.error(error);
   } else {
       AlertIOS.alert('返回值:'+JSON.stringify(callBackEvents));
   }
});
  • 如果想要OC访问JS,我们需要利用 NativeAppEventEmitter组件,利用其addListener进行注册监听
let ocFun = NativeAppEventEmitter.addListener(
  'eventName',
  (para) => AlertIOS.alert('被OC触发','字典数据:\n name:'+para.name+'\n age:'+para.age)
);

ocFun : 将绑定好的监听事件引用交给此变量保存。

addListener:

第一个参数:事件名

第二个参数:响应函数

注意:利用addListener进行监听,一定要对应有取消监听!

且通常取消监听都在componentWillUnmount函数中进行。如下:

  componentWillUnmount(){
    ocFun.remove();
  }
  • 如何用js构建native封装好的本地UI组件

简单地封装一个native封装好的本地视频组建的实现方法如下:

var { requireNativeComponent } = require('react-native');
module.exports = requireNativeComponent('RCTVideo', null);

现在这是 JavaScript中一个功能完整的 native video视图组件了,包括 pinch-zoom 和其他 native 手势支持, 但是我们还不能用 JavaScript来真正的控制它,所以接下来我们需要给组建添加属性和方法,具体示例如下:

class VideoView extends React.Component {
  constructor() {
    this.play = this.play.bind(this);
  }

  play = (event) => {
    if (this.props.play) {
      this.props.play(event.nativeEvent);
    }
  }

  render() {
    return (
      <View>
        <RCTVideo {...this.props} style = {styles.fullscreen} />
      </View>
    )
   }
  }

  VideoView.propTypes = {
    src: React.PropTypes.string,
    play:React.PropTypes.func,
  };

var RCTVideo = requireNativeComponent('RCTVideo', VideoView,   
    nativeOnly: {
      src: true,
      play: true,
    }
)

接下来看看其实现原理,理解react native与OC之间的通信我们首先需要了解模块配置表,接下来对模块配置表进行简单的介绍:

模块配置表

js如果要调用oc提供的接口方法,OC首先需要向JS传递它所有的模块信息。这里的具体实现方法是OC生成一份模块配置表传给JS,配置表里包括了所有模块和模块里方法的信,具体信息如下所示:

{
    "remoteModuleConfig": {
        "RCTVideo": {
            "methods": {
                "play": {
                    "type": "remote",
                    "methodID": 0
                }
            },
            "moduleID": 4
        },
        ...
     },
}

OC与js之间的调用流程

OC端和JS端分别各有一个bridge,两个bridge都保存了同样一份模块配置表,JS调用OC模块方法时,通过bridge里的配置表把模块方法转为模块ID和方法ID传给OC,OC通过bridge的模块配置表找到对应的方法执行之,以上述代码为例,流程大概是这样(先不考虑callback):

接下来看看JS调用OC模块方法的详细流程,包括callback回调,下面展示的是细化版本的调用流程图:

详细说明下这些步骤:

  • 1.JS端调用某个OC模块暴露出来的方法
  • 2.把上一步的调用分解为ModuleName,MethodName,arguments,再扔给MessageQueue处理。 在初始化时模块配置表上的每一个模块都生成了对应的remoteModule对象,对象里也生成了跟模块配置表里一一对应的方法,这些方法里可以拿到自身的模块名,方法名,并对callback进行一些处理,再移交给MessageQueue。
  • 3.在这一步把JS的callback函数缓存在MessageQueue的一个成员变量里,用CallbackID代表callback。在通过保存在MessageQueue的模块配置表把上一步传进来的ModuleName和MethodName转为ModuleID和MethodID。
  • 4.把上述步骤得到的ModuleID,MethodId,CallbackID和其他参数argus传给OC。
  • 5.OC接收到消息,通过模块配置表拿到对应的模块和方法。
  • 6.RCTModuleMethod对JS传过来的每一个参数进行处理。
  • 7.OC模块方法调用完,执行block回调。
  • 8.调用到第6步说明的RCTModuleMethod生成的block。
  • 9.block里带着CallbackID和block传过来的参数去调JS里MessageQueue的方法invokeCallbackAndReturnFlushedQueue。
  • 10.MessageQueue通过CallbackID找到相应的JS callback方法。
  • 11.调用callback方法,并把OC带过来的参数一起传过去,完成回调。

概括一下整体流程如下 整个流程就是这样,简单概括下,差不多就是:JS函数调用转ModuleID/MethodID -> callback转CallbackID -> OC根据ID拿到方法 -> 处理参数 -> 调用OC方法 -> 回调CallbackID -> JS通过CallbackID拿到callback执行

参考文献

感谢您的阅读~~~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏守候书阁

webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)

今天要做的,就是在上一篇文章的基础上,进行功能页面的开发。简单点说呢,就是与后端的数据交互和怎么把数据展示出来,用到的资源主要是element-ui和vue-r...

1082
来自专栏Java技术

【面试题】2018年最全Java面试通关秘籍第三套!

注:本文是从众多面试者的面试经验中整理而来,其中不少是本人出的一些题目,网络资源众多,如有雷同,纯属巧合!禁止一切形式的碰瓷行为!未经允许禁止一切形式的转载和复...

811
来自专栏Java编程技术

常用开源框架中设计模式使用分析(全)

说起来设计模式,大家应该都耳熟能详,设计模式代表了软件设计的最佳实践,是经过不断总结提炼出来的代码设计经验的分类总结,这些模式或者可以简化代码,或者可以是代码逻...

692
来自专栏小李刀刀的专栏

[译]Laravel 5.0 之自定义错误页面

本文译自 Matt Stauffer 的系列文章. ---- 在以往版本的 Laravel 中,假如你想自定义错误页面——比如当用户访问不存在的页面时显示一张猫...

3445
来自专栏逍遥剑客的游戏开发

OGRE中用到的设计模式

1917
来自专栏JAVA后端开发

通用数据级别权限的框架设计与实现(4)-单条记录的权限控制

查看上篇文章通用数据级别权限的框架设计与实现(3)-数据列表的权限过滤,我们开始在原来的基础上实现单条权记录的权限控制。 相信前面的列表权限控制,很多系统都可...

913
来自专栏Java技术栈

Spring Boot 单元测试详解+实战教程

Spring Boot 提供了许多实用工具和注解来帮助测试应用程序,主要包括以下两个模块。

1013
来自专栏落影的专栏

使用AudioToolbox播放AAC

前言 使用VideoToolbox硬编码H.264 使用VideoToolbox硬解码H.264 使用AudioToolbox编码AAC 在上一篇中,介绍...

3594
来自专栏技术/开源

UWP开源项目 LLQNotifier 页面间通信利器(移植EventBus)

前言 EventBus是一个Android版本的页面间通信库,这个库让页面间的通信变得十分容易且大幅降低了页面之间的耦合。小弟之前玩Android的时候就用得十...

1907
来自专栏Java与Android技术栈

构建一个给爬虫使用的代理IP池总结

做网络爬虫时,一般对代理IP的需求量比较大。因为在爬取网站信息的过程中,很多网站做了反爬虫策略,可能会对每个IP做频次控制。这样我们在爬取网站时就需要很多代理I...

761

扫码关注云+社区