Блог

Я делаю подборщик стран с флагами. Названия стран и названия изображений флагов поступают из базы данных, вот так (пример):

 dataSource: [
{
  id: 1,
  name: "Afghanistan",
  image: '../assets/flags/af.png'
},
{
  id: 2,
  name: "Bahrain",
  image: '../assets/flags/ba.png'
},
{
  id: 3,
  name: "Canada",
  image: '../assets/flags/ca.png'
}]
 

Затем я отправляю этот источник данных в свой компонент

                         <CountryPickerFlags
                          dataSource={this.state.dataSource}
                        />
 

Затем в компонентном плоском списке (renderItem) Я так и делаю:

   _renderItemListValues(item, index) {
      var image_uri = {uri: item.image} ;   
      
      console.log(JSON.stringify(image_uri));
        
    return (
    
      <TouchableOpacity
        activeOpacity={1}
        style={styles.listRowClickTouchStyle}
        onPress={() => this._setSelectedIndex(item.id, item.name)}
      >
        <View style={[styles.listRowContainerStyle,{ flexDirection:'row', justifyContent: 'center', alignItems: 'center'}]} >
          <Image source={image_uri} />
          <Text style={styles.listTextViewStyle}>{item.name}</Text>
        </View>
      </TouchableOpacity>
    );
  }
 

Но флаг не отображается….
Если я жестко закодирую изображение (с помощью require), оно будет работать…

   <Image source={require("../assets/flags/af.png")} />
 

Как я могу это сделать?

Перейдите в assets папку, создайте файл prepareImages.js и вставьте в него следующее:

 const fs = require("fs");
const files = fs.readdirSync("./assets/flags").filter(x => x.includes("png"));
const ex = "{n"  
files.map(x => `"../assets/flags/${x}": require("./${x}"),`).join("n")   "}";
const res = "export default "   ex;
fs.writeFileSync("./assets/flags/index.js", res);
 

Это создаст index.js файл, в котором будет находиться подобный объект:

 "../assets/flags/af.png": require("./af.png"),
 

Импортируйте изображения из этого файла, в котором вы визуализируете Image компонент.

 import images from "../assets/flags/images";
 

Рендеринг источника изображения таким образом:

 <Image source={images[image_uri]} />
 

Добавьте требование к вашему набору данных, например

 dataSource: [ { ..., image: require('../assets/flags/af.png')}]