Disons que nous voulons utiliser une image du
Web et pour cela, vous pouvez simplement en choisir une ici, je le ferai avec la recherche d'images Google, disons celle-ci et
nous voulons utiliser cette image sur notre jeu sur écran.
Avant, nous utilisons cette syntaxe require pour charger une image locale, maintenant
cette syntaxe ne sera plus la bonne.
Je vais donc dupliquer cette ligne et la commenter, pour
une image Web, à la place, vous passez un objet à la source et sur cet objet, vous passez un accessoire URI et ce prop URI contient
une chaîne qui est votre lien vers l'image.
Votre lien vers l'image est donc transmis à l'accessoire URI dans cet objet que vous avez transmis à la source.
Maintenant, si vous faites cela, cela charge l'image du Web mais il y a une chose importante que vous devez savoir.
Pour l'image qui
a été chargée localement, j'ai
mentionné que React Native est capable de déterminer sa largeur et sa hauteur et l'utilise par défaut.
Par conséquent, pour une image chargée localement, vous n'avez pas besoin de définir une largeur et une hauteur sur l'image, nous le faisons ici parce que nous voulons
remplacer la largeur et la hauteur par défaut, mais si vous aviez une image qui est déjà parfaitement
dimensionnée, vous n'auriez pas à régler la largeur et la hauteur. Pour les images provenant du Web, React Native n'est pas
en mesure de déterminer la
largeur et la hauteur de l'image avant qu'elle ne soit chargée, car elle ne fait pas partie de l'application, elle provient
d'un Web, React Native la télécharge et c'est
une sorte de surprise concernant ce la largeur et la hauteur est. Par conséquent, pour les images réseau, donc
pour les images que
vous récupérez avec un lien, vous devez toujours définir une largeur et une hauteur sur l'objet
image, sur le composant image ici. Pour les images locales ajoutées avec
require, vous pouvez le faire comme nous le faisons pour le remplacer,
mais ce n'est pas nécessaire, c'est une différenciation importante.
Maintenant, vous avez peut-être également vu que pour les images Web, l'image chargée s'estompait lors de son premier chargement et c'est
un bel effet d'usine que React Native ajoute automatiquement pour les images réseau.
Il télécharge cette image et pendant que vous attendez que le téléchargement soit terminé, il ne montre essentiellement rien, il ne peut
pas encore montrer l'image mais quand l'image est chargée, elle ne la fait pas simplement apparaître mais à la place,
lentement le fondu dans lequel est une transition plus agréable pour cette image chargée.
C'est un bel effet et vous pouvez également contrôler cela avec une durée de fondu, vous pouvez le définir
sur un nombre et la valeur par défaut est
300, ce qui serait 300 ms mais vous pouvez le définir sur une valeur en millisecondes différente, comme 1000 ms qui
serait une seconde pour l'image à s'estomper et ainsi de suite. Après le premier chargement, l'image est mise en cache et
par conséquent, les utilisations ultérieures de la même image se sont produites presque instantanément car elle a
déjà été téléchargée.
Voilà donc comment utiliser les images réseau et ce qu'il faut savoir à ce sujet.