Get best of the week

React Native - salve fotos e vídeos na galeria de dispositivos

Salvar fotos e vídeos em um dispositivo Android / iOS é um desafio para muitos desenvolvedores do React Native. Neste artigo, mostrarei como você pode salvar fotos de maneira fácil e indolor via URL no dispositivo.

Primeiro, precisamos de duas bibliotecas:

  1. @ react-native-community / cameraroll - fornece acesso à galeria (eu consegui apenas a versão 1.4.0. Havia erros conhecidos nas versões “mais recentes”, escreva se você conseguiu uma versão diferente)
  2. rn-fetch-blob - acesso a arquivos de aplicativos locais. Note-se que esta biblioteca trabalha com a versão nativa react 0.60 e superior


IOS


No ios, tudo acabou sendo muito simples:

1. Adicione ao Info.plist
<key>NSCameraUsageDescription</key>
<string></string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string></string>
<key>NSPhotoLibraryUsageDescription</key>
<string></string>

2. Implementação
import CameraRoll from '@react-native-community/cameraroll';

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

Isso é tudo! A função saveImageInDevice aceita o endereço do link como entrada. CameraRoll.saveToCameraRoll baixa o arquivo e o salva na galeria de dispositivos. O segundo parâmetro do método saveToCameraRoll também pode ser "video"

Android


Os dispositivos Android são um pouco mais complicados. O fato é que, no Android, o método saveToCameraRoll não sabe trabalhar com um URL externo. Primeiro, precisamos fazer o upload do arquivo para armazenamento externo e, em seguida, para a galeria:

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');
}


A solicitação RNFetchBlob.fetch by GET fará o upload do arquivo para armazenamento externo e transmitirá o URL desse arquivo. Em seguida, CameraRoll.saveToCameraRoll fará o upload deste arquivo para a galeria.

Isso é tudo. Obrigado pela atenção!

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

More articles:


All Articles