2

我知道 require('') 需要一个静态字符串，但是当我尝试在包装中映射值以供稍后在代码中使用时

const BOXES2 = {
  silver: require('../../assets/imgs/status/silveroutline.png'),
  gold: require('../../assets/imgs/status/goldoutline.png'),
  platinum: require('../../assets/imgs/status/platinumoutline.png')
}

它们解析为整数，以下记录数字 6

constructor(props) {
    super(props);
    var data = BOXES2[this.props.userData.memberStatus];
    console.log(data);
  }

所以我无法加载这样的图像

<Image
        source={BOXES2[this.props.userData.memberStatus]}
        style={img}
        resizeMode="contain"
      />

memberStatus 是一个字符串值，数据和图像路径是正确的，因为我可以通过直接在 render() 中使用每个源路径创建一个单独的图像来使其工作，然后由 userData 有条件地将其中一个放入 return() .

不过，我想另辟蹊径，因为它需要的行数要少得多，维护起来也容易得多。

4

1 回答 1

2

将所有要求语句保存在单独的文件中，例如

图像.js

export default {                                                                
  silver: require('../../assets/imgs/status/silveroutline.png'),
  gold: require('../../assets/imgs/status/goldoutline.png'),
  platinum: require('../../assets/imgs/status/platinumoutline.png')
};

并在您的屏幕中导入此文件，如下所示：

import BOXES2 from 'src/config/Images';

像这样导入使用图像组件后：

 eg: <Image
         source={BOXES2[this.props.userData.memberStatus]}
         style={img}
         resizeMode="contain"
     />
于 2018-08-06T14:30:00.983 回答