image - 无法在 React Native 中找到图像文件

Question

我已经定义了一个 React Native 类，该类旨在使用图像引用填充“tableView”单元格，该图像引用是该类的 prop 输入。这是使用 FlatList 调用的。但是，当使用图像源标签指定时，此类无法在包中找到输入图像引用。仅当它是硬编码引用时才能找到它。

类定义如下:

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 文件不在我的包的 Resources 目录中？

Answer 1

使用带有require

的图像

使用图像的一种方式是在包中。您可以使用

访问这些图像

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';

在设备上使用图像

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

然后您将构造文件的路径并使用它。因此，例如，如果您使用的是 react-native-fs，您可以按以下方式构建路径，

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

你的情况发生了什么

您正在混合使用这两种方法。当您进行开发时，图像尚未存储在您的设备上。它们目前由 bundler 提供给设备。这样你就必须使用 require 方法来访问它们。当您使用它们时，它们会被复制(查看您的 bundler 中的日志，您会看到它发生了)。

当您创建产品 ipa 或 apk 时，所有图像和代码都会捆绑在一起并添加到应用程序中，require 语句告诉在该包中查找图像的设备。如果您在将文件捆绑到 ipa 或 apk 后尝试使用该文件的路径，那么它在开发中将不起作用，您最终会得到一个类似的错误。

如果您尝试使用与下面类似的路径访问该文件，它将无法工作，因为该文件不存在，因为该文件在包中。最好使用 require 方法。

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 虽然应用程序被重新加载并且只有一个应用程序出现在设备上，但它实际上可以移动文件夹所以最好动态构建指向你保存到的文件的链接iOS 上的任何目录。

小吃

这里有一个 snack，展示了使用 Images.js 来存储文件的所有要求。 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

下面是我如何在 Images.js

中构造 require 语句

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');