Les images sont faciles à ajouter à votre application React Native. Obtenez tous les tenants et les aboutissants du composant Image intégré.

Les images apportent beaucoup de valeur aux applications mobiles. Ils peuvent aider à illustrer des concepts, transmettre des informations, créer un intérêt visuel et fournir un contexte pour un contenu spécifique que vous ne voudrez peut-être pas manquer aux utilisateurs de votre application.

Le composant React Native Image

Le composant d'image React Native est le composant par défaut fourni par la bibliothèque React Native pour rendre les images dans vos applications mobiles. Le composant peut charger des images à partir de sources locales et distantes. Il fournit plusieurs accessoires pour la personnalisation et le style des images rendues.

Pour utiliser le composant image dans votre application, importez Image du réagir-natif bibliothèque:

importer Réagir depuis'réagir';
importer { Feuille de style, image, vue } depuis'réagir natif';
constante Application = 





instagram viewer

() => {
retour (

 style={styles.image}
 source={exiger('./assets/mon-image.jpg')}
 />
 </View>
 );
};
constante styles = StyleSheet.create({
 récipient: {
 fléchir: 1,
 alignItems: 'centre',
 JustifierContenu: 'centre',
 },
 image: {
 largeur: 200,
 hauteur: 200,
 borderRadius: 100,
 },
});

Ci-dessus est un simple Application composant avec une image. Le Image le composant prend un style accessoire qui définit le largeur, hauteur, et borderRadius de l'image. Il faut aussi un source prop qui charge l'image à partir d'un fichier local situé dans le dossier "assets" du répertoire de l'application. Le source prop définit le chemin de l'image à inclure et peut accepter des sources d'image locales et réseau/distantes.

Les images locales sont disponibles sur l'appareil de l'utilisateur et vous pouvez les stocker de manière temporaire ou permanente. Vous pouvez stocker des images locales dans le répertoire de projet de l'application, comme un actifs dossier. Vous pouvez également localiser des images en dehors du répertoire de l'application, comme dans la pellicule ou la photothèque de l'appareil. Voici un exemple de chemin source vers une image locale :

uri: 'fichier:///chemin/vers/mon-image.jpg' }} />

Les images réseau sont livrées via le Web. Ils peuvent inclure des URL HTTP/HTTPS ou des URI de données codées en base64, qui intègrent des données directement dans l'URL à l'aide du schéma de codage Base64.

Accessoires pour personnaliser le composant d'image

Il existe plusieurs accessoires que vous pouvez utiliser pour styliser et personnaliser le composant React Native Image.

resizeMode

Le resizeMode prop détermine comment React doit redimensionner et positionner une image dans son conteneur. Plusieurs valeurs sont disponibles pour resizeMode, dont chacun affectera l'image différemment.

  • couverture: Cette valeur mettra l'image à l'échelle de manière uniforme afin que les deux dimensions soient égales ou supérieures à l'élément qui la contient. L'image est alors centrée dans le conteneur. L'utilisation de cette valeur peut entraîner le recadrage de l'image pour conserver le rapport hauteur/largeur.
  • contenir: Cela tentera d'adapter et de centrer parfaitement l'image dans les dimensions du conteneur. Cependant, cela peut entraîner un espace vide autour des bords de l'image.
  • extensible: Le extensible La valeur étire l'image pour remplir tout le conteneur, quel que soit le rapport d'aspect. Parfois, l'image se déforme.
  • répéter: Cette valeur répète l'image à la fois horizontalement et verticalement pour remplir tout le conteneur.
  • centre: Cela centrera l'image dans l'élément conteneur sans la mettre à l'échelle.

en charge

C'est un fonction de rappel qui s'exécute lorsque l'image a fini de se charger. Vous pouvez l'utiliser pour effectuer des actions après le chargement de l'image, telles que la mise à jour de l'état du composant ou l'affichage d'un message à l'utilisateur.

sur erreur

Le sur erreur prop s'exécutera si ou quand l'image ne se charge pas. Il fournit un moyen d'effectuer les actions nécessaires en cas d'erreur lors de la tentative de chargement de l'image. Vous pouvez afficher un message d'erreur à l'utilisateur ou réessayer de charger l'image.

source par défaut

Cet accessoire spécifie une image de secours à afficher si l'image principale ne se charge pas. Vous pouvez l'utiliser pour fournir une image par défaut ou une image d'espace réservé pendant le chargement de l'image principale.

Gestion des images distantes à partir d'une API

Vous devrez peut-être obtenir l'image de votre application à partir d'une API ou d'un serveur distant et l'afficher dans votre application. Vous pouvez utiliser le React intégré aller chercher fonction ou une Bibliothèque de requêtes API comme Axios dans ce but.

Voici un exemple de récupération et d'affichage d'une image à partir d'une API distante à l'aide de aller chercher fonction:

constante [imageUri, setImageUri] = useState(nul);
useEffet(() => {
 aller chercher(' https://example.com/api/images/1')
 .alors(réponse => réponse.json())
 .alors(données => setImageUri (data.url))
 .attraper(erreur =>console.error (erreur));
}, []);
retour (

 {imageUri? (
uri: imageUri }} />
 ): (
Chargement...</Text>
 )}
 </View>
);

L'exécution de ce code dans votre application récupérera une image à partir du lien d'API distant défini. L'exemple crée d'abord une variable d'état pour le imageUri. Dans un utiliserEffet crochet, le aller chercher fonction récupère l'imageUri et le stocke dans la variable d'état en utilisant setImageUri().

Enfin, il rend le Image composant avec le source prop défini sur l'URI de l'image pendant qu'un indicateur de chargement s'affiche, en attendant que l'image s'affiche.

Utilisation de la propriété de stratégie de cache pour contrôler le comportement du cache

Votre navigateur peut mettre en cache les images qu'il charge à partir d'URL distantes, afin de pouvoir les recharger rapidement à l'avenir. Vous pouvez personnaliser le comportement de l'image mise en cache à l'aide de la cache soutenir. Ce prop peut spécifier comment un navigateur doit mettre en cache l'image et comment il doit invalider ce cache.

Le prop de cache peut prendre des valeurs comme par défaut, recharger, forcer le cache, et uniquement si mis en cache.

Voici un exemple d'utilisation du cache prop pour contrôler le comportement du cache d'une image :

 source={{
 uri: ' https://example.com/images/my-image.png',
 cache: 'force-cache',
 cacheKey: 'mon image',
 immuable: vrai
 }}
/>

Le cache la propriété est définie sur 'force-cache', ce qui indique que le navigateur doit charger l'image à partir du cache si elle est disponible, même si cette version du cache est ancienne.

Un nouvel accessoire cacheKey est également en jeu ici. Il est fixé à 'mon image', qui servira de clé de cache personnalisée que vous pourrez utiliser pour référencer ultérieurement l'image mise en cache.

Également immuable la propriété est définie sur vrai, qui indique au navigateur de traiter cette entrée de cache comme immuable et de ne jamais l'invalider.

Tout ce qu'il y a à propos des images

Le composant React Native Image fournit un moyen puissant et flexible d'afficher des images, y compris le style, la gestion des images distantes et le contrôle du comportement du cache.

Pour les images distantes, vous pouvez toujours utiliser un espace réservé pour afficher une image ou un texte temporaire pendant le chargement de l'image distante. Cela créera une meilleure expérience utilisateur en fournissant un retour visuel immédiat et en empêchant l'application de ne pas répondre.