¿Cómo mostrar la imagen local en la aplicación React Native?

En este artículo, aprenderemos a mostrar una imagen de la galería de un teléfono en una aplicación React Native. Usaremos react-native-image-picker para seleccionar la imagen y mostrarla en nuestra aplicación. Puede encontrar la referencia de la API para este paquete al final de este artículo.

Paso 1: para inicializar una nueva aplicación React Native, ejecute el siguiente comando:

npx react-native init LocalImagePicker

Paso 2: Ahora, vaya a la carpeta del proyecto e instale el paquete react-native-image-picker , y para hacerlo, ejecute el siguiente comando:

cd LocalImagePicker
npm i react-native-image-picker

Estructura del proyecto: Debería verse así.

Estructura del proyecto

Necesitamos modificar el archivo App.js y desarrollar los siguientes componentes para que la aplicación seleccione y muestre la imagen local:

1. Botón : un componente de botón básico de React Native que abre la galería cuando el usuario toca el botón.
2. Imagen: un componente básico de React Native Image para mostrar la imagen de respuesta del selector.

Necesitamos importar launchImageLibrary desde react-native-image-picker , que toma opciones y funciones de devolución de llamada como argumentos. Con las opciones, puede especificar el tipo de medio, el límite de selección, la altura máxima, la anchura máxima y otros atributos. El método de devolución de llamada se llama con el objeto de respuesta, que básicamente establecerá nuestra variable de estado pickerResponse. 

import React,{useState} from 'react';
import type {Node} from 'react';
import {
  Button,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Image
} from 'react-native';
  
import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';
  
import { launchImageLibrary } from 'react-native-image-picker';
  
const App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';
  
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    flex:1,
    alignItems: 'center',
    justifyContent: 'center'
  };
  
  const [pickerResponse, setPickerResponse] = useState(null);
  
  const openGallery = () => {
    const options = {
      selectionLimit: 1,
      mediaType: 'photo',
      includeBase64: false,
    };
    launchImageLibrary(options, setPickerResponse);
  };
  
  const uri = pickerResponse?.assets && pickerResponse.assets[0].uri;
  
  return (
    <SafeAreaView style={backgroundStyle}>
      <Button title="Pick from Gallery" onPress={openGallery} />
      {
        uri && (
          <Image source={{uri}} style=
            {{height:400, width:400,margin:20}}>
          </Image>
        )
      }
    </SafeAreaView>
  );
};
  
export default App;

Hemos creado una variable de estado, pickerResponse, que contiene el objeto de respuesta. Creamos el método openGallery, donde configuramos para definir el objeto de opciones y llamamos al método launchImageGallery . Puede modificar estas opciones y observar la respuesta para una mejor comprensión. Después de seleccionar la imagen, el objeto pickerResponse contendrá este activo y accederemos a la imagen mediante uri . Para renderizar la imagen, usamos el renderizado condicional, lo que significa que solo si se ha configurado el uri, el componente de la imagen se renderizará con el valor de origen como el URI. 

Paso para ejecutar la aplicación: Para ejecutar la aplicación, inicie el servidor, ejecute los siguientes comandos:

npx react-native start
npx react-native run-android

Salida :

Referencia de la API de la biblioteca: https://www.npmjs.com/package/react-native-image-picker