Question

我在我的React Native Project中通过Image Component：

访问了一个png

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

现在我想在我的Native iOS模块中访问bird.png而不通过Xcode导入它（React Native Packager应该将它添加到构建中，所以我应该有权访问它）。我需要专门为这个Native Module创建一个UIImage。

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

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

更新： Artal的答案是正确的答案。与此同时，我找到了一个替代解决方案来完成这项工作，虽然对我的具体问题没那么有用（尽管在你想要访问React Native Packaged资产但不必重新访问的情况下它仍然有用）桥）。首先，我将展示如何使用桥接器将其合并：

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

上面的代码允许您放入文件路径。您可以通过在Xcode中构建项目来找到React Native Packaged资产的路径，并在左侧的导航器中右键单击Products＆gt; YourApp.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];
}

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

1 个答案: