Resim Kaydetme – Çekme ( Save Image – Get Image) React Native – CameraRoll

Posted on by

React Native ile geliştirilen uygulamalarda ( android ve ios ) mobil cihazın resim klasörüne erişmek ve ona yeni bir resim kaydetmek için kullanılan en sağlıklı kütüphane CameraRoll kütüphanesidir.

Kurulum

CameraRoll kütüphanesini kurmak için alttaki komutları çalıştırıyoruz.

npm install @react-native-community/cameraroll --save
react-native link @react-native-community/cameraroll

IOS

Üstteki komutlar sonrasında kütüphanenin kurulumu tamamlanmamış ise ister manuel bağlama ile bağlayabilir ya da podFile dosyasınıza alttaki komutu ekleyip kurulumu tamamlayabilirsiniz.

pod 'react-native-cameraroll', :path => '../node_modules/@react-native-community/cameraroll'
pod install

info.plist dosyasına resim klasörüne erişim izni girmemiz gerekiyor. Bunun için alltaki satırları ekleyebiliriz.

<key>NSPhotoLibraryUsageDescription</key>
<string>We need the Photo acces to fetch a photo and compare it with celebrities</string>

ANDROID

Üstteki komutlar sonrasında kütüphanenin kurulumu tamamlanmamış ise alttaki komutları uygulayarak kurulumu tamamlayabilirsiniz.

MainApplication.java dosyanızı açıp üste alttaki komutu ekleyin.

import com.reactnativecommunity.cameraroll.CameraRollPackage;

getPackages() fonksiyonunun içine alttaki satırı ekleyin.

new CameraRollPackage()

android/settings.gradle dosyanıza alttaki satırları ekleyin.

include ':@react-native-community_cameraroll'
project(':@react-native-community_cameraroll').projectDir = new File(rootProject.projectDir, 	'../node_modules/@react-native-community/cameraroll/android')

android/app/build.gradle dosyanıza alttaki satırı ekleyin.

compile project(':@react-native-community_cameraroll')

Resim klasörüne erişim için izin girmemiz gerekmektedir. Bunun için manifest.xml dosyasına alttaki satıları giriyoruz.

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Kullanım

Kütüphaneyi kullanacağımız dosyaya önce CameraRoll kütüphanesini ekliyoruz.

import CameraRoll from "@react-native-community/cameraroll";

Kaydetme

Kaydetmek istediğimiz resmi string olarak belirtiyoruz. Bu uri olabilir, base64 olabilir.

try {
          CameraRoll.saveToCameraRoll(image, 'photo').then(function(result) {
        }).catch(function(error) {
          console.log(error)  
        });

Resimleri Çekme

Alttaki kod ile resimleri çekebiliriz.

CameraRoll.getPhotos({
       first: 20,
       assetType: 'Photos',
     })
     .then(r => {
       this.setState({ photos: r.edges });
     })
     .catch((err) => {
        //Error Loading Images
     });
   };

Kaynak: https://github.com/react-native-community/react-native-cameraroll

Teşekkürler.

Not: Tez, Ödev, Makale, Anket Merkezi => https://kavramtez.com/