RN与原生交互——传参并带有回调

Posted 2023-04-27

参考技术A Native的方法，还需要对结果进行处理，这样就需要使用JavaSctipt的回调函数，对结果进行处理。在React Native中Object-c有两种方式的回调:RCTReponseSenderBlock和Promises。

ios端以promise形式返回数据与android不同，Android端定义了一个Promise类，iOS端还是通过block形式给出回调，使用RCTPromiseResolveBlock和RCTPromiseRejectBlock。

RN与原生交互——传参并带有回调
RN与原生交互（二）——数据传递
React Native知识12-与原生交互
react-native调用ios native方法-回调
React Native填坑之旅--与Native通信之iOS篇

//MARK:钥匙申请 按钮
//申请数字钥匙前，获取 挑战码
//deviceId 物联网终端设备的设备号
//numberPlates 车牌号
//PEPS PEPS无钥匙入车 默认 false:不支持 true:支持
//- (void)KeyApplyClick_new:(NSString *)templateId numberPlates:(NSString *)numberPlates numberVehicle:(NSString *)numberVehicle phonenumber:(NSString *)phonenumber RNsuccess:(RNSuccessBlock)RNsuccess RNfailure:(RNFailureBlock)RNfailure;
RCT_REMAP_METHOD(KeyApplyClick_new,KeyApplyClick_new:(NSString *)templateId numberPlates:(NSString *)numberPlates numberVehicle:(NSString *)numberVehicle phonenumber:(NSString *)phonenumber KeyApplyClick_newresolve:(RCTPromiseResolveBlock)resolve KeyApplyClick_newreject:(RCTPromiseRejectBlock)reject)

[[GNUserManager_rn instance] KeyApplyClick_new:templateId numberPlates:numberPlates numberVehicle:numberVehicle phonenumber:phonenumber RNsuccess:^(id result)
resolve(result);
RNfailure:^(id result)
reject(@"no_events", @"There were no events", result);
];

vue实现与安卓IOS交互

方案背景

• IOS用的是jsBridge插件实现调用、传参、回调的
• 安卓是在window挂载方法和挂载回调的

IOS实现方案

• 调用原生方法封装如下

function setupWebViewJavascriptBridge (callback) {
    if (window.WebViewJavascriptBridge) {
        return callback(window.WebViewJavascriptBridge)
    }
    if (window.WVJBCallbacks) {
        return window.WVJBCallbacks.push(callback)
    }
    window.WVJBCallbacks = [callback]
    let WVJBIframe = document.createElement(‘iframe‘)
    WVJBIframe.style.display = ‘none‘
    WVJBIframe.src = ‘https://__bridge_loaded__‘
    document.documentElement.appendChild(WVJBIframe)
    setTimeout(() => {
        document.documentElement.removeChild(WVJBIframe)
    }, 0)
}
function callhandler (name, data, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
        bridge.callHandler(name, data, callback)
    })
}

• 实际调用如下

callhandler(functionName: string, params: object, res => {})

• 注册方法给原生

registerhandler (name, callback) {
    // 安卓
    window[name] = res => {
      let data = JSON.parse(res)
      callback(data)
    }
    // IOS
    setupWebViewJavascriptBridge(function (bridge) {
        bridge.registerHandler(name, function (data, responseCallback) {
            callback(data, responseCallback)
        })
    })
}

安卓实现方案

• 调用原生方法

window.HTTP_TEST.functionName()

• 定义回调方法/注册方法给原生

window[‘functionName‘] = res => {}

特殊说明

1. 安卓在交互中的参数传递只能支持string类型，对象参数要转成string传递
2. 因为安卓的回调方法名是固定的，同一方法同时请求两次以上时，有可能只得到一次回调。如果用随机数处理就会不断地在window上挂载新的函数，调用次数过多可能会出问题，所以目前是避免同时请求同一方法来解决的。如果有需求避免不了，那还是要用随机数解决。

来源：https://segmentfault.com/a/1190000016879200