javascript - 如何将状态放入字符串中？

Question

我需要将我的状态放在一个字符串中，因为我根据“类型”状态来渲染图像。

我尝试过以下模板文字:

 constructor(props) {
 super(props);

 this.state = {
   type: 'cafe'
 }

在我的组件中:

 <Image
      source={require(        
 `../../../assets/icons/${this.state.type}.png`)}
 />

我预计上述结果是:

 <Image
      source={require('../../../assets/icons/cafe.png')}
 />

Answer 1

将模板文字与 this.state 一起使用对于字符串插值应该没问题，但 react-native 的 Image 不支持动态路径需要。请参阅文档:https://facebook.github.io/react-native/docs/images

相反，您可以要求模块级别的所有图像，并使用状态来选择适当的图像。

const images = {
  cafe: require('../../../assets/icons/cafe.png'),
  // .. other images here
};

...

<Image source={images[this.state.type]} />