局所的に格納されたイメージのダイナミックローディングとネイティブの反応

ループ/リスト内のイメージリソースの動的ロードに問題があります。局所的に格納されたイメージのダイナミックローディングとネイティブの反応

私のような必要なすべての私の静的なローカルリソースがあります。

資産/ 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}}構文も使用してみましたが、何も起こりません。

まあそれはimages.cardOneも文字列であるのに対し、イメージ名がimages.cardOneの値を持つ文字列ですので、だけどで大規模なswitch文

出典

2017-06-18 Martin

を作成する以外に、これを任意の解決策があるように思えません。ファイルシステム内のイメージの実際のパスの値（例：./app-logo.png）。ですから、イメージがイメージ名に動的にオブジェクトをロードしたい場合は、あなたがそうのようなブラケット表記を使用する必要があります。

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

イメージ名は今（例えば./app-logo.png）あなたのイメージのパスを指しますその方法は、。

出典

2017-06-18 00:56:28

ありがとうございました – Martin

局所的に格納されたイメージのダイナミックローディングとネイティブの反応

答えて

関連する問題