Question

我知道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（）中使用每个源路径创建一个单独的Image，然后有条件地将其中一个放置在return（）中来使其工作通过userData。

不过，我想找出另一种解决方法，因为它所需的行少很多，而且维护起来也容易得多。

Answer 1

将所有require语句保留在单独的文件中，例如

image.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"
     />

在用于映射时，React Native的“ require”语句解析为数字

1 个答案: