require()必须有一个字符串文字参数React Native

Question

我的应用程序中的组件如果被分配了直接字符串值("someImage.png"),它可以正常工作,但如果我尝试通过将图像名称存储在局部变量中来分配它,则会给出此异常"require()必须具有单个字符串文字参数"此行正常工作

<ImageBackground source={require("./Resources/bg/imageone.png")} resizeMode='cover' style={customStyles.backdrop}>

在这种情况下会出现问题

let imageName = "./Resources/bg/imageone.png";          
<ImageBackground id="123" source={require(imageName)} resizeMode='cover' style={customStyles.backdrop}>

我也发现这里报道了同样的问题,但还没有人回答.你能帮帮我吗？

Answer 1

此动态图像示例还可以显示如何使用图像源值正确分配变量.建议将整体分配给require变量,而不仅仅是其值.

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

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

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

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

希望能帮助到你

Answer 2

如果您在数据中有索引,那么我对此问题的处理方法是:

const image1 = require('../assets/images/image1.png');
const image2 = require('../assets/images/image2.png');
const image3 = require('../assets/images/image3.png');

const images = [image1, image2, image3];

...

<Image source={images[index]} />