如何将图像从本机反应发送到本机模块？

Posted 2023-05-06

【中文标题】如何将图像从本机反应发送到本机模块？

【英文标题】：How to send images from react native to native modules?

【发布时间】：2018-11-25 14:09:59

【问题描述】：

问题

我正在尝试将一组图像（本地保存在资产文件夹的 javascript 端）发送到本机端（ios 和 android）。本地端处理图像并返回一个新图像。这是有效的，因为我尝试发送图像 URL（使用基于 Internet 的图像而不是本地图像）并且本机代码运行完美。

问题是下载每张图片的过程非常缓慢，我会发送大约 10 或 15 张图片。我认为处理此问题的最佳方法是在设备内发送图像的绝对路径。

到目前为止我所做的尝试：

发送图像的 URL（有效，但这不是我要找的，想法是将图像保存在“资产”文件夹中，而不是一个一个地下载）

想法：

也许我可以获得每个图像的 base64 字符串数组，但似乎是一项缓慢的任务；在本机端，我必须将每个 base64 字符串转换为数据，然后转换为图像。

最好发送每个资产的绝对 uri 路径，但我找不到获取它的方法（只能像 './assets/myImage.png'）

根据 React Native 文档 (https://facebook.github.io/react-native/docs/native-modules-ios.html)，native 端支持 JSON 标准格式（如字符串、数字、布尔值、数组和此列表的任何类型的对象，以及 react 回调/承诺）

【问题讨论】：

This 可能会有所帮助。它讨论了图像的性能以及原生图像通常如何更快。本质上，您可以尝试将图像存储在本机端，而不是通过 js 捆绑器要求它们。

【参考方案1】：

当你在 JS 端需要一个本地图像文件时，你实际上并没有得到它的数据。相反，RN 创建一个 ID 到图像的映射；如果您尝试记录它，您会发现它实际上只是一个数字。

虽然数字可以在桥上序列化，但这还不够，为了能够在本机端访问图像，您首先需要将所需的图像解析为稍后可以在本机上转换的对象。在 JS 方面，它看起来像这样：

const myImage = require('./my-image.png');
const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
const resolvedImage = resolveAssetSource(myImage);

您现在可以将 resolvedImage 传递给您的原生 API，这将是一个带有图像信息（大小、uri 等）的字典对象（地图）。在本机端，您现在可以转换图像：

UIImage *image = [RCTConvert UIImage:imageObj];

在 Android 上它以类似的方式工作，但据我所知没有直接转换方法，因此您需要从图像映射对象中提取 uri 并从那里加载它。

【讨论】：

你实际上可以使用Image.resolveAssetSource(...)而不需要特定的函数