如何从本机代码访问本机资产

Question

我有一个png，该png正在我的react本地项目中通过图像组件访问：

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

现在，我想在我的本机iOS模块中访问bird.png，而无需通过Xcode导入它(React Antive Packager应该将其添加到构建中，因此我应该可以访问它(。我需要专门为本机模块创建一个UIIMAGE。

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

不幸的是，这无效。有人知道如何从react本地包装访问bird.png吗？

更新：Artal的答案是正确的答案。同时，我找到了一个替代解决方案，尽管对我的特定问题并不有用(尽管在您想访问React Antive Agenaged Asset而无需越过的情况下，它仍然有用桥(。首先，我将展示如何使用桥梁合并它：

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

上面的代码使您可以放入文件路径。您可以通过在Xcode中构建项目，然后在左侧的导航器中找到React本机包装资产的路径，右键单击产品> yourapp.app.app

然后单击"在Finder中显示"。然后右键单击yourapp.app(可能隐藏扩展名(，然后单击"显示包装内容"。从这里，您可以看到软件包创建的目录布局。它可能会模仿您的应用程序的布局。我认为它是这样创建的，以便您可以拥有具有相同名称的多个文件，但是在不同的目录中(默认情况下，我相信Xcode在创建构建时都将所有资产都放在根级。这就是为什么您不能拥有的原因XCode项目中具有相同名称的多个资产(。然后您的桥模块可以如下。

// 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项目，否则您无法直接访问图像。要在本机侧使用相同的图像，您需要以可以通过桥发送然后将其转换回UIImage的方式将其传递给本机模块。

。

所需的图像只是限制捆绑中映射的资产的ID，您首先需要在JS侧解析资产并将其传递给本机模块方法：

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

在本地侧您会得到一个带有图像信息的JSON对象，该对象现在可以转换为：

#import <React/RCTConvert.h>
RCT_EXPORT_METHOD(doSomething:(id)image) {
    UIImage *birdImage = [RCTConvert UIImage:image];
}