本地存储的图像动态加载本地存储图像

我需要这样我所有的静态本地资源：

资产/ 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语句

来源

2017-06-18 Martin

嗯，这是因为IMAGE_NAME是与images.cardOne而images.cardOne值的字符串等也是一个字符串，但与文件系统中图像实际路径的值（例如./app-logo.png）。所以，如果要加载图像动态地反对IMAGE_NAME，你应该使用括号标记，像这样：

const image_name = images[`card${item.cardName}`];

这样IMAGE_NAME现在将指向您的图像的路径（例如./app-logo.png）。

来源

2017-06-18 00:56:28

谢谢，这工作的魅力 – Martin

本地存储的图像动态加载本地存储图像

回答

相关问题