React Native WebView 进阶：实现带回调函数的通讯

实现带回调的通讯

Web 端实现

在网页中，我们使用 window.callbacks 对象来注册回调函数，并将 callbackId 传递给 App：

<script>window.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 }));}
</script>

App 端实现

在 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;

解释

1. Web 端：使用 register 方法注册成功和失败回调，并将 callbackId 通过 postMessage 传递给 App。

2. App 端：在接收到消息后，根据 callbackId 处理数据，然后通过 injectJavaScript 调用 Web 端的 execute 方法来执行相应的回调。