我已经定义了一个React Native类，该类旨在用图像引用填充“ tableView”单元格，该图像引用是对该类的原始输入。这是通过使用FlatList来调用的。但是，使用Image source标记指定时，此类无法在包中找到输入图像参考。仅当它是硬编码参考时才能找到。
该类的定义如下：
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} />
然后错误消失了。
那么，如何正确引用Resources目录中的.png文件？为什么我的.png文件不在我包的Resources目录中？
答案 0 :(得分：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';
另一种方法是下载文件，然后将其保存在应用程序的documents目录中。通常，您使用rn-fetch-blob或react-native-fs来下载文件并将其保存到某个位置，例如documents目录。
然后您将构建文件的路径并使用它。因此，例如，如果您使用的是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');