从数据库渲染本地图像

Question

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

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

我该怎么做？

Answer 1

像这样向您的数据集添加要求

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

Answer 2

转到 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]} />

从数据库渲染本地图像

Rendering local images from database

react-native

react-image