Maison > interface Web > js tutoriel > le corps du texte

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

DDD
Libérer: 2024-11-19 19:23:02
original
496 Les gens l'ont consulté

How Can I Dynamically Load Images in React Native's Image Require Module?

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')} />
Copier après la connexion

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.
Copier après la connexion

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')} />
Copier après la connexion

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)} />
Copier après la connexion

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} />
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal