javascript - 如何将图像从 native react 发送到 native 模块？

Question

问题

我正在尝试将一组图像(本地保存在 assets 文件夹的 javascript 端)发送到 native 端(iOS 和 Android)。 native 端在那里处理图像并返回新图像。这是有效的，因为我已经尝试发送图像 URL(使用基于 Internet 的图像而不是本地镜像)并且 native 代码运行完美。

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

到目前为止我尝试了什么:

• 发送图像的 URL(可行，但这不是我要找的，我的想法是将图像保存在“assets”文件夹中，而不是一张一张地下载)

想法:

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

• 发送每个 Assets 的绝对 uri 路径是理想的，但我找不到获取它的方法(只能获取像 './assets/myImage.png')

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

Answer 1

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

虽然数字可以通过桥进行序列化，但这还不够，要能够在 native 端访问图像，您首先需要将所需的图像解析为一个对象，稍后您可以在 native 端转换该对象。在 JS 方面，它看起来像这样:

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

您现在可以将 resolvedImage 传递给您的 native API，这将是一个包含图像信息(大小、uri 等)的字典对象( map )。在 native 端，您现在可以转换图像:

UIImage *image = [RCTConvert UIImage:imageObj];

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