网站入门,企业网站建设学习,网站推广话术与技巧,淮安房产网实现带回调的通讯
Web 端实现
在网页中#xff0c;我们使用 window.callbacks 对象来注册回调函数#xff0c;并将 callbackId 传递给 App#xff1a;
scriptwindow.callbacks {callbacks: {},register: function(successCallback, errorCallback) {const callb…实现带回调的通讯
Web 端实现
在网页中我们使用 window.callbacks 对象来注册回调函数并将 callbackId 传递给 App
scriptwindow.callbacks {callbacks: {},register: function(successCallback, errorCallback) {const callbackId Date.now().toString();this.callbacks[callbackId] {success: successCallback,error: errorCallback,};return callbackId;},execute: function(callbackId, type, data) {const callback this.callbacks[callbackId];if (callback) {if (type success) {callback.success callback.success(data);} else {callback.error callback.error(data);}delete this.callbacks[callbackId]; // 执行后删除回调}},};function sendMessageToApp(message) {const callbackId window.callbacks.register((data) console.log(Success:, data),(error) console.log(Error:, error));window.ReactNativeWebView.postMessage(JSON.stringify({ callbackId, message }));}
/scriptApp 端实现
在 React Native 中我们接收 Web 发送的消息并根据 callbackId 返回结果
import React, { useRef } from react;
import { WebView } from react-native-webview;
import { Button } from react-native;const MyWebView () {const webViewRef useRef(null);const onMessage (event) {const { callbackId, message } JSON.parse(event.nativeEvent.data);// 模拟处理操作并返回结果const result Processed: ${message};const script window.callbacks.execute(${callbackId}, success, ${JSON.stringify(result)});;webViewRef.current.injectJavaScript(script);};return (WebViewref{webViewRef}source{{ uri: https://example.com }}onMessage{onMessage}style{{ flex: 1 }}/);
};export default MyWebView;解释 Web 端使用 register 方法注册成功和失败回调并将 callbackId 通过 postMessage 传递给 App。 App 端在接收到消息后根据 callbackId 处理数据然后通过 injectJavaScript 调用 Web 端的 execute 方法来执行相应的回调。
