Trabajar con imágenes en React Native

Las imágenes proporcionan mucho valor a las aplicaciones móviles. Pueden ayudar a ilustrar conceptos, transmitir información, crear interés visual y proporcionar contexto para contenido específico que quizás no desee que los usuarios de su aplicación se pierdan.

El componente de imagen nativa de React

El componente de imagen React Native es el componente predeterminado proporcionado por la biblioteca React Native para representar imágenes en sus aplicaciones móviles. El componente puede cargar imágenes de fuentes locales y remotas. Proporciona varios accesorios para la personalización y el estilo de las imágenes renderizadas.

Para usar el componente de imagen en su aplicación, importe Imagen desde el reaccionar nativo biblioteca:

importar Reaccionar de'reaccionar';
importar { Hoja de estilo, Imagen, Vista } de'reaccionar-nativo';
constante aplicación = () => {
devolver (

 estilo={estilos.imagen}
 fuente={requerir('./activos/mi-imagen.jpg')}
 />
 </View>
 );
};





instagram viewer
constante estilos = StyleSheet.create({
 envase: {
 doblar: 1,
 alinear elementos: 'centro',
 justificar el contenido: 'centro',
 },
 imagen: {
 ancho: 200,
 altura: 200,
 bordeRadio: 100,
 },
});

Arriba hay un simple aplicación componente con una imagen. El Imagen componente toma un estilo apoyo que establece el ancho, altura, y bordeRadio de la imagen también toma un fuente prop que carga la imagen desde un archivo local ubicado en la carpeta "activos" dentro del directorio de la aplicación. El fuente prop define la ruta de la imagen para incluir y puede aceptar fuentes de imagen tanto locales como de red/remotas.

Las imágenes locales están disponibles en el dispositivo del usuario y puede almacenarlas de forma temporal o permanente. Puede almacenar imágenes locales dentro del directorio del proyecto de la aplicación, como un activos carpeta. También puede ubicar imágenes fuera del directorio de la aplicación, como en el carrete de la cámara o la biblioteca de fotos del dispositivo. Aquí hay un ejemplo de una ruta de origen a una imagen local:

uri: 'archivo:///ruta/a/mi-imagen.jpg' }} />

Las imágenes de red se entregan a través de la web. Podrían incluir URL HTTP/HTTPS o URI de datos codificados en base64, que incrustan datos directamente en la URL utilizando el esquema de codificación Base64.

Accesorios para personalizar el componente de imagen

Hay varios accesorios que puede usar para diseñar y personalizar el componente React Native Image.

resizeMode

El resizeMode prop determina cómo React debe cambiar el tamaño y posicionar una imagen dentro de su contenedor. Hay varios valores disponibles para resizeMode, cada uno de los cuales afectará a la imagen de manera diferente.

• cubrir: Este valor escalará la imagen de manera uniforme para que ambas dimensiones sean iguales o mayores que el elemento que la contiene. Luego, la imagen se centra dentro del contenedor. El uso de este valor puede dar como resultado que la imagen se recorte para mantener la relación de aspecto.
• contener: Esto intentará ajustar y centrar la imagen perfectamente dentro de las dimensiones del contenedor. Sin embargo, esto puede resultar en un espacio vacío alrededor de los bordes de la imagen.
• estirar: El estirar El valor estira la imagen para llenar todo el contenedor, independientemente de la relación de aspecto. A veces causando que la imagen se distorsione.
• repetir: este valor repite la imagen tanto horizontal como verticalmente para llenar todo el contenedor.
• centro: Esto centrará la imagen dentro del elemento contenedor sin escalarlo.

onLoad

Esto es un función de devolución de llamada que se ejecuta cuando la imagen termina de cargarse. Puede usarlo para realizar acciones después de que se cargue la imagen, como actualizar el estado del componente o mostrar un mensaje al usuario.

onError

El onError prop se ejecutará si o cuando la imagen no se carga. Proporciona una forma de realizar las acciones necesarias si hay un error al intentar cargar la imagen. Podría mostrar un mensaje de error al usuario o volver a intentar cargar la imagen.

fuente predeterminada

Esta propiedad especifica una imagen alternativa para mostrar si la imagen principal no se carga. Puede usarlo para proporcionar una imagen predeterminada o una imagen de marcador de posición mientras se carga la imagen principal.

Manejo de imágenes remotas desde una API

Es posible que deba obtener la imagen para su aplicación desde una API o un servidor remoto y mostrarla dentro de su aplicación. Puedes usar el React incorporado buscar función o una Biblioteca de solicitudes de API como Axios para este propósito.

Aquí hay un ejemplo de cómo buscar y mostrar una imagen desde una API remota usando el buscar función:

constante [imageUri, setImageUri] = useState(nulo);
usarEfecto(() => {
 buscar(' https://example.com/api/images/1')
 .entonces(respuesta => respuesta.json())
 .entonces(datos => setImageUri (datos.url))
 .atrapar(error =>consola.error (error));
}, []);
devolver (

 {imagenUri? (
uri: imageUri }} />
 ): (
Cargando...</Text>
 )}
 </View>
);

Ejecutar este código dentro de su aplicación obtendrá una imagen del enlace API remoto establecido. El ejemplo primero crea una variable de estado para el imagenUri. Dentro de un efecto de uso gancho, el buscar recupera el imageUri y lo almacena en la variable de estado usando setImageUri().

Finalmente, hace que el Imagen componente con el fuente prop establecido en el URI de la imagen mientras se muestra un indicador de carga, esperando que se muestre la imagen.

Uso de la propiedad de política de caché para controlar el comportamiento de la caché

Su navegador puede almacenar en caché las imágenes que carga desde URL remotas, por lo que puede volver a cargarlas rápidamente en el futuro. Puede personalizar el comportamiento de la imagen en caché usando el cache apuntalar. Esta propiedad puede especificar cómo un navegador debe almacenar en caché la imagen y cómo debe invalidar ese caché.

El accesorio de caché puede tomar valores como predeterminado, recargar, forzar caché, y solo si se almacena en caché.

He aquí un ejemplo de cómo usar el cache prop para controlar el comportamiento de caché de una imagen:

 fuente={{
 Uri: ' https://example.com/images/my-image.png',
 cache: 'caché forzado',
 cacheKey: 'Mi imagen',
 inmutable: verdadero
 }}
/>

El cache la propiedad se establece en 'caché forzado', lo que indica que el navegador debe cargar la imagen del caché si está disponible, incluso si esa versión del caché es antigua.

un nuevo apoyo cacheKey también está en juego aquí. está configurado para 'Mi imagen', que servirá como una clave de caché personalizada que puede usar para hacer referencia a la imagen almacenada en caché más adelante.

También el inmutable la propiedad se establece en verdadero, que le dice al navegador que trate esta entrada de caché como inmutable y que nunca la invalide.

Todo lo que hay sobre las imágenes

El componente React Native Image proporciona un medio poderoso y flexible para mostrar imágenes, incluido el estilo, el manejo de imágenes remotas y el control del comportamiento de la memoria caché.

Para imágenes remotas, siempre puede usar un marcador de posición para mostrar una imagen o texto temporal mientras se carga la imagen remota. Esto creará una mejor experiencia de usuario al proporcionar comentarios visuales inmediatos y evitar que la aplicación parezca no responder.