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

Question

我定义了一个 React Native 类，该类旨在用图像引用填充“tableView”单元格，该图像引用是该类的道具输入。这是通过使用 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'

你的情况发生了什么

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

当您创建产品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.

小吃

这是一个小吃，显示了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

这是我require在Images.js

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