Get best of the week

React Native - enregistrez des photos et des vidéos dans la galerie d'appareils

L'enregistrement de photos et de vidéos sur un appareil Android / iOS est un défi pour de nombreux développeurs React Native. Dans cet article, je vais vous montrer comment enregistrer facilement et sans douleur des photos via l'URL sur l'appareil.

Tout d'abord, nous avons besoin de deux bibliothèques:

  1. @ react-native-community / cameraroll - donne accès à la galerie (j'ai réussi seulement avec la version 1.4.0. Il y avait des erreurs bien connues sur les versions "plus fraîches", écrivez si vous avez réussi avec une autre version)
  2. rn-fetch-blob - accès aux fichiers d'application locaux. Il convient de noter que cette bibliothèque fonctionne avec React Native version 0.60 et supérieure


IOS


Sous iOS, tout s'est avéré très simple:

1. Ajouter à Info.plist
<key>NSCameraUsageDescription</key>
<string></string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string></string>
<key>NSPhotoLibraryUsageDescription</key>
<string></string>

2. Mise en œuvre
import CameraRoll from '@react-native-community/cameraroll';

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

C'est tout! La fonction saveImageInDevice accepte l'adresse du lien en entrée. CameraRoll.saveToCameraRoll télécharge le fichier et l'enregistre dans la galerie d'appareils. Le deuxième paramètre de la méthode saveToCameraRoll peut également être «vidéo»

Android


Les appareils Android sont un peu plus compliqués. Le fait est que sur Android, la méthode saveToCameraRoll ne sait pas comment travailler avec une URL externe. Nous devons d'abord télécharger le fichier sur un stockage externe, puis dans la galerie:

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 par demande GET téléchargera le fichier sur un stockage externe et transmettra l'url de ce fichier. CameraRoll.saveToCameraRoll téléchargera ensuite ce fichier dans la galerie.

C'est tout. Merci pour l'attention!

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

More articles:


All Articles