React-native dynamische Bilder mit vielen Bildern

Question

Ich habe eine Reihe von 150 Tasten, die zu 150 Bildern verknüpfen, ich muss das Bild zeigen, sobald die Taste gedrückt wird. Die Informationen für die Schaltflächen werden in einer JSON-Datei gespeichert. Die Bilder Namen sind die IDs der Tasten, so 1.jpg, 2.jpg usw.

Jetzt bin ich vor dem Problem, dass ich nicht schreiben kann:

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

Und die andere Lösung mit, wenn Aussagen funktionieren nicht, da ich so viele Möglichkeiten habe, irgendwelche Ideen?

Vielen Dank

Answer 1

hatte ich ein ähnliches Problem. Ich habe eine Funktion erstellt, die eine große switch-Anweisung enthält und statische Anforderungen für jeden Fall enthält.

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

Jetzt können Sie

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

tun musste ich auch über 100 Symbole verwenden, so dass statt die Fälle von Hand geschrieben wurde, baute ich ein Skript, das die Funktion automatisch erzeugt.

Answer 2

Ich hatte auch dieses Problem für eine Komponente, die ich entwickelt habe. Ich habe Base64-Bild in JSON-Datei verwendet. Aber vielleicht passt es nicht zu dir, ich hoffe es kann helfen.

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

Sie können es hier sehen: https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/index.js#L137-L139

Und wenn Sie einen Ordner mit Dateien auf sie haben, einfach Bilder konvertieren wie folgt aus:

#!/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 "}"