Dynamique nécessitant des images React Native

Question

Je travaille sur l'inclusion de quelques drapeaux pour représenter des pays dans mon projet react native. J'ai découvert que vous ne pouvez pas exiger dynamiquement des images comme l'exemple ci-dessous en react native.

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

Donc, étant donné la réponse de l'OS, j'ai trouvé aquí Je pensais créer une fonction avec une instruction de commutation qui renverrait l'image requise lorsqu'on lui passerait le bon code de drapeau. Quelque chose comme le suivant.

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

Je vais avoir bien plus de 200 cas avec cette solution. Existe-t-il une meilleure façon de procéder ?

Answer 1

Comme il serait fastidieux d'exiger manuellement toutes les images, pouvez-vous ajouter à vos images d'applications et les requérir via uri ?

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

Sinon, je pense que votre proposition est la seule autre solution vous pourriez la nettoyer légèrement en en faisant un module JS.

Drapeaux.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')
...

Ensuite, il suffit de le référencer comme ça.

Composant.js

import Flags from './Flags'

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