当我使用数组而不是单个元素时反应本机错误

Question

我用 React Native 编写了这段代码。 但是当我运行它时，我只得到一个错误。怎么了？看来我确实很接近答案了。我已经尝试了一切，但仍然不起作用。

export default function App(){

const couleurs=["blanc", "jaune", "gris"];
const col="jaune";

return(
  
<View>
  <Image
    source={require("./assets/"+couleurs[1]+".png")}
  />
</View>

);
}

但是如果我使用 col 而不是 couleurs[1] 它就完美了。

export default function App(){

const couleurs=["blanc", "jaune", "gris"];
const col="jaune";

return(
  
<View>
  <Image
    source={require("./assets/"+col+".png")}
  />
</View>

);
}

但是我需要使用数组中元素的字符串值。

你能帮我吗？

Answer 1

您可以在此处查看 React Native 文档，其中指定了这一点

为了使其工作，必须静态地知道 require 中的图像名称。

这意味着您无法动态创建源字符串（这是故意的，由于静态媒体的性质），而是它必须包含在变量中或事先已知，他们继续给出这个例子：

// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
const icon = this.props.active
  ? 'my-icon-active'
  : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
const icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;