Les images apportent beaucoup de valeur aux applications mobiles. Elles 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 voulez pas que les utilisateurs de votre application manquent.
Le composant d’image React Native
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 site react-native bibliothèque :
import React from 'react';
import { StyleSheet, Image, View } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Image
style={styles.image}
source={require('./assets/my-image.jpg')}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
image: {
width: 200,
height: 200,
borderRadius: 100,
},
});
Ci-dessus, un simple Application composant avec une image. Le composant Image Le composant prend une style qui définit l’attribut largeur, hauteuret borderRadius de l’image. Il prend également un source prop qui charge l’image à partir d’un fichier local situé dans le dossier « assets » du répertoire de l’application. La propriété source prop définit le chemin de l’image à inclure et peut accepter des sources d’images 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 les images locales dans le répertoire du projet de l’application, par exemple dans un fichier actifs . Vous pouvez également localiser des images en dehors du répertoire de l’application, par exemple dans le rouleau de l’appareil photo ou la photothèque de l’appareil. Voici un exemple de chemin d’accès à une image locale :
<Image source={{ uri: 'file:///path/to/my-image.jpg' }} />
Les images réseau sont diffusées via le web. Elles peuvent inclure des URL HTTP/HTTPS ou des URI de données encodées en base64, qui intègrent des données directement dans l’URL à l’aide du schéma d’encodage Base64.
Accessoires pour personnaliser le composant 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 resizeModechacune d’entre elles affectera l’image différemment.
- couverture: Cette valeur permet de mettre l’image à l’échelle de manière uniforme afin que les deux dimensions soient égales ou supérieures à l’élément qu’elle contient. L’image est alors centrée dans le conteneur. L’utilisation de cette valeur peut entraîner un recadrage de l’image afin de maintenir le rapport hauteur/largeur.
- contenir: Cette option tente d’ajuster et de centrer parfaitement l’image dans les dimensions du conteneur. Toutefois, il peut en résulter des espaces vides sur les bords de l’image.
- étirer: Le stretch étire l’image pour qu’elle remplisse tout le conteneur, quel que soit le rapport d’aspect. Cela entraîne parfois une distorsion de l’image.
- répétition: Cette valeur répète l’image horizontalement et verticalement pour remplir tout le conteneur.
- centre: Cette option permet de centrer l’image dans l’élément conteneur sans la mettre à l’échelle.
onLoad
Il s’agit d’une fonction de rappel qui s’exécute lorsque le chargement de l’image est terminé. Vous pouvez l’utiliser pour effectuer des actions après le chargement de l’image, comme la mise à jour de l’état du composant ou l’affichage d’un message à l’utilisateur.
onError
Le onError s’exécutera si ou lorsque l’image ne parvient pas à se charger. Elle permet d’effectuer les actions nécessaires en cas d’erreur lors du chargement de l’image. Vous pouvez afficher un message d’erreur à l’utilisateur ou réessayer de charger l’image.
defaultSource
Cette propriété spécifie une image de remplacement à afficher si l’image principale ne se charge pas. Vous pouvez l’utiliser pour fournir une image par défaut ou une image de remplacement pendant le chargement de l’image principale.
Gestion des images distantes à partir d’une API
Vous pouvez avoir besoin de récupérer l’image de votre application à partir d’une API ou d’un serveur distant et de l’afficher dans votre application. Vous pouvez utiliser la fonction intégrée React fetch ou une bibliothèque de requêtes d’API comme Axios.
Voici un exemple de récupération et d’affichage d’une image à partir d’une API distante à l’aide de la fonction récupérer fonction :
const [imageUri, setImageUri] = useState(null);
useEffect(() => {
fetch('https://example.com/api/images/1')
.then(response => response.json())
.then(data => setImageUri(data.url))
.catch(error => console.error(error));
}, []);
return (
<View>
{imageUri ? (
<Image source={{ uri: imageUri }} />
) : (
<Text>Loading...</Text>
)}
</View>
);
L’exécution de ce code dans votre application permet de récupérer une image à partir du lien API distant défini. L’exemple crée d’abord une variable d’état pour la fonction imageUri. A l’intérieur d’un useEffect le crochet chercher récupère l’imageUri et la stocke dans la variable d’état à l’aide de la fonction setImageUri().
Enfin, il rend la Image avec le composant source prop fixé à 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 politique de mise en cache pour contrôler le comportement de la mise en 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 propriété cache prop. Cette propriété peut spécifier comment un navigateur doit mettre l’image en cache et comment il doit invalider ce cache.
La propriété cache peut prendre des valeurs telles que default, reload, force-cache, et only-if-cached.
Voici un exemple d’utilisation de la fonction cache pour contrôler le comportement du cache d’une image :
<Image
source={{
uri: 'https://example.com/images/my-image.png',
cache: 'force-cache',
cacheKey: 'my-image',
immutable: true
}}
/>
La cache est fixée à ‘force-cache’qui indique que le navigateur doit charger l’image à partir du cache s’il est disponible, même si la version du cache est ancienne.
Un nouvel accessoire cacheKey est également en jeu ici. Il est défini à ‘mon-image’qui servira de clé de cache personnalisée que vous pourrez utiliser pour référencer l’image mise en cache ultérieurement.
De plus, l’option immuable la propriété est fixée à vraiqui indique au navigateur de considérer cette entrée de cache comme immuable et de ne jamais l’invalider.
Tout ce qu’il y a à savoir sur les 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 améliorera l’expérience de l’utilisateur en lui fournissant un retour visuel immédiat et en évitant que l’application ne soit pas réactive.
