1 00:00:02,310 --> 00:00:05,400 Disons que nous voulons utiliser une image du 2 00:00:05,400 --> 00:00:12,950 Web et pour cela, vous pouvez simplement en choisir une ici, je le ferai avec la recherche d'images Google, disons celle-ci et 3 00:00:12,950 --> 00:00:16,640 nous voulons utiliser cette image sur notre jeu sur écran. 4 00:00:16,670 --> 00:00:20,870 Avant, nous utilisons cette syntaxe require pour charger une image locale, maintenant 5 00:00:20,870 --> 00:00:23,650 cette syntaxe ne sera plus la bonne. 6 00:00:23,650 --> 00:00:26,900 Je vais donc dupliquer cette ligne et la commenter, pour 7 00:00:26,900 --> 00:00:35,900 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 8 00:00:35,900 --> 00:00:39,080 une chaîne qui est votre lien vers l'image. 9 00:00:39,080 --> 00:00:45,080 Votre lien vers l'image est donc transmis à l'accessoire URI dans cet objet que vous avez transmis à la source. 10 00:00:45,080 --> 00:00:50,480 Maintenant, si vous faites cela, cela charge l'image du Web mais il y a une chose importante que vous devez savoir. 11 00:00:51,170 --> 00:00:52,430 Pour l'image qui 12 00:00:52,430 --> 00:00:54,230 a été chargée localement, j'ai 13 00:00:54,260 --> 00:01:00,250 mentionné que React Native est capable de déterminer sa largeur et sa hauteur et l'utilise par défaut. 14 00:01:00,410 --> 00:01:06,320 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 15 00:01:06,350 --> 00:01:10,120 remplacer la largeur et la hauteur par défaut, mais si vous aviez une image qui est déjà parfaitement 16 00:01:10,250 --> 00:01:15,380 dimensionnée, vous n'auriez pas à régler la largeur et la hauteur. Pour les images provenant du Web, React Native n'est pas 17 00:01:15,380 --> 00:01:16,790 en mesure de déterminer la 18 00:01:16,790 --> 00:01:22,130 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 19 00:01:22,130 --> 00:01:24,290 d'un Web, React Native la télécharge et c'est 20 00:01:24,320 --> 00:01:30,110 une sorte de surprise concernant ce la largeur et la hauteur est. Par conséquent, pour les images réseau, donc 21 00:01:30,110 --> 00:01:32,140 pour les images que 22 00:01:32,150 --> 00:01:38,810 vous récupérez avec un lien, vous devez toujours définir une largeur et une hauteur sur l'objet 23 00:01:38,840 --> 00:01:43,840 image, sur le composant image ici. Pour les images locales ajoutées avec 24 00:01:43,880 --> 00:01:48,040 require, vous pouvez le faire comme nous le faisons pour le remplacer, 25 00:01:48,110 --> 00:01:51,020 mais ce n'est pas nécessaire, c'est une différenciation importante. 26 00:01:51,060 --> 00:01:58,230 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 27 00:01:58,230 --> 00:02:03,100 un bel effet d'usine que React Native ajoute automatiquement pour les images réseau. 28 00:02:03,310 --> 00:02:09,330 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 29 00:02:09,330 --> 00:02:14,880 pas encore montrer l'image mais quand l'image est chargée, elle ne la fait pas simplement apparaître mais à la place, 30 00:02:14,910 --> 00:02:18,940 lentement le fondu dans lequel est une transition plus agréable pour cette image chargée. 31 00:02:18,990 --> 00:02:24,340 C'est un bel effet et vous pouvez également contrôler cela avec une durée de fondu, vous pouvez le définir 32 00:02:24,360 --> 00:02:27,390 sur un nombre et la valeur par défaut est 33 00:02:27,390 --> 00:02:33,360 300, ce qui serait 300 ms mais vous pouvez le définir sur une valeur en millisecondes différente, comme 1000 ms qui 34 00:02:33,360 --> 00:02:39,450 serait une seconde pour l'image à s'estomper et ainsi de suite. Après le premier chargement, l'image est mise en cache et 35 00:02:39,450 --> 00:02:44,610 par conséquent, les utilisations ultérieures de la même image se sont produites presque instantanément car elle a 36 00:02:44,610 --> 00:02:45,760 déjà été téléchargée. 37 00:02:45,780 --> 00:02:49,320 Voilà donc comment utiliser les images réseau et ce qu'il faut savoir à ce sujet.