如何将图像从原生模块发送到本机模块？

Question

问题

我正在尝试将一组图像(在资源文件夹的javascript端本地保存)发送到本机端(iOS和Android).原生方处理图像并返回新图像.这是因为我尝试发送图像URL(使用基于互联网的图像而不是本地图像),并且本机代码运行完美.

问题是下载每个图像是一个非常缓慢的过程,我会发送10或15个图像.我认为处理此问题的最佳方法是在设备中发送图像的绝对路径.

到目前为止我尝试过的:

• 发送图像的URL(Works但这不是我想要的,想法是将图像保存在"assets"文件夹而不是逐个下载)

思路:

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

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

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

Answer 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从图像映射对象中提取并从那里加载它.