时间戳

首页 > 解决方案 > 尝试将要求与字符串连接一起使用时出现“TransformError：无效调用”

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

问题描述

我有这种格式的数据：

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: 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”的图像

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

标签： javascriptreact-native

解决方案

使用的名称require需要静态知道。当您添加'./images/' + 10 + '.png'它时立即翻译，./images/10.png但当您动态执行它时，它将不起作用。

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

React Native - 使用动态名称的图像需要模块

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

推荐阅读