Reaccionar componente de imagen nativa

En este artículo, vamos a ver cómo agregar imágenes en react-native. Para ello, vamos a utilizar el componente Imagen. Se utiliza para agregar imágenes en react-native.

Sintaxis:

<Image
  source={}
/>

Accesorios en la imagen:

• accesible: Si su valor es verdadero, indica que la imagen es un elemento de accesibilidad.
• AccesibilidadLabel: Es el texto leído por el lector cuando el usuario interactúa con la imagen.
• blurRadius: Es el radio del filtro de desenfoque.
• capInsets: si se cambia el tamaño de la imagen, entonces las esquinas del tamaño especificado por capInsets.
• defaultSource: es la imagen estática que se muestra cuando se carga la imagen.
• fadeDuration: Es la animación de fundido.
• loadingIndicatorSource: representa el recurso utilizado para representar el indicador de carga de la imagen.
• onError: Se invoca cuando hay un error de carga.
• onLayout: se invoca cuando hay un cambio en el montaje y el diseño.
• onLoad: se invoca cuando la imagen se carga correctamente.
• onLoadEnd: se invoca cuando la carga de la imagen se realiza correctamente o falla.
• onLoadStart: Se invoca cuando la imagen comienza a cargarse.
• onPartialLoad: Se invoca cuando se carga la imagen parcial.
• onProgress: Se invoca en el progreso de la descarga.
• progresivaRenderingEnabled: si es verdadero, habilita la transmisión jpeg progresiva.
• resizeMethod: Se utiliza para cambiar el tamaño de la imagen.
• fuente: Es la fuente de la imagen.
• estilo: Se utiliza para proporcionar estilo.
• testID: un identificador único para que este elemento se use en los scripts de prueba de automatización de la interfaz de usuario.

Métodos en Imagen:

• abortPrefetch(): Anula la solicitud de captación previa.
• getSize(): Recupera el ancho y el alto (en píxeles) de una imagen antes de mostrarla.
• getSizeWithHeaders(): recupera el ancho y el alto (en píxeles) de una imagen antes de mostrarla con la capacidad de proporcionar los encabezados para la solicitud.
• prefetch(): Es una imagen remota para su uso posterior descargándola a la memoria caché del disco.
• queryCache(): Realiza la interrogación de caché.
• resolveAssetSource(): resuelve una referencia de activo en un objeto que tiene las propiedades uri, ancho y alto.

Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init myapp

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

  cd myapp

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: ahora implementemos la imagen. Aquí creamos un botón cuando alguien haga clic en ese botón, se mostrará la imagen.

Aplicación.js

import React , {useState} from 'react';
import { StyleSheet, View ,Image , Button } from 'react-native';
export default function App() {
  const [image , setImage] = useState(false);
  return (
    <View style={styles.container}>
      <View style={!image && styles.image}>
        <Image source=
{require('E:/Projects/react-native-gfg/myapp/images/download.png')}
        />
      </View>
      <Button
        title={"click"}
        onPress={()=>{setImage(!image)}}
      />
    </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image : {
    display : "none",
  }
});

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo. 

Referencia: https://reactnative.dev/docs/image