React Native 'require' 语句在映射中使用时解析为数字

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() 中使用每个源路径创建一个单独的图像，然后将其中一个放在 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' 语句在映射中使用时解析为数字

React Native 'require' statement resolves to a number when used in mapping

react-native

react-native-android

react-native-ios

react-component

react-image