尝试将 require 与字符串连接一起使用时出现“TransformError：无效调用”

Question

我有这样格式的数据：

const data = [
  {
    id: '0',
    title: 'Some title 1'
  },
  {
    id: '1',
    title: 'Some title 2'
  }
  ...
]

我有一个包含图像的文件夹，其中每个图像都被称为“0.png”、“1.png”等，其数量与数据数组长度相同。我想做的是映射数据数组，显示标题和图像，其名称与元素的 id 相同。例如，

<Image source={require('./images/0.png')} />

于是我写了这段代码：

data.map(item => (
  <View>
    <Image source={require(`./images/${item.id}.png`)} />
    <Text>{item.title}</Text>
  </View>
))

这给了我这个错误： Error: TransformError: Invalid call at line 36: require("./images/" + item.id + ".png")

我也试过这样：

<Image source={require('./images/' + item.id + '.png')} />

当我 console.log 使用此串联创建的图像的路径时，它看起来没问题。

顺便说一句，这工作得很好：

<Image source={require('./images/' + 10 + '.png')} />

它显示名为“10.png”的图像

我错过了什么吗？请帮忙！

Answer 1

require需要静态地了解所使用的名称。当您添加'./images/' + 10 + '.png'此操作时，它会立即翻译为./images/10.png，但当您动态执行此操作时，它将不起作用。

解决这个问题的解决方案是uri向数据添加一个数据字段并从那里加载。您可以使用外部脚本（例如在 python 中）生成它。