React Native - حفظ الصور ومقاطع الفيديو في معرض الجهاز

يمثل حفظ الصور ومقاطع الفيديو على جهاز android / ios تحديًا للعديد من مطوري React Native. في هذه المقالة سأوضح كيف يمكنك حفظ الصور بسهولة وبدون ألم عبر عنوان url إلى الجهاز.

أولاً ، نحتاج إلى مكتبتين:

  1. @ response - original-community / cameraroll - يوفر الوصول إلى المعرض (نجحت فقط في الإصدار 1.4.0. كانت هناك أخطاء معروفة في إصدارات "أحدث" ، واكتب إذا نجحت في إصدار مختلف)
  2. rn-fetch-blob - الوصول إلى ملفات التطبيقات المحلية. وتجدر الإشارة إلى أن هذه المكتبة تعمل مع النسخة الأصلية المتفاعلة 0.60 وأعلى


دائرة الرقابة الداخلية


على نظام التشغيل

iOS ، تبين أن كل شيء بسيط للغاية: 1. أضف إلى Info.plist
<key>NSCameraUsageDescription</key>
<string></string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string></string>
<key>NSPhotoLibraryUsageDescription</key>
<string></string>

2. التنفيذ
import CameraRoll from '@react-native-community/cameraroll';

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

هذا كل شئ! تقبل وظيفة saveImageInDevice عنوان الارتباط كمدخل. يقوم CameraRoll.saveToCameraRoll بتنزيل الملف وحفظه في معرض الأجهزة. يمكن أن تكون المعلمة الثانية لطريقة saveToCameraRoll أيضًا "فيديو"

ذكري المظهر


أجهزة Android أكثر تعقيدًا بعض الشيء. والحقيقة هي أنه على نظام Android ، لا تعرف طريقة saveToCameraRoll كيفية العمل مع عنوان URL خارجي. نحتاج أولاً إلى تحميل الملف إلى وحدة التخزين الخارجية ، ثم إلى المعرض:

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 حسب طلب GET بتحميل الملف إلى وحدة التخزين الخارجية وتمرير عنوان url لهذا الملف. ثم سيقوم CameraRoll.saveToCameraRoll بتحميل هذا الملف إلى المعرض.

هذا كل شئ. شكرا للانتباه!

الروابط:
github.com/react-native-community/react-native-cameraroll
github.com/joltup/rn-fetch-blob

All Articles