React Собственный оператор '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

Сохранить все требуемые операторы в отдельном файле, как

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