Get best of the week

React Native - Speichern Sie Fotos und Videos in der Gerätegalerie

Das Speichern von Fotos und Videos auf einem Android / iOS-Gerät ist für viele React Native-Entwickler eine Herausforderung. In diesem Artikel werde ich zeigen, wie Sie Fotos einfach und schmerzlos per URL auf dem Gerät speichern können.

Erstens brauchen wir zwei Bibliotheken:

  1. @ react-native-community / cameraroll - bietet Zugriff auf die Galerie (ich war nur mit Version 1.4.0 erfolgreich. Es gab bekannte Fehler bei den Versionen "frischer", schreiben Sie, wenn Sie mit einer anderen Version erfolgreich waren)
  2. rn-fetch-blob - Zugriff auf lokale Anwendungsdateien. Es ist zu beachten, dass diese Bibliothek mit der nativen Version 0.60 und höher funktioniert


IOS


Auf ios stellte sich heraus, dass alles sehr einfach war:

1. Zur Info.plist hinzufügen
<key>NSCameraUsageDescription</key>
<string></string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string></string>
<key>NSPhotoLibraryUsageDescription</key>
<string></string>

2. Implementierung
import CameraRoll from '@react-native-community/cameraroll';

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

Das ist alles! Die Funktion saveImageInDevice akzeptiert die Linkadresse als Eingabe. CameraRoll.saveToCameraRoll lädt die Datei herunter und speichert sie in der Gerätegalerie. Der zweite Parameter der saveToCameraRoll-Methode kann auch "Video" sein.

Android


Android-Geräte sind etwas komplizierter. Tatsache ist, dass die saveToCameraRoll-Methode unter Android nicht weiß, wie man mit einer externen URL arbeitet. Zuerst müssen wir die Datei in einen externen Speicher und dann in die Galerie hochladen:

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 per GET-Anforderung lädt die Datei in einen externen Speicher hoch und übergibt die URL dieser Datei. Dann lädt CameraRoll.saveToCameraRoll diese Datei in die Galerie hoch.

Das ist alles. Vielen Dank für Ihre Aufmerksamkeit!

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

More articles:


All Articles