1 00:00:02,310 --> 00:00:05,400 Digamos que queremos usar una imagen de la 2 00:00:05,400 --> 00:00:12,950 web y para eso, simplemente puedes elegir una aquí, lo haré con la búsqueda de imágenes de Google, digamos esta y 3 00:00:12,950 --> 00:00:16,640 queremos usar esa imagen en nuestro juego en la pantalla. 4 00:00:16,670 --> 00:00:20,870 Ahora antes, usamos esta sintaxis requerida para cargar una imagen local, ahora 5 00:00:20,870 --> 00:00:23,650 esta sintaxis ya no será la correcta. 6 00:00:23,650 --> 00:00:26,900 Así que duplicaré esta línea y la comentaré, para 7 00:00:26,900 --> 00:00:35,900 una imagen web, en su lugar, pasa un objeto a la fuente y en ese objeto, pasa un accesorio URI y ese accesorio URI contiene una 8 00:00:35,900 --> 00:00:39,080 cadena que es su enlace a la imagen. 9 00:00:39,080 --> 00:00:45,080 Por lo tanto, su enlace a la imagen se pasa al accesorio URI en este objeto que pasó a la fuente. 10 00:00:45,080 --> 00:00:50,480 Ahora, si haces eso, esto carga la imagen de la web, pero hay una cosa importante que debes saber. 11 00:00:51,170 --> 00:00:52,430 Para la imagen 12 00:00:52,430 --> 00:00:54,230 que se cargó localmente, mencioné 13 00:00:54,260 --> 00:01:00,250 que React Native es capaz de determinar su ancho y alto y lo usa de manera predeterminada. 14 00:01:00,410 --> 00:01:06,320 Por lo tanto, para una imagen cargada localmente, no tiene que establecer un ancho y alto en la imagen, lo estamos haciendo aquí porque queremos 15 00:01:06,350 --> 00:01:10,120 anular el ancho y alto predeterminados, pero si tenía una imagen que ya tiene el tamaño 16 00:01:10,250 --> 00:01:15,380 perfecto, no tendrías que establecer el ancho y la altura. Para las imágenes de la web, React Native no puede 17 00:01:15,380 --> 00:01:16,790 determinar el ancho y la 18 00:01:16,790 --> 00:01:22,130 altura de la imagen antes de que se cargue porque no es parte de la aplicación, proviene de una web, React 19 00:01:22,130 --> 00:01:24,290 Native la descarga y es una especie de 20 00:01:24,320 --> 00:01:30,110 sorpresa con respecto a qué El ancho y la altura es. Por lo tanto, para las imágenes de red, 21 00:01:30,110 --> 00:01:32,140 por lo que para las 22 00:01:32,150 --> 00:01:38,810 imágenes que está obteniendo con un enlace, siempre debe establecer un ancho y una altura en el objeto de 23 00:01:38,840 --> 00:01:43,840 imagen, en el componente de imagen aquí. Para las imágenes locales agregadas con 24 00:01:43,880 --> 00:01:48,040 require, puede hacerlo ya que lo estamos haciendo para anularlo, pero 25 00:01:48,110 --> 00:01:51,020 no es necesario, esa es una diferenciación importante. 26 00:01:51,060 --> 00:01:58,230 Ahora es posible que también haya visto que para las imágenes web, la imagen cargada se desvaneció cuando se cargó por primera vez y ese 27 00:01:58,230 --> 00:02:03,100 es un buen efecto de fábrica que React Native agrega automáticamente para las imágenes de red. 28 00:02:03,310 --> 00:02:09,330 Descarga esa imagen y mientras espera que se complete la descarga, básicamente no muestra nada, todavía no puede mostrar 29 00:02:09,330 --> 00:02:14,880 la imagen, pero cuando se carga la imagen, no solo aparece allí, sino que lentamente se desvanece 30 00:02:14,910 --> 00:02:18,940 en lo que es una transición más agradable para esa imagen cargada. 31 00:02:18,990 --> 00:02:24,340 Es un buen efecto y también puede controlarlo con la duración del desvanecimiento, puede establecerlo en 32 00:02:24,360 --> 00:02:27,390 un número y el valor predeterminado es 300, 33 00:02:27,390 --> 00:02:33,360 eso sería 300 ms, pero puede establecerlo en un valor de milisegundos diferente, como 1000 ms, que sería 34 00:02:33,360 --> 00:02:39,450 un segundo para la imagen se desvanece y así sucesivamente. Después de la primera carga, la imagen se almacena en 35 00:02:39,450 --> 00:02:44,610 caché y, por lo tanto, los usos posteriores de la misma imagen ocurrieron casi instantáneamente porque 36 00:02:44,610 --> 00:02:45,760 ya se descargó. 37 00:02:45,780 --> 00:02:49,320 Así es cómo usar las imágenes de red y qué tener en cuenta con respecto a ellas.