从数据库渲染本地图像
从数据库渲染本地图像
提问于 2020-12-18 17:54:04
我在做一个带着旗帜的乡村采摘者。国家名称和旗帜图像名称来自数据库，如下所示(示例)：
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'
}]然后我将该dataSource发送到我的组件
<CountryPickerFlags
dataSource={this.state.dataSource}
/>然后在component 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>
);
}但是旗帜不会被渲染...如果我硬编码图像(使用require)，它就可以工作了……
<Image source={require("../assets/flags/af.png")} />我该怎么做呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-12-18 19:52:48
转到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]} />Stack Overflow用户
发布于 2020-12-18 18:19:56
将require添加到数据集，如下所示
dataSource: [ { ..., image: require('../assets/flags/af.png')}]页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65354887
复制相关文章
相似问题
腾讯云开发者
