<强> Android原生原反应生模块与JS模块通信的方法总结
<强>前言:
在做反应本地开发的时候避免不了的需要原生模块和JS之间进行数据传递,这篇文章将向大家分享原生模块向JS传递数据的几种方式。
<强>方式一:通过回调的方式
说起回调大家都不陌生,它是最常用的设计模式之一。无论是Java object - C, C #,还是JavaScript等都会看到回调的身影。
原生模块支持回调函数类型的参数,该回调对应JS中的功能。
在原生模块中:
公开课RNTestModule延伸ReactContextBaseJavaModule {
公共RNTestModule (ReactApplicationContext reactContext) {
超级(reactContext);
}
@Override
公共字符串getName () {
返回“RNTest”;
}
@ReactMethod
公共空间measureLayout (
int标签,
int ancestorTag,
回调errorCallback,
回调successCallback) {
尝试{
measureLayout(标签,ancestorTag mMeasureBuffer);
map.putDouble (" relativeX ", 1);
地图。putDouble (" relativeY ", 1);
地图。putDouble(“宽度”,2);
map.putDouble(“高度”,3);
successCallback。调用(relativeX relativeY、宽度、高度);
}捕捉(IllegalViewOperationException e) {
errorCallback.invoke (e.getMessage ());
}
}
之前
在上述代码中,measureLayout方法的参数中后两个就是回调函数,当原生模块处理成功时通过successCallback回调来告知JS处理成功的结果,当原生模块发生异常时,则通过errorCallback回调来JS处理异常。
<强>在JS模块中:
RNTest.measureLayout (
One hundred.
One hundred.
(味精)=比;{
console.log(味精);
}，
(x, y,宽度、高度)=比;{
控制台。日志(x +‘:’+ y +‘:’+宽度+‘:’+高度);
}
);
之前
上述代码,是在JS模块中调用原生模块的方法measureLayout,同时向它传递了四个参数,后两个是功能类型的参数用于接收原生模块的处理结果。
通过上述的方式,JS调用原生模块的measureLayout方法,原生模块则通过errorCallback与successCallbackCallbacks来将处理结果传递到JS。
这种“你打电话给我,我将回调”的方式小伙伴们都看懂了吧。
<强>方式二:通过承诺的方式
承诺是ES6的一个新的特性,在本机中反应你会看到承诺的大量使用。
原生模块也是支持承诺的,这对喜欢使用承诺的小伙伴则是一个很好的消息。
在原生模块中:
公开课RNTestModule延伸ReactContextBaseJavaModule {
公共RNTestModule (ReactApplicationContext reactContext) {
超级(reactContext);
}
@Override
公共字符串getName () {
返回“RNTest”;
}
@ReactMethod
公共空间measureLayout (
int标签,
int ancestorTag,
承诺承诺){
尝试{
WritableMap地图=Arguments.createMap ();
map.putDouble (" relativeX ", 1);
地图。putDouble (" relativeY ", 1);
地图。putDouble(“宽度”,2);
map.putDouble(“高度”,3);
promise.resolve(地图);
}捕捉(IllegalViewOperationException e) {
promise.reject (e);
}
}
}
之前
上述代码中,measureLayout方法接收的最后一个为承诺,当相应的处理结果出来之后原生模块通过调用承诺的相应方法来向JS模块传递处理成功,或处理失败的数据。
提示:在原生模块中承诺类型的参数要放在最后一位,这样JS调用的时候才能返回一个承诺。
<强>在JS模块中:
异步测试(){
尝试{
var {
relativeX,
relativeY,
宽度,
高度,
}=等待RNTest。measureLayout (100、100);
控制台。日志(relativeX +‘:’+ relativeY +‘:’+宽度+‘:’+高度);
}捕捉(e) {
console.error (e);
}
}
之前
在上述代码中,通过ES7的新特性异步/等待来修饰了测试方法,来以同步方式调用原生模块的measureLayout方法,如果原生模块处理成功,
那么JS中relativeX, relativeY,宽度,高度会获得相应的值,如果原生模块处理失败,则会抛出异常。
如果,不希望以同步的形式调用,可以这样写:
