Comment puis-je charger dynamiquement des images dans le module Image Require de React Native ?

Noms d'images dynamiques dans le module React Native Image Require

Dans React Native, le module Image Require permet aux développeurs de charger des ressources d'image statiques dans leur candidatures. Bien que le module fonctionne parfaitement avec les noms de fichiers d'images statiques, les noms d'images dynamiques entraînent souvent des erreurs.

Problème :

Un développeur tente d'utiliser une chaîne dynamique pour le nom de fichier d'image. :

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

Cependant, React Native renvoie une erreur indiquant un module inconnu, comme illustré ci-dessous :

Requiring unknown module "image!avatar". If you are sure the module is there, try restarting the packager.

Résolution :

Selon Dans la section « Ressources statiques » de la documentation React Native, les noms d'images doivent être spécifiés de manière statique dans l'attribut source :

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

L'utilisation de chaînes dynamiques pour les noms de fichiers d'images est explicitement déconseillée :

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('image!' + icon)} />

Au lieu de cela, la solution consiste à utiliser le rendu conditionnel pour attribuer des noms de fichiers d'images statiques à une variable :

// GOOD
var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive');
<Image source={icon} />

Considérations supplémentaires :

• Les ressources d'images statiques doivent être ajouté à un bundle xcassets dans l'application Xcode.
• Plus d'informations sur l'ajout de ressources statiques aux applications React Native sont disponibles sur http://facebook.github.io/react-native/docs/image.html#adding -ressources-statiques-pour-votre-application-en-utilisant-images-xcassets.

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!