当前位置: 首页 > news >正文

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 方法来执行相应的回调。

相关文章:

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

实现带回调的通讯 Web 端实现 在网页中&#xff0c;我们使用 window.callbacks 对象来注册回调函数&#xff0c;并将 callbackId 传递给 App&#xff1a; <script>window.callbacks {callbacks: {},register: function(successCallback, errorCallback) {const callb…...

【设计模式】结构型模式(四):组合模式、享元模式

《设计模式之结构型模式》系列&#xff0c;共包含以下文章&#xff1a; 结构型模式&#xff08;一&#xff09;&#xff1a;适配器模式、装饰器模式结构型模式&#xff08;二&#xff09;&#xff1a;代理模式结构型模式&#xff08;三&#xff09;&#xff1a;桥接模式、外观…...

分布式数据库中间件mycat

MyCat MyCat是一个开源的分布式数据库系统&#xff0c;它实现了MySQL协议&#xff0c;可以作为数据库代理使用。 MyCat(中间件)的核心功能是分库分表&#xff0c;即将一个大表水平分割为多个小表&#xff0c;存储在后端的MySQL服务器或其他数据库中。 它不仅支持MySQL&#xff…...

放大电路中的反馈 > 负反馈 > 四种组态 > 虚断和虚短

零、什么是反馈&#xff1f;为什么反馈很重要&#xff1f;而且负反馈最重要&#xff1f; 反馈在所有领域都是很美的东西&#xff1a; 公司出台某项政策&#xff0c;过了一个月让大家谈谈新政策的感受&#xff0c;然后公司对政策进行适当调整。 高三月考可以反应你对各个学课的…...

STM32F405RGT6单片机原理图、PCB免费分享

大学时机创比赛时画的板子&#xff0c;比到一半因为疫情回家&#xff0c;无后续&#xff0c;&#xff0c;&#xff0c;已打板验证过&#xff0c;使用stm32f405rgt6做主控 下载文件资源如下 原理图文件 pcb文件 外壳模型文件 stm32f405例程 功能 以下功能全部验证通过 4路…...

大语言模型鼻祖Transformer的模型架构和底层原理

Transformer 模型的出现标志着自然语言处理&#xff08;NLP&#xff09;技术的一次重大进步。这个概念最初是针对机器翻译等任务而提出的&#xff0c;Transformer 后来被拓展成各种形式——每种形式都针对特定的应用&#xff0c;包括原始的编码器-解码器&#xff08;encoder-de…...

GB/T 43206—2023信息安全技术信息系统密码应用测评要求(五)

文章目录 附录AA.1 概述A.2 密钥产生A.3 密钥分发A.4 密钥存储A.5 密钥使用A.6 密钥更新A.7 密钥归档A. 8 密钥撤销A.9 密钥备份A.10 密钥恢复A.11 密钥销毁 附录B附录C 附录A A.1 概述 密钥管理对于保证密钥全生存周期的安全性至关重要 ,可以保证密钥(除公开密钥外) 不被非授…...

深度学习:BERT 详解

BERT 详解 为了全面详细地解析BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;&#xff0c;我们将深入探讨它的技术架构、预训练任务、微调方法及其在各种自然语言处理&#xff08;NLP&#xff09;任务中的应用。 一、BERT的技术架构 …...

智能的编织:C++中auto的编织艺术

在C的世界里&#xff0c;auto这个关键字就像是一个聪明的助手&#xff0c;它能够自动帮你识别变量的类型&#xff0c;让你的代码更加简洁和清晰。下面&#xff0c;我们就来聊聊auto这个关键字的前世今生&#xff0c;以及它在C11标准中的新用法。 auto的前世 在C11之前&#x…...

订单分库分表

一、引言 在当今互联网时代&#xff0c;随着电商、金融等行业的快速发展&#xff0c;订单数量呈爆炸式增长。传统的单一数据库存储订单信息的方式面临着巨大的挑战&#xff0c;如数据存储容量有限、查询性能下降、数据备份和恢复困难等。为了解决这些问题&#xff0c;分库分表技…...

【温度表达转化】

【温度表达转化】 C语言代码C代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 利用公式 C5∗(F−32)/9 &#xff08;其中C表示摄氏温度&#xff0c;F表示华氏温度&#xff09; 进行计算转化。 输出 输出一行&#x…...

封装一个web Worker 处理方法实现多线程

背景&#xff1a; 开启多线程处理一段耗时的逻辑 简化Worker使用 直接上代码&#xff1a; 以下是封装的函数直接复制即可 /*** 封装一个worker的启动函数 用于开启一个新的线程 来处理一些耗时的操作* param {object} paremdata 传递给worker的参数* param {function} call…...

unity3d————屏幕坐标,GUI坐标,世界坐标的基础注意点

在Unity3D中&#xff0c;GUI控件的起始坐标与屏幕坐标的起始点并不完全相同&#xff0c;具体说明如下&#xff1a; GUI控件的起始坐标 绘制GUI界面时使用的坐标以屏幕的左上角为(0,0)点&#xff0c;右下角为(Screen.width, Screen.Height)。不过&#xff0c;对于GUI控件的具体…...

MySQL基础-单表查询

语法 select [distinct] 列名1&#xff0c;列名2 as 别名... from数据表名 where组前筛选 group by分组字段 having组后筛选 order by排序的列 [asc | desc] limit 起始索引&#xff0c;数据条数 测试数据 # 建测试表 create table products (id int primary key a…...

Web安全之SQL注入---基础

文章目录 SQL注入简介SQL注入基础SQL注入分类SQL注入流程 SQL注入简介 什么是SQL注入&#xff1f; SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严&#xff0c;攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句&#xff0c;在管理…...

MongoDB笔记03-MongoDB索引

文章目录 一、前言1.1 概述1.2 MongoDB索引使用B-Tree还是BTree&#xff1f;1.3 B 树和 B 树的对比1.4 总结 二、索引的类型2.1 单字段索引2.2 复合索引2.3 其他索引 三、索引的管理操作3.1 索引的查看3.2 索引的创建3.2.1 单字段索引3.2.2 复合索引 3.3 索引的移除3.3.1 指定索…...

Docker基础(一)

Docker 简介 常用命令 镜像 #搜索镜像 docker search nginx #下载镜像 docker pull nginx #下载指定版本镜像 docker pull nginx:1.26.0 #查看所有镜像 docker images #删除指定id的镜像 docker rmi e784f4560448 # 删除多个镜像 docker rmi bde7d154a67f 94543a6c1aef e784…...

解决 IntelliJ IDEA Maven 项目 JDK 版本自动变为 1.5 的问题

一、问题描述 在使用 IntelliJ IDEA 创建 Maven 项目时&#xff0c;经常会遇到一个问题&#xff1a;项目的默认编译版本被设置为 JDK 1.5&#xff0c;即使系统中安装的是更高版本的 JDK。这不仅会导致编译时出现警告&#xff0c;还可能引起兼容性问题。每次手动修改编译版本后…...

SDL事件相关

文章目录 事件相关的函数和数据结构用户自定义事件代码相关&#xff1a; 事件相关的函数和数据结构 SDL_WaitEvent :等待一个事件SDL_PushEvent 发送一个事件SDL_PumpEvents(): 将硬件设备产生的时间放入事件队列 &#xff0c;用于读取事件&#xff0c;在调用该函数之前&#…...

探索App Intents:让你的应用与Siri无缝互动的新方式

苹果推出了一个新框架——App Intents&#xff0c;使开发者可以在iOS 18.2、macOS 15.2等平台上集成Siri和Apple Intelligence&#xff0c;实现对应用内容的读取和操作。 App Intents使应用的功能和内容能无缝融入系统体验中&#xff0c;例如Siri、Spotlight搜索、快捷指令和小…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

[特殊字符] 手撸 Redis 互斥锁那些坑

&#x1f4d6; 手撸 Redis 互斥锁那些坑 最近搞业务遇到高并发下同一个 key 的互斥操作&#xff0c;想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁&#xff0c;也顺便跟 Redisson 的 RLock 机制对比了下&#xff0c;记录一波&#xff0c;别踩我踩过…...