objective-c - 如何从 native 代码访问 React Native Assets

Question

我有一个 png，正在我的 React Native 项目中通过图像组件访问:

// app.js
<Image source={require('./images/bird.png')} />

现在我想在我的 Native iOS 模块中访问bird.png，而不需要通过 Xcode 导入它(React Native Packager 应该将其添加到构建中，所以我应该可以访问它)。我需要专门为此 native 模块创建一个 UIImage。

// MYNativeModule.m
RCT_EXPORT_METHOD(doSomething) {
    UIImage *birdImage = [UIImage imageNamed:@"bird.png"];
}

不幸的是，这不起作用。有谁知道如何从React Native包中访问bird.png？

更新:阿塔尔的答案是正确的答案。与此同时，我找到了一个完成这项工作的替代解决方案，尽管对于我的具体问题来说没有那么有用(尽管在您想要访问 React Native 打包 Assets 而不必遍历的情况下它仍然可能有用)桥)。首先，我将展示如何使用桥合并它:

// app.js
NativeModules.MYNativeModule.doSomething("assets/app/images/bird.png")

上面的代码允许您输入文件路径。您可以通过在 Xcode 中构建项目来找到 React Native Packaged asset 的路径，然后在左侧导航器中右键单击 Products > YourApp.app

然后点击“在 Finder 中显示”。然后右键单击 YourApp.app(扩展名可能被隐藏)，然后单击“显示包内容”。从这里，您可以看到包创建的目录布局。它可能会模仿您的应用程序的布局。我认为它是这样创建的，这样您就可以拥有多个同名但位于不同目录中的文件(默认情况下，我相信 Xcode 在创建构建时将所有 Assets 放在根级别。这就是为什么您不能拥有Xcode 项目中具有相同名称的多个 Assets )。然后你的桥接模块就可以如下工作。

// MYNativeModule.m file
RCT_EXPORT_METHOD(doSomething: (NSString *) imagePath) { 
    NSString *bundlePath = [[NSBundle mainBundle] resourcePath];
    NSString *path = [NSString stringWithFormat:@"%@/%@", bundlePath, imagePath];
    UIImage *img = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL fileURLWithPath:path]]];
}

此方法的优点是，如果您提前知道路径，则无需桥即可实现此目的。缺点是你需要知道路径。如果事先不知道路径，那么这将不起作用。

Answer 1

这不起作用，因为除非将图像添加到您的 Xcode 项目中，否则您无法直接访问图像。要在 native 端使用相同的图像，您需要将其传递到 native 模块，以便可以通过桥发送，然后将其转换回 UIImage。

所需的图像只是您的包中映射的 Assets 的 ID，您首先需要在 JS 端解析该 Assets 并将其传递给 native 模块方法:

const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
const birdImage = require('./images/bird.png');

NativeModules.MYNativeModule.doSomething(resolveAssetSource(birdImage));

在 native 端，您将获得一个 json 对象，其中包含现在可以转换的图像信息:

#import <React/RCTConvert.h>

RCT_EXPORT_METHOD(doSomething:(id)image) {
    UIImage *birdImage = [RCTConvert UIImage:image];
}