Get best of the week

React Native: guarda fotos y videos en la galería del dispositivo

Guardar fotos y videos en un dispositivo Android / iOS es un desafío para muchos desarrolladores de React Native. En este artículo, le mostraré cómo puede guardar fácilmente y sin dolor las fotos a través de la URL en el dispositivo.

Primero, necesitamos dos bibliotecas:

  1. @ react-native-community / cameraroll : proporciona acceso a la galería (solo tuve éxito con la versión 1.4.0. Hubo errores bien conocidos en las versiones "más frescas", escriba si tuvo éxito con una versión diferente)
  2. rn-fetch-blob : acceso a archivos de aplicaciones locales. Cabe señalar que esta biblioteca funciona con reaccionar versión nativa 0.60 y superior


IOS


En iOS, todo resultó ser muy simple:

1. Añadir a Info.plist
<key>NSCameraUsageDescription</key>
<string></string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string></string>
<key>NSPhotoLibraryUsageDescription</key>
<string></string>

2. Implementación
import CameraRoll from '@react-native-community/cameraroll';

const saveImageInDevice = async (url) => {
    await CameraRoll.saveToCameraRoll(url, 'photo');
}

¡Eso es todo! La función saveImageInDevice acepta la dirección del enlace como entrada. CameraRoll.saveToCameraRoll descarga el archivo y lo guarda en la galería del dispositivo. El segundo parámetro del método saveToCameraRoll también puede ser "video"

Androide


Los dispositivos Android son un poco más complicados. El hecho es que en Android, el método saveToCameraRoll no sabe cómo trabajar con una url externa. Primero necesitamos subir el archivo al almacenamiento externo, y luego a la galería:

import {PermissionsAndroid} from 'react-native';
import CameraRoll from '@react-native-community/cameraroll';
import RNFetchBlob from 'rn-fetch-blob';

//      
const checkAndroidPermission = async () => {
    const permission = PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE;
    await PermissionsAndroid.request(permission);
};

const saveImageInDevice = async (url) => {
     await checkAndroidPermission();
        let res = await RNFetchBlob
          .config({
            fileCache : true,
            appendExt : 'jpg' 
          })
          .fetch('GET', url);
     url = res.path();
     await CameraRoll.saveToCameraRoll(url, 'photo');
}


RNFetchBlob.fetch por solicitud GET cargará el archivo en un almacenamiento externo y pasará la url de este archivo. Entonces CameraRoll.saveToCameraRoll cargará este archivo en la galería.

Eso es todo. ¡Gracias por la atención!

Enlaces:
github.com/react-native-community/react-native-cameraroll
github.com/joltup/rn-fetch-blob

More articles:


All Articles