たくさんの画像を持つ本物のダイナミック画像

Question

私は150枚の画像にリンクする150個のボタンの配列を持っています。ボタンを押すと画像を表示する必要があります。ボタンの情報はJSONファイルに保存されます。絵の名前は今、私は私が書くことができない問題に直面しています

ボタンのIDがされているので、1.JPG、2.JPGなど：

fish["image"] = {uri: "asset-library://" + fish.id + ".jpg"}; 

そして、もし持つ他のソリューション私は非常に多くのオプション、アイデアを持っているので、ステートメントは機能しませんか？

ありがとうございました

Answer 1

私は同様の問題がありました。私は巨大なswitch文を含む関数を構築し、すべての場合にstaticが必要です。

function getImage(id) { 
    switch(id) { 
     case 1: 
      return require('./img/1.jpg'); 
     case 2: 
      return require('./img/2.jpg'); 
     ... 
    } 
} 

今、あなたは

fish["image"] = getImage(fish.id); 

を行うことができます私はまた、100以上のアイコンを使用しなければならなかったので、代わりに手でケースを書くのは、私は自動的に機能を生成するスクリプトを構築しました。

Answer 2

開発したコンポーネントでこの問題が発生しました。私はjsonファイルでbase64イメージを使用しました。しかし、それはあなたのためにはあまり適していないかもしれない、私はそれが助けてくれることを望む。 https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/index.js#L137-L139

をそして、あなたはそれ上のファイルとフォルダを持っている場合は、単にそのように画像を変換：

<Image 
    style={styles.imgStyle} 
    source={{uri: CountryFlags[country.cca2]}} 
/> 

あなたはここでそれを見ることができます

#!/bin/sh 

list=`ls ./flags | grep '[A-Z]'` 

echo "{" 
for item in $list 
do 
    header="data:image/png;base64," 
    img64=`ls ./flags/$item | xargs cat | base64` 
    echo ${item:0:2} :\'$header$img64\', 
done 
echo "}"