本地存储的图像动态加载本地存储图像
问题描述:
在循环/列表中动态加载图像资源的问题。本地存储的图像动态加载本地存储图像
我需要这样我所有的静态本地资源:
资产/ images.js
const images = {
appLogo: require('./app-logo.png'),
cardOne: require('./cards/card-1.png'),
cardTwo: require('./cards/card-2.png'),
...
cardForty: require(./cards/card-40.png)
}
export default images;
在我的列表画面
然后:
...
import images from '../assets/images';
...
renderListItems(item) {
const image_name = `images.card${item.cardName}`;
console.log(image_name); // images.cardOne, images.cardTwo etc..
return (
<ListItem avatar>
<Thumbnail square size={80} source={image_name} /> // This is nativebase component which wraps the RN image component
<Body>
<Text>{item.name}</Text>
</Body>
<Right>
<NBIcon name="arrow-forward" />
</Right>
</ListItem>
);
}
...
没有资源获取加载。然而,如果我直接将source = {image_name}更改为source = {images.cardOne}(其中images.cardOne与第一次迭代中的image_name变量完全相同),它的工作原理 - 除了它们都具有相同的图像。
我也尝试过使用{{uri:image_name}}语法,但是也没有任何反应。
似乎没有要任何解决这个,比创建一个巨大的switch语句
答
嗯,这是因为IMAGE_NAME是与images.cardOne
而images.cardOne值的字符串等也是一个字符串,但与文件系统中图像实际路径的值(例如./app-logo.png
)。所以,如果要加载图像动态地反对IMAGE_NAME,你应该使用括号标记,像这样:
const image_name = images[`card${item.cardName}`];
这样IMAGE_NAME现在将指向您的图像的路径(例如./app-logo.png
) 。
谢谢,这工作的魅力 – Martin