如何将图像数据传递给 React Native 中的原生模块？答案

【问题标题】：how do I pass image data to a native module in React Native?如何将图像数据传递给 React Native 中的原生模块？
【发布时间】：2017-09-24 10:26:33
【问题描述】：

在我在 Xcode 中实现 RCTBridgeModule 协议的类中，我正在尝试编写一个 RCT_EXPORT_MEATHOD，我可以将其暴露给 React Native 代码以使用图像数据。目前，我可以在 React Native 中将图像写入磁盘，然后将路径传递给 native 方法，但我想知道是否有更好的技术直接传递图像数据以获得更好的性能？

所以不要这样：

RCT_EXPORT_METHOD(scanImage:(NSString *)path) {
  UIImage *sampleImage = [[UIImage alloc] initWithContentsOfFile:path];  
  [self processImage: UIImage];
}

更像这样：

RCT_EXPORT_METHOD(scanImage:(NSData *)imageData) {
  [self processImageWithData: imageData];
}

【问题讨论】：

标签： react-native uiimage nsdata native-methods native-module

【解决方案1】：

你可以使用#import <React/RCTConvert.h>中的[RCTConvert UIImage:icon]方法

您需要将“模式”指定为“数据”。有关更多详细信息，请查看以下源代码： https://github.com/facebook/react-native/blob/master/React/Base/RCTConvert.m#L762

【讨论】：

您能否添加一个代码示例，如何将此模式指定为数据？该部分还有一条评论说：“此方法仅在同步加载图像时使用，例如用于标签栏图标”..您确定要这样使用它吗？

【解决方案2】：

对我来说，这是可行的：

  NSURL *url = [NSURL URLWithString:[imagePath stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]]];
  UIImage *image = [[UIImage alloc] initWithData:[NSData dataWithContentsOfURL:url]];

imagePath 是 NSString 来自 react-native 桥（使用 react-native-image-picker 的响应 - response.uri）。

【讨论】：