React Native Instagram — react-navigation-drawer kullanımı

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 RNCamera özelliğini kodlamıştık. Şimdi bu yazıda kalan diğer ekranlar ve navigation drawer kullanımına değineceğim. Projede kaldığımız yerden devam etmek için aşağıdaki 5-adding-camera branch’ine gidebilirsiniz:

ozcanzaferayan/react-native-instagram-blog

Instagram uygulamasında DM ekranına girip baktığınızda, appBar dışında bir searchbar ve bir mesaj listesinden oluştuğunu göreceksiniz. Bunun için öncelikle main/home/dm dizini altında SearchBar.js isimli dosyayı oluşturalım:

Buradaki SearchBar aslında bir çeşit buton ve tıklandığında sayfanın tüm içeriğini değiştirip, AppBar’ı searchBar haline getiriyor. Bu detaylı işleme başka bir yazıda değineceğim. Şimdilik mesaj listesindeki tek bir elemanı görüntüleyecek MessageListItem.js dosyasını oluşturalım:

Kodu açıklayacak olursak, profil fotoğrafı için daha önceden oluşturduğumuz ProfilePicture bileşenini kullandık. Ayrıca stilleri parametrik olarak kullanmak için stylesParams adında bir fonksiyon oluşturduk. Bu sayede henüz okunmamış mesajlar kalın yazı tipi ile görüntülenecek ve “Bir mesaj gönderdi” ifadesi bulunacak. Ayrıca okunmamış mesajlar, unreadIndicator stilinde mavi renkli daire ile belirtilecek.

Şimdi bu iki bileşeni barındıran DmScreen.js dosyasını aşağıdaki gibi değiştirelim:

messages dizisini çok yer kaplamaması adına tek satıra koydum. Bu diziyi daha sonra web’den çekeceğiz. SearchBar bileşeni, FlatList’in ListHeaderComponent fonksiyonunun içine koymamız yeterli oldu. Uygulamayı çalıştırdığınızda aşağıdaki gibi bir listeden oluşan ekran gelmesi lazım:

Uygulamadaki x gün önce ibareleri çok uzun. Bunun yerine orijinal uygulamadaki gibi 1g veya 2h gibi kısaltmalar kullanılabilir. Bunun için prettyTime.js dosyasını, template listesini parametrik alacak şekilde değiştirelim:

prettyTime fonksiyonu değiştiğinden dolayı PostPublishDate.js bileşeni bozulacağı için orayı refactor edelim. prettyTimeTemplates nesnesini ekleyelim:

Şimdi yeni oluşturduğumuz prettyTime fonksiyonunu MessageListItem bileşenine uydurmak için aşağıdaki gibi değiştirelim:

Aşağıdaki gibi kısaltılmış tarih formatı ile içerik görüntülenecektir:

Şimdi bottomBar’daki diğer ekranların mock hallerini kodlamaya geçelim. Öncelikle SearchBar ile başlayalım. main/search dizini altında SearchScreen.js ve SearchNavigator.js dosyalarını oluşturalım:

Instagram’daki arama ekranı birkaç fotoğraf ve video listeleyen bir ekrandan ibaret. Bu nedenle FlatList buradaki ihtiyacımızı görecektir:

Şimdi gönderi ekleme için addPost dizinine aşağıdaki iki dosyayı ekleyelim:

Gönderi ekleme ekranı

BottomBar’daki kalp kısmına tıklandığında görüntülenecek olan activity dizinini oluşturalım. Activity ekranı iki kısımdan oluşuyor: 1. takip istekleri, 2. beğeniler ve yorumların aldığı Activity’ler. Öncelikle Activity kısmından başlayalım. Bir activity aşağıdaki gibi 3 bileşene ayrıştırılabilir:

ProfilePicture bileşenini daha önce kodlamıştık. Image bileşeni ise zaten React Native’de var. Geriye sadece Activity ve ActivityDescription bileşenlerini yapmak kalıyor:

ActivityDescription kısmında, activity türüne göre “x kişisi yorumunu beğendi” veya “ x kişisi bir yorumda senden bahsetti” ifadesi ekleniyor. Şimdi bu Activity bileşenlerini barındıracak ActivityScreen.js ve ActivityNavigator.js dosyalarını oluşturalım:

Bu değişikliklerin tab’a yansıması için TabNavigator.js’teki routeConfig kısmında Activity: ActivityNavigator olacak şekilde değişiklik yaparsanız, aşağıdaki gibi bir ekranla karşılaşacaksınız:

Şimdi profil ekranına gelelim. Bu ekran diğerlerinden daha zor ve daha fazla özellik var. Öncelikle appBar’da yer alan hamburgerMenu veya navigationDrawer denilen kısımdan başlayalım:

Bileşenin tamamına ProfileDrawer.js dersek, drawer’ın tek bir elemanı da ProfileDrawerItem olacaktır. İlgili ikon ve metin ifadelerini aşağıdaki gibi kodlayalım:

Şimdi profil ekranı olan ProfileScreen.js ve ProfileNavigator.js bileşenlerini kodlayalım. ProfileScreen bileşeni bir header ve bir listeden oluşuyor. FlatList’e header belirterek bu elemanı kodlayabiliriz:

ProfileNavigator’de ise bir drawer kullandığımız için navigatorConfig kısmında drawer’ın animasyon özelliklerini belirttik. Tüm ekranların bottomTaki butonlara bastıkça gözükmesi için TabNavigator’deki routeConfig değişkenini aşağıdaki gibi değiştirelim:

const routeConfig = {
  Home: HomeNavigator,
  Search: SearchNavigator,
  AddPost: AddPostNavigator,
  Activity: ActivityNavigator,
  Profile: ProfileNavigator,
};

Profil ekranı aşağıdaki hale gelecek ve diğer tab’lar da sorunsuz çalışıyor olacaktır.

Projenin son halini 6-adding-drawer branch’ine giderek edinebilirsiniz.

git checkout 6-adding-drawer

Sonuç olarak

Bu yazıda Dm, Search, AddPost, Activity ve Profile ekranlarını yaptık. Profil ekranında ise drawer bileşenini kodladık.

Yazı ile ilgili soru ve önerilerinizi aşağıdan yazabilirsiniz. Sonraki yazı >