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

时间:2018-06-15 17:51:27

标签: javascript android ios objective-c react-native

问题

我正在尝试将一组图像(在资源文件夹的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标准格式(例如字符串,数字,布尔值,此列表中任何类型的数组和对象,以及对回调/承诺的反应)

1 个答案:

答案 0 :(得分:7)

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

尽管数字可以在网桥上进行序列化,但这还不够,为了能够访问本机端的图像,首先需要将所需的图像解析为以后可以在本机上进行转换的对象。在JS方面,它看起来像这样:

resolvedImage

您现在可以将UIImage *image = [RCTConvert UIImage:imageObj]; 传递给您的原生API,这将是一个包含图像信息(大小,uri等)的字典对象(地图)。在原生方面,您现在可以转换图像:

uri

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