首页 文章

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

提问于
浏览 次
0

我在我的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> 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]]];
}

这种方法的优点是，如果您提前了解路径，则可以在没有桥接的情况下执行此操作 . 否定的是你需要知道路径 . 如果提前知道路径，那么这将不起作用 .

objective-c react-native

1 回答

  • 2

    除非将图像添加到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];
}
    回复于

相关问题