Digamos que queremos usar una imagen de la
web y para eso, simplemente puedes elegir una aquí, lo haré con la búsqueda de imágenes de Google, digamos esta y
queremos usar esa imagen en nuestro juego en la pantalla.
Ahora antes, usamos esta sintaxis requerida para cargar una imagen local, ahora
esta sintaxis ya no será la correcta.
Así que duplicaré esta línea y la comentaré, para
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
cadena que es su enlace a la imagen.
Por lo tanto, su enlace a la imagen se pasa al accesorio URI en este objeto que pasó a la fuente.
Ahora, si haces eso, esto carga la imagen de la web, pero hay una cosa importante que debes saber.
Para la imagen
que se cargó localmente, mencioné
que React Native es capaz de determinar su ancho y alto y lo usa de manera predeterminada.
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
anular el ancho y alto predeterminados, pero si tenía una imagen que ya tiene el tamaño
perfecto, no tendrías que establecer el ancho y la altura. Para las imágenes de la web, React Native no puede
determinar el ancho y la
altura de la imagen antes de que se cargue porque no es parte de la aplicación, proviene de una web, React
Native la descarga y es una especie de
sorpresa con respecto a qué El ancho y la altura es. Por lo tanto, para las imágenes de red,
por lo que para las
imágenes que está obteniendo con un enlace, siempre debe establecer un ancho y una altura en el objeto de
imagen, en el componente de imagen aquí. Para las imágenes locales agregadas con
require, puede hacerlo ya que lo estamos haciendo para anularlo, pero
no es necesario, esa es una diferenciación importante.
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
es un buen efecto de fábrica que React Native agrega automáticamente para las imágenes de red.
Descarga esa imagen y mientras espera que se complete la descarga, básicamente no muestra nada, todavía no puede mostrar
la imagen, pero cuando se carga la imagen, no solo aparece allí, sino que lentamente se desvanece
en lo que es una transición más agradable para esa imagen cargada.
Es un buen efecto y también puede controlarlo con la duración del desvanecimiento, puede establecerlo en
un número y el valor predeterminado es 300,
eso sería 300 ms, pero puede establecerlo en un valor de milisegundos diferente, como 1000 ms, que sería
un segundo para la imagen se desvanece y así sucesivamente. Después de la primera carga, la imagen se almacena en
caché y, por lo tanto, los usos posteriores de la misma imagen ocurrieron casi instantáneamente porque
ya se descargó.
Así es cómo usar las imágenes de red y qué tener en cuenta con respecto a ellas.