0

我正在制作带有标志的国家/地区选择器。国家名称和标志图像名称来自数据库，如下所示（示例）：

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

然后在组件 FlatList (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>
    );
  }

但是没有渲染标志....如果我对图像进行硬编码（带有要求）它正在工作...

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

我该怎么做？

4

2 回答 2

1

转到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]} />
于 2020-12-18T11:52:48.373 回答
0

将要求添加到您的数据集中，例如

dataSource: [ { ..., image: require('../assets/flags/af.png')}]
于 2020-12-18T10:19:55.713 回答