Comment puis-je charger dynamiquement des images dans React Native sans l'erreur « Module inconnu requis » ?

Exigences relatives aux images dynamiques dans React Native

Lorsque vous travaillez avec le module Image de React Native, il est essentiel de considérer la manière dont les noms d'images sont référencés lorsque vous devez utiliser des noms dynamiques.

Dans les scénarios standards, l'utilisation d'un nom d'image statique dans la fonction require() fonctionne parfaitement. Cependant, l’utilisation d’un nom d’image dynamique peut entraîner des complications. Ce problème survient lorsque vous tentez d'inclure une chaîne avec le nom de l'image dynamique à l'aide de require('image!' 'avatar'). En conséquence, vous pouvez rencontrer l'erreur frustrante « Module inconnu requis ».

Prise en charge du nom d'image dynamique de React Native

Malheureusement, selon la documentation de React Native, il existe une limitation lorsque vous travaillez avec noms d'images dynamiques. Dans la section dédiée aux « Ressources statiques », la documentation indique explicitement que la « seule façon autorisée de faire référence à une image dans le bundle est d'écrire littéralement require('image!name-of-the-asset') dans la source. " Cela signifie que vous ne pouvez pas simplement concaténer une chaîne avec le nom de l'image pour la rendre dynamique.

Gestion des exigences d'image dynamique

Pour contourner cette limitation, vous devrez attribuer le nom de l'image dynamique à une variable. Voici comment y parvenir :

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

Vous pouvez également utiliser la fonction d'assistance Asset() du package React-Native pour exiger dynamiquement des images :

import { asset } from 'react-native';

const dynamicImageSource = asset('image!' + icon);

<Image source={dynamicImageSource} />

N'oubliez pas que pour avec ces deux méthodes, vous devez toujours ajouter vos images à un bundle xcassets dans votre application dans Xcode.

En adhérant à ces deux méthodes directives, vous pouvez utiliser efficacement les noms d'images dynamiques dans votre application React Native sans rencontrer la redoutable erreur « Nécessitant un module inconnu ».

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!