React Native Instagram — RNCamera kullanımı

Kamera: Çağrı YURTBAŞI — https://dribbble.com/shots/2866711-Skeuomorphic-Camera-Icon

Aslen 8 yazılık bu serinin diğer yazılarına aşağıdaki linklerden ulaşabilirsiniz:

1. Proje mimarisi
2. Projenin oluşturulması ve React Native Navigation
3. BottomBar’ın oluşturulması
4. FlatList kullanımı (Post’ların görüntülenmesi)
5. Story Listesi
6. RNCamera kullanımı
7. React Navigation Drawer kullanımı
8. Redux kullanımı

Önceki yazımda Story özelliğini kodlamıştık. Şimdi bu yazıda story kamerası ve dm ekranlarını kodlayabiliriz. Projede kaldığımız yerden devam etmek için aşağıdaki 4-adding-story-list branch’ine gidebilirsiniz:

ozcanzaferayan/react-native-instagram-blog

Öncelikle Story kamerası ve DM butonları şu an hiçbir iş yapmadığı için bir ekran açacak hale getirelim.

src/containers/home dizini içerisinde dm ve storyCamera adında iki dizin oluşturalım. İçerisine sırasıyla DmScreen.js ve StoryCameraScreen.js dosyalarını aşağıdaki gibi oluşturalım:

Instagram uygulamasını telefonunuzda açtığınızda farkedebileceğiniz Dm ve StoryCamera butonlarının şöyle bir özelliği var. bottomTabBar’ın üzerine yazmayıp ekranı komple kaydırıyorlar. Bu nedenle TabNavigator değil MainNavigator.js dosyasında değişiklik yapmamız gerekiyor.

Bu dosyada yer alan navigationConfig parametresindeki transitionConfig özelliği, ekranlar arası geçişin nasıl yapılacağını belirtmemizi sağlıyor. transitionSpec özelliğinde, geçiş animasyonu ile ilgili süresi ve easing özelliklerini belirliyoruz. screenInterpolator fonksiyonu ile ekranın başlangıç ve bitiş durumu ile ilgili pozisyon değerlerini atıyoruz. Bu özelliği, navigate fonksiyonunda ekranı çağırırken verdiğimiz transition parametresinde sağlıyoruz:

navigation.navigate('Dm', { transition: 'toRight' })
navigation.navigate('StoryCamera', { transition: 'toLeft' })

Not: stackNavigator’ün 2.0.15 versiyonunda transitionConfig özelliği kaldırılmış. 1.10.3 versiyonuna downgrade edebilirsiniz:

npm i react-navigation-stack@1.10.3 --save

AppNavigator.js’te de, doğrudan TabNavigator’e gitmek yerine MainNavigator’ü kullanacak şekilde güncellememiz gerekiyor.

Uygulamayı çalıştırıp butonlara tıkladığınızda aşağıdaki gibi bir görünüm elde edeceksiniz:

Orijinal Instagram uygulamasındaki gibi BottomTab’ı komple sağa veya sola kaydırmıyor. Bunun için ekstra çalışma yapmak gerekli fakat şimdilik bu kadarı yeterli. Artık StoryCameraScreen.js’i kodlamaya başlayabiliriz.

Instagram uygulamasında Story kamerası ekranında fotoğraf çekmek için bir buton var. Öncelikle onu kodlayalım.

storyCamera dizininde CameraShutterButton.js dosyasını oluşturalım:

Bu butonun kodlaması, profil fotoğrafı ve renkli story halkası kodlamasına benzer şekilde gerçekleştiriliyor. Şimdi bu butonu StoryCameraScreen.js ekranına eklemeden önce React Native Camera kütüphanesini indirelim:

npm i react-native-camera --save
cd ios
pod install
cd ..

Şimdi StoryCameraScreen.js içeriğini aşağıdaki gibi düzenleyebiliriz:

Kodu açıklayacak olursak, RNCamera bileşeni bir kamera görüntüleme ekranı oluşturmayı sağlıyor. takePicture fonksiyonu, asenkron olarak kameradan fotoğraf çekimini, 0.5 oranında kaydedip, base64: true ise dosya path’inin alınarak console’a basılmasını sağlıyor. RNCamera bileşenininde yer alan type özelliği, arka kamerayı kullanmayı sağlıyor. flashMode’da fotoğraf çekilirken flash özelliğinin açık olmasını belirtiyoruz. androidCameraPermissionOptions’da ise kamera kullanım izni alırken çıkacak izin diyaloğunun içeriğini veriyoruz. onGoogleVisionBarcodesDetected ise barkod tespiti yapmamızı sağlıyor. İzinleri ne yazık ki android ve ios için native tarafta vermemiz gerekiyor. ios/Instagram dizini altında Info.plist’e aşağıdaki satırları ekleyebilirsiniz:

<key>NSCameraUsageDescription</key>        
<string>${PRODUCT_NAME} uygulaması hikaye çekmek için kamera iznine ihtiyaç duyar.</string>
<key>NSMicrophoneUsageDescription</key>        <string>${PRODUCT_NAME} uygulaması hikayede ses kaydetmek için kamera iznine ihtiyaç duyar.</string>

Android için ise ses izni için android/app/src/main dizini altında AndroidManifest.xml’e aşağıdaki satırları eklemeniz lazım:

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

iOS Simulator’de kamera çalışmıyor. Bunun yerine ya gerçek cihazınızı bağlamanız gerekiyor, ya da Android emulator kullanmanız gerekiyor. Bende Android cihazım olduğu için üzerinde debug edeceğim. Öncelikle .vscode dizini içerisinde yer alan launch.json dosyasını aşağıdaki gibi değiştirelim:

Android’de React Native Camera için ayrıca android/app/build.gradle dosyasında defaultConfig alanının içerisine aşağıdaki satırı eklemeniz gerekiyor:

missingDimensionStrategy 'react-native-camera', 'general'

VsCode içerisinde debug imkanı zor olabiliyor. Eğer VScode’da çalıştıramazsanız terminalde aşağıdaki kod ile çalıştırınız:

react-native run-android

Gerçek cihazda açtığınızda aşağıdaki gibi görüntülenecektir.

Fotoğraf çektiğinizde aşağıdaki gibi bir data URL’i verecektir.

RNCamera, dosyayı android’in cache dizinine kaydetti. Eğer farklı bir dizine kaydetmesini istiyorsanız react-native-fs kütüphanesini kullanarak buradaki gibi kaydedebilirsiniz.

Projenin son halini 5-adding-camera branch’ine giderek edinebilirsiniz.

git checkout 5-adding-camera

Sonuç Olarak

Bu yazıda transitionConfig ve RNCamera gibi özelliklere değindik. Eğer sizin de soru ve görüşleriniz varsa buradaki yorum kısmından yazabilirsiniz. Bir sonraki yazıda DM ekranını ele alacağım. Sonraki yazı >