Dynamische erfordern Reagieren Native Bilder

Question

Ich arbeite daran, einige Flags zu enthalten, um Länder in meinem nativen Projekt reagieren. Ich habe festgestellt, dass Sie Bilder wie im folgenden Beispiel nicht dynamisch benötigen, um nativ reagieren zu können.

require(`../assets/flags/32/${countryCode}.png`) 

So die SO Antwort, die ich here gefunden gegeben Ich dachte an eine Funktion mit einer switch-Anweisung erstellen, die das gewünschte Bild zurück, wenn die richtige Flagge Code übergeben zurückkehren würde. So etwas wie das Folgende.

export const Flags = (countryCode) => { 
switch (countryCode) { 
    case 'US': 
    return require('../assets/flags/32/US.png'); 
    .... 
} 
}; 

Ich habe mehr als 200 Fälle mit dieser Lösung. Gibt es einen besseren Weg dies zu tun?

Answer 1

Da es umständlich wäre, alle Bilder manuell zu erstellen, können Sie them to your App image assets hinzufügen und sie über uri anfordern?

<Image source={{uri: 'flags/32/'+countryCode}} style={{width: 32, height: 32}} /> 

Abgesehen davon glaube ich Ihren Vorschlag die einzige andere Lösung ist .. man könnte es etwas aufzuräumen, indem es ein JS-Modul macht.

Flags.js

exports.US = require('../assets/flags/32/US.png') 
exports.UK = require('../assets/flags/32/UK.png') 
exports.FR = require('../assets/flags/32/FR.png') 
exports.JP = require('../assets/flags/32/JP.png') 
... 

Dann verweisen nur es wie so.

Component.js

import Flags from './Flags' 

<Image source={Flags[countryCode]} style={{width: 32, height: 32}} />