反応したネイティブアプリケーションのfirebaseから画像を動的に表示

Question

すでにfirebaseからデータを抽出して表示しました。今私も画像を表示する必要があります。 firebaseデータベースでは、私は以下の画像と同じ構造を持っています

そして、 "Carl.png"の例のように全く同じ名前の画像がすべて入っているフォルダがプロジェクトの下にあります "Myproject/img /" + photo + ".png"の残りのパスと組み合わされ、画面に正しく表示されます。 しかし、私は画像に影響を与えようとするとエラーが発生します。そして、ここで私は

<Image style={{width: 50, height: 50}} source={{uri : (this.props.item.imageName)}}> </Image> 

をしようとしたコードがあると私はこの を取得し、私は <Image style={{width: 50, height: 50}} source={{ uri: <Text> this.props.item.imageName </Text> }}> </Image>に入れしようとした場合、私はこの を取得し、私はこのコードを置けば、ここ source={require(this.props.item.imageName)}は私が得るものです：uが nknown命名しますモジュール

Answer 1

はあなたがタグを開閉&の間のスペースを持っている <Image style={{width: 50, height: 50}} source={{uri : (this.props.item.imageName)}} />

てみてください。 ソースは、= {（「./ IMG/『+写真+』。PNG」）を必要と}

Answer 2

は、あなたのソース属性になるので、あなたはローカルストレージからそれをロードしているので、必要に使用して、それをロードしてくださいReactネイティブは、ローカルに保存されていてもダイナミックイメージをサポートしておらず、ダイナミックイメージの名前を動的に変更する必要があります。だから、私が使用することを余儀なくされた唯一の解決策は、大規模なスイッチケースと、ここで私が使用したコードを使用することでした：

 switch (item.name) { 
       case 'carl': 
        return (
         <Image source{require('pathUnderProject/carl.png')}/> 
        ); 
... 
       default: 
        return (
         <View > 
          <Text>{'Null'}</Text> 
         </View> 
        ); 

を私はそれが最善の解決策ではないと知っているが、少なくとも私はそれがうまく働いていると確信していますそれは生産環境で壊れません

Answer 3

を実際：