如何将图像从原生模块发送到本机模块？ [英] How to send images from react native to native modules?

问题描述

问题

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

I'm trying to send an array of images (saved locally on the javascript side on an assets folder) to the native side (both iOS and Android). There the native side process the images and returns a new image. This works because I've tried sending the image URL (using internet based images instead of local images) and the native code runs perfectly.

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

The problem is that downloading each image is such a slow process, and I would send like 10 or 15 images. I think the best way to handle this is sending absolute paths of the images within the device.

到目前为止我尝试过的方法：

• 发送图像的URL（Works但这不是我想要的，想法是将图像保存在资产文件夹而不是逐个下载

想法：

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

• Maybe I can get an array of base64 strings of every image, but seems like a slow task to do; in the native side I will have to convert every base64 string into data and then into images.

发送每个资产的绝对uri路径是理想的，但我找不到一种方法来获得它（只能得到'./assets/myImage.png'）

It will be ideal to send the absolute uri path of each asset, but I couldn't find a way to get it (only could get like './assets/myImage.png')

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

According to React Native documentation (https://facebook.github.io/react-native/docs/native-modules-ios.html) the native side supports the JSON standard formats (such as string, number, boolean, arrays and objects of any type of this list, and react callback/promises)

推荐答案

当您需要JS方面的本地图像文件时，您实际上并未获取其数据。相反，RN为图像创建ID映射;如果您尝试记录它，您可以看到它实际上只是一个数字。

When you require a local image file on the JS side you're not actually getting its data. Instead, RN creates a map of IDs to images; if you try to log it you can see that it's actually just a number.

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

Although numbers can be serialized over the bridge this is not enough, to be able to access the image on the native side you first need to resolve the required image to an object that you can later convert on native. On the JS side it would look something like this:

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

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

You can now pass the resolvedImage to your native API, this will be a dictionary object (a map) with the image info (size, uri, etc.). On the native side you can now convert the image:

UIImage *image = [RCTConvert UIImage:imageObj];

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

On Android it works in a similar way, but as far as I know there are no direct conversion methods, so you'll need to extract the uri from the image map object and load it from there.

这篇关于如何将图像从原生模块发送到本机模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！