本地存儲的圖像動態加載本地存儲圖像

我需要這樣我所有的靜態本地資源：

資產/ 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

本地存儲的圖像動態加載本地存儲圖像

回答

相關問題