Get best of the week

React Native - menyimpan foto dan video ke galeri perangkat

Menyimpan foto dan video ke perangkat android / ios adalah tantangan bagi banyak pengembang Asli Bereaksi. Pada artikel ini saya akan menunjukkan bagaimana Anda dapat dengan mudah dan tanpa kesulitan menyimpan foto melalui url ke perangkat.

Pertama, kita membutuhkan dua perpustakaan:

  1. @ react-native-community / cameraroll - menyediakan akses ke galeri (saya hanya berhasil dengan versi 1.4.0. Ada kesalahan terkenal pada versi "lebih segar", tulis jika Anda berhasil dengan versi yang berbeda)
  2. rn-fetch-blob - akses ke file aplikasi lokal. Perlu dicatat bahwa pustaka ini bekerja dengan versi asli reaksi 0.60 dan lebih tinggi


IOS


Pada ios, semuanya ternyata sangat sederhana:

1. Tambahkan ke Info.plist
<key>NSCameraUsageDescription</key>
<string></string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string></string>
<key>NSPhotoLibraryUsageDescription</key>
<string></string>

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

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

Itu saja! Fungsi saveImageInDevice menerima alamat tautan sebagai input. CameraRoll.saveToCameraRoll mengunduh file dan menyimpannya ke galeri perangkat. Parameter kedua dari metode saveToCameraRoll juga bisa menjadi "video"

Android


Perangkat Android sedikit lebih rumit. Faktanya adalah bahwa di android, metode saveToCameraRoll tidak tahu cara bekerja dengan url eksternal. Pertama kita perlu mengunggah file ke penyimpanan eksternal, dan kemudian ke galeri:

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 oleh GET permintaan akan mengunggah file ke penyimpanan eksternal dan meneruskan url file ini. Kemudian CameraRoll.saveToCameraRoll akan mengunggah file ini ke galeri.

Itu saja. Terimakasih atas perhatiannya!

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

More articles:


All Articles