我试图使用map方法循环遍历SOURCE数组，但是我一直收到这个错误：
未知的命名模块：“../images/one.jpeg”
有人知道这是为什么吗？ require中的文件路径肯定是正确的。
var SECTIONS = [
{
title: 'One',
fileName: 'one.jpeg',
},
{
title: 'Two',
fileName: 'two.jpeg',
},
{
title: 'Three',
fileName: 'three.jpeg',
},
{
title: 'Four',
fileName: 'four.jpeg',
},
];
{SECTIONS.map((section, i) => (
<CategoryCard
key={i}
source={require(`../images/${section.fileName}`)}
title={section.title}
/>
))}
我认为这不可能，因为React Native需要提前知道要捆绑什么（据我所知）。但是，您可以require数组中的所有文件：
var SECTIONS = [
{
title: 'One',
file: require('../images/one.jpeg'),
},
{
title: 'Two',
file: require('../images/two.jpeg'),
},
{
title: 'Three',
file: require('../images/three.jpeg'),
},
{
title: 'Four',
file: require('../images/four.jpeg'),
},
];
{SECTIONS.map((section, i) => (
<CategoryCard
key={i}
source={section.file}
title={section.title}
/>
))}
<?>PNG ... unexpected character <?>。它包括图像并试图将图像作为文件读取。<?>是一个无法识别的字符，而不是实际的三个字符< ? >。 - kojow7您不能使用动态链接。我找到的最好的解决方法是:
var SECTIONS = {
One: {
title: 'One',
file: require('../images/one.jpeg'),
},
Two: {
title: 'Two',
file: require('../images/two.jpeg'),
},
Three: {
title: 'Three',
file: require('../images/three.jpeg'),
},
Four: {
title: 'Four',
file: require('../images/four.jpeg'),
},
};
{SECTIONS.map((section, i) => (
<CategoryCard
key={i}
source={section.file}
title={section.title}
/>
))}
<Image source={SECTIONS[image.type]} />
已经有一个可行的解决方案，虽然不建议用于大型图片，但对于（许多）小型图片完美地工作。
步骤：
例如： ImageData.json
{
"icon1": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQ.......==",
"icon2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQ.......=="
}
3.将JSON文件导入到需要动态加载图像的位置。
例如：
const imageData = require("./images/ImageData.json")
4：在运行时获取/生成密钥/文件名，并获取图像源。
例如：
const imageSrc = imageData[keyname]
5：在运行时动态生成图像。
例如：
<Image style={{ width: 70, height: 70, resizeMode: Image.resizeMode.contain }} source={ uri: imageSrc } />
完成了...
额外的... 编写了一个辅助 Python 脚本来自动化创建 JSON 文件。
import base64
import os
directory = os.fsencode('.')
with open('ImagesData.json', 'wb') as jsonFile:
jsonFile.write(bytes('{', 'utf-8'))
written = False
for file in os.listdir(directory):
filename = os.fsdecode(file)
if filename.endswith('.png'):
with open(filename, "rb") as image_file:
if written:
jsonFile.write(bytes(',\n','utf-8'))
encoded_string = base64.b64encode(image_file.read())
jsonFile.write(bytes(('"' +filename+ '":'), 'utf-8'))
jsonFile.write(bytes('"data:image/png;base64,', 'utf-8') + encoded_string + bytes('"', 'utf-8'))
written = True
jsonFile.write(bytes('}', 'utf-8'))
我曾经遇到过同样的问题，但我的情况有些不同。我有一个包含不同对象的数组，这些对象需要动态图片。我已经在映射数组，但我需要根据名称将图像与该数组匹配。这有点hacky，但这是我处理它的方式。
首先，在我的父组件中，我创建了一个函数来渲染我的对象数组的组件。我将对象数据传递到名为“object”的prop中。
在我的情况下，我知道我的数据是什么，并且我需要将相应的图像与从外部api中提取数据的对象匹配。
renderObjects() {
return this.state.objects.map(object => (
<ObjectListDetail
key={object.id}
next
props={this.props}
object={object}
/>
));
}
var icons = [
{ name: "BTC", source: Images.btc },
{ name: "ETH", source: Images.eth },
{ name: "ETC", source: Images.etc },
{ name: "ZRX", source: Images.zrx },
{ name: "USDC", source: Images.usdc },
{ name: "LTC", source: Images.ltc },
{ name: "BCH", source: Images.bch },
{ name: "USD", source: Images.usd }
];
注意***我已经将所有的图片都放在一个单独的文件中，并在顶部导入了它们。
然后，我创建了一个名为imgSrc的变量，并过滤结果以匹配我传递给子组件的对象的名称。
var imgSrc = icons.filter(
icon => icon.name === props.wallet.name
)
<Image source={imgSrc[0].source} />