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

实现带回调的通讯

Web 端实现

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

html 复制代码
<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 返回结果:

javascript 复制代码
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 (
    <WebView
      ref={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 方法来执行相应的回调。

相关推荐
羊小猪~~17 分钟前
前端入门一之ES6--面向对象、够着函数和原型、继承、ES5新增方法、函数进阶、严格模式、高阶函数、闭包
开发语言·前端·javascript·css·vscode·html·es6
Licky1318 分钟前
web 远程调试工具PageSpy 实战经验
前端·javascript·架构·chrome devtools
咔咔库奇30 分钟前
react之了解jsx
前端·javascript·react.js
努力挣钱的小鑫34 分钟前
【Element】vue2 el-table scope.row 更改数据,试图没有更新
前端·javascript·vue.js·element
jhonjson1 小时前
在Flutter中,禁止侧滑的方法
前端·javascript·flutter
一名技术极客1 小时前
Three.js 搭建3D隧道监测
开发语言·javascript·3d
Dragon Wu1 小时前
前端 JS面向对象 原型 prototype
前端·javascript
看月亮的方源1 小时前
工作笔记--css文本溢出,盒子模型,NextTick回顾、console调试、样式穿透deep全家,el-upload文件上传,.9图
前端·javascript·vue.js
TttHhhYy2 小时前
vue写后台管理系统,有个需求将所有的$message消息提示换成确认框来增强消息提示效果,遇到嵌套过多的情况,出现某些问题
前端·javascript·vue.js·anti-design-vue
亿牛云爬虫专家2 小时前
如何在Puppeteer中实现表单自动填写与提交:问卷调查
javascript·爬虫·爬虫代理·puppeteer·问卷调查·代理ip·表单