javascript - 尝试将 require 与字符串连接一起使用时获取 "TransformError: Invalid call"

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

这给了我这个错误:错误:TransformError:第 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 但当您动态执行时，它不会'不工作。

https://facebook.github.io/react-native/docs/images.html

React Native - Image Require Module using Dynamic Names

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