代码之家 › 专栏 › 技术社区 › JeffB6688

在React Native中找不到映像文件

react-native image

0

JeffB6688 · 技术社区 · 7 年前

该类定义如下:

class ListItem extends React.PureComponent {
    _onPress = () => {
        this.props.onPressItem(this.props.index);
    }

    render() {
        const item = this.props.item; 

        console.log("ChannelSelection Mix Button artwork: ", item.artwork);
        return (
          <TouchableHighlight
            onPress={this._onPress}
            underlayColor="transparent">
            <View>
              <View style={styles.rowContainer}>
                <Image source={{ uri: item.artwork }} style={styles.buttonContainer} />
                <View style={styles.mixButtonTitleContainer}>
                  <Text style={styles.mixButtonTitle}
                    numberOfLines={2}>{item.channelTitle}</Text>
                </View>
              </View>
            </View>
          </TouchableHighlight>
        );
    }
}

Warning
Could not find image file:///Users/myname/Library/Developer/CoreSimulator/Devices/34AE8A68-E69D-4804-B3C4-96DE7A051B9B/data/Containers/Bundle/Application/C79368E9-3D1B-492C-B72B-9BF5C4D3262B/myApp.app/./Resources/MissingAlbumArt.png

打印item.artwork的控制台输出为:

'ChannelSelection Mix Button artwork: ', './Resources/MissingAlbumArt.png'

请注意,如果我更改该行:

<Image source={{ uri: item.artwork }} style={styles.buttonContainer} />

<Image source={require('./Resources/MissingAlbumArt.png')} style={styles.buttonContainer} />

那么,如何正确引用我的资源目录中的.png文件呢?为什么我的.png文件不在我的包的资源目录中?

0 回复 | 直到 7 年前

1

5

Andrew 7 年前

`require`

使用图像的一种方法是在bundle中。您可以使用

const imageName = require('./path/to/the/image/imageName.png');

Images.js )包含我的所有要求,然后导出图像。因此,在文件中,它将是一个如下所示的需求列表

export const imageName = require('./path/to/the/image/imageName.png');

然后,当我想使用图像时,我会像这样导入图像:

import { imageName } from '.path/to/Images.js';

在设备上使用图像

另一种方法是下载文件,然后将其保存在应用程序的documents目录中。通常你用 rn-fetch-blob react-native-fs 下载文件并将其保存到某个位置,如documents目录。

然后构建文件的路径并使用该路径。例如,如果您使用您可以按照以下方式构造路径,

let pathToImage = RNFS.DocumentDirectoryPath + '/path/to/dowloaded/file/imageName.png'

你把这两种方法混在一起了。在开发过程中,图像尚未存储在设备上。它们当前由捆绑机提供给设备。这样你就必须使用 要求 方法来访问它们。当您使用它们时,它们会被复制(查看捆绑程序中的日志,您将看到它的发生)。

当您创建产品时 ipa 或 apk 所有的图像和代码被捆绑在一起并添加到应用程序中 要求 语句告诉设备在该捆绑包中查找图像的位置。如果要在将文件绑定到 ipa 或 apk 它在开发中不起作用,最终会出现类似的错误。

如果您尝试使用与下面类似的路径访问该文件,它将无法工作,因为该文件不在那里,因为该文件位于捆绑包中。最好使用 要求 方法。

file:///Users/myname/Library/Developer/CoreSimulator/Devices/34AE8A68-E69D-4804-B3C4-96DE7A051B9B/data/Containers/Bundle/Application/C79368E9-3D1B-492C-B72B-9BF5C4D3262B/myApp.app/./Resources/MissingAlbumArt.png

还有一件事需要注意的是 iOS react-native run-ios 网间网操作系统 .

小吃

以存储文件所需的所有数据。 https://snack.expo.io/@andypandy/requiring-images

âââ App.js
âââ Images.js
âââ README.md
âââ app.json
âââ assets
âÂ Â  âââ bart.png
âÂ Â  âââ lisa.png
âÂ Â  âââ maggie.png
âÂ Â  âââ parents
âÂ Â      âââ homer.jpg
âÂ Â      âââ marge.jpg
âââ components
âÂ Â  âââ AssetExample.js
âÂ Â  âââ SecondAssetExample.js
âââ package.json

下面是我如何构建报告中的发言

export const MARGE = require('./assets/parents/marge.jpg');
export const HOMER = require('./assets/parents/homer.jpg');
export const BART = require('./assets/bart.png');
export const MAGGIE = require('./assets/maggie.png');
export const LISA = require('./assets/lisa.png');