如何将React-Native打包图片传递给原生模块

嘿，我刚好之前在开发React Native原生模块时遇到过完全一样的问题！要处理那种通过require()引入的打包图片，确实没法直接拿到真实的文件路径，但有几个靠谱的方案能解决，我给你详细说说：

React Native其实提供了resolveAssetSource工具方法，能把require()返回的资源对象转换成包含平台原生资源信息的结构，你可以在JS层先处理，再把关键参数传给原生模块。

JS层预处理代码 #

import { resolveAssetSource } from 'react-native/Libraries/Image/resolveAssetSource';

// 你的打包图片
const packagedImage = require('./assets/test.png');
// 解析资源信息
const resolvedSource = resolveAssetSource(packagedImage);

// 将解析后的信息传给你的原生模块
YourImageProcessingModule.processImage(
  resolvedSource.uri,
  resolvedSource.width,
  resolvedSource.height
);

Android端原生处理 #

在Android上，resolveAssetSource返回的uri格式是res://你的应用包名/资源ID，比如res://com.yourapp/123456。你可以从uri里提取出资源ID，直接通过资源ID加载图片：

// 从JS传过来的uri字符串
String imageUri = ...;
// 拆分uri获取资源ID
String[] uriParts = imageUri.split("/");
int resId = Integer.parseInt(uriParts[uriParts.length - 1]);

// 通过资源ID加载Bitmap
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), resId);
// 接下来就可以对bitmap进行你需要的处理了

iOS端原生处理 #

iOS上resolveAssetSource返回的uri就是打包后图片在app bundle里的名称（如果是Asset Catalog里的图片，就是对应的资源名）。你可以直接通过bundle路径获取图片：

// 从JS传过来的图片名称字符串
NSString *imageName = ...;
// 获取bundle内的图片路径
NSString *imagePath = [[NSBundle mainBundle] pathForResource:imageName ofType:nil];
// 加载图片
UIImage *image = [UIImage imageWithContentsOfFile:imagePath];
// 后续处理逻辑

如果觉得分平台处理资源路径太繁琐，另一个通用思路是在JS层把打包图片转换成Base64字符串，再传给原生模块解码处理。这种方式不需要关注平台差异，代码更统一。

JS层转Base64示例（依赖react-native-fs） #

import { resolveAssetSource } from 'react-native/Libraries/Image/resolveAssetSource';
import RNFS from 'react-native-fs';

const convertAssetToBase64 = async (asset) => {
  const resolvedSource = resolveAssetSource(asset);
  // 读取图片文件并转Base64
  const base64String = await RNFS.readFile(resolvedSource.uri, 'base64');
  // 返回带格式标识的Base64
  return `data:image/png;base64,${base64String}`;
};

// 调用转换并传给原生模块
const imageBase64 = await convertAssetToBase64(require('./assets/test.png'));
YourImageProcessingModule.processImageBase64(imageBase64);

原生端解码Base64 #

• Android：

String base64String = ...;
// 去掉前缀"data:image/png;base64,"
String pureBase64 = base64String.split(",")[1];
byte[] decodedBytes = Base64.decode(pureBase64, Base64.DEFAULT);
Bitmap bitmap = BitmapFactory.decodeByteArray(decodedBytes, 0, decodedBytes.length);

• iOS：

NSString *base64String = ...;
// 去掉前缀
NSString *pureBase64 = [base64String componentsSeparatedByString:@","][1];
NSData *imageData = [[NSData alloc] initWithBase64EncodedString:pureBase64 options:NSDataBase64DecodingIgnoreUnknownCharacters];
UIImage *image = [UIImage imageWithData:imageData];

• 不管用哪种方案，都建议把图片的宽高参数也传给原生模块，方便后续处理时保持图片比例。
• 如果你的原生模块需要处理多种图片类型（打包图片、网络图片、本地相册图片），可以在JS层先判断资源类型，再选择对应的传递方式。
• Android端注意权限问题，不过打包图片属于应用内部资源，不需要额外权限。

内容的提问来源于stack exchange，提问作者Gerharddc