Comment afficher des images nommées dynamiquement dans React Native ?

Noms d'images dynamiques dans React Native : utilisation du module Image Require

Lorsque vous travaillez avec React Native, le module Image vous permet d'afficher des images dans vos candidatures. En règle générale, les images peuvent être référencées de manière statique à l'aide de la syntaxe require('image!name-of-the-asset').

Cependant, une question courante se pose lorsque l'on tente d'utiliser des noms d'image dynamiques. Par exemple, si vous avez une chaîne dynamique représentant le nom d'une image, telle que « avatar », le code suivant ne fonctionnera pas :

<Image source={require('image!' + 'avatar')} />

Cela entraînera l'erreur « Nécessite un module inconnu » image!avatar "".

Explication

Selon la documentation React Native, les ressources statiques doivent être référencées directement à l'aide du syntaxe statique mentionnée précédemment. Le chargement dynamique des images n'est pas pris en charge.

// Correct:
<Image source={require('image!my-icon')} />

// Incorrect:
var icon = 'my-icon-active';
<Image source={require('image!' + icon)} />

Solution alternative

Si vous devez utiliser des noms d'image dynamiques, vous pouvez stocker les éléments d'image dans un tableau séparé ou objet, puis référencez-les à l'aide de l'accessoire source du composant Image :

const images = {
  avatar: require('image!avatar'),
  logo: require('image!logo'),
};

<Image source={images[dynamicImageName]} />

Supplémentaire Remarque

Pour iOS, vous devez penser à inclure vos images dans un catalogue d'actifs au sein de votre projet Xcode. Ceci est nécessaire pour que les images soient correctement référencées dans votre application React Native.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!