本文作者:IMWeb 朱灵子 原文出处:IMWeb社区 未经同意,禁止转载
React Native用IOS自带的JavaScriptCore作为JS的解析引擎,普通的JS-OC通信就是React Native在OC定义一个模块方法,JS可以直接调用这个模块方法并还可以无缝衔接回调。
具体的接口调用实现方法如下所示:
var RCTVideo = require('react-native').NativeModules.RCTVideo;
RCTVideo.addVideoTitle('video title');
RCTVideo.RNCallbackEvent('dsb',(error,callBackEvents)=>{
if (error) {
console.error(error);
} else {
AlertIOS.alert('返回值:'+JSON.stringify(callBackEvents));
}
});
callback函数:第一个参数是一个错误对象(没有发生错误的时候为null),而剩下的部分是函数的返回值。
RCTVideo.RNCallbackEvent('dsb',(error,callBackEvents)=>{
if (error) {
console.error(error);
} else {
AlertIOS.alert('返回值:'+JSON.stringify(callBackEvents));
}
});
let ocFun = NativeAppEventEmitter.addListener(
'eventName',
(para) => AlertIOS.alert('被OC触发','字典数据:\n name:'+para.name+'\n age:'+para.age)
);
ocFun : 将绑定好的监听事件引用交给此变量保存。
addListener:
第一个参数:事件名
第二个参数:响应函数
注意:利用addListener进行监听,一定要对应有取消监听!
且通常取消监听都在componentWillUnmount函数中进行。如下:
componentWillUnmount(){
ocFun.remove();
}
简单地封装一个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端分别各有一个bridge,两个bridge都保存了同样一份模块配置表,JS调用OC模块方法时,通过bridge里的配置表把模块方法转为模块ID和方法ID传给OC,OC通过bridge的模块配置表找到对应的方法执行之,以上述代码为例,流程大概是这样(先不考虑callback):
接下来看看JS调用OC模块方法的详细流程,包括callback回调,下面展示的是细化版本的调用流程图:
详细说明下这些步骤:
感谢您的阅读~~~