React Native Instagram — Flatlist Kullanımı (Post’ların görüntülenmesi)

Kaynak: Amazon.com

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 bottomBar’ı kodlamıştık. Şimdi ise anasayfa üzerinde çalışacağız. Projede kaldığımız yerden devam etmek için aşağıdaki 2-adding-bottom-bar branch’ine gidebilirsiniz:

ozcanzaferayan/react-native-instagram-blog

Öncelikle, projede kullanılacak ikonların tamamını ana repodan temin ederek res/images dizininin içerisine kopyalayalım ve node src/scripts/images komutunu çalıştırarak res/images.js dosyasının güncellenmesini sağlayalım.

Projedeki bottomBar’da yer alan 5 sekmede, MainScreen ve OtherScreen’i değişmeli bir şekilde kullanmıştık. Şimdi gerçek ekranları eklemek için aşağıdaki gibi 5 adet dizin oluşturalım.

cd src/containers/main
mkdir activity addPost home profile search

Dizinler oluşturulduğunda containers/main dizininin görüntüsü aşağıdaki gibi olacaktır:

src/containers/main dizini

home dizininin içerisine gidelim ve touch komutunu kullanarak HomeNavigator.js ile HomeScreen.js dosyalarını oluşturalım.

cd home
touch HomeNavigator.js HomeScreen.js

HomeScreen.js dosyasını açarak, aşağıdaki gibi sadece “HomeScreen” metnini ekrana basacak şekilde oluşturalım. Daha sonra bu component’i uygun şekilde dolduracağız.

HomeScreen’i barındıracak StackNavigator bileşeni için HomeNavigator.js dosyasını aşağıdaki şekilde oluşturalım:

Kodu açıklayacak olursak, createStackNavigator() ile bir stackNavigator nesnesi oluşturup uygulamaya bir appBar eklemiş oluyoruz. navigationOptions içerisinde yer alan ...palette.header sayesinde ise oluşturduğumuz stil paletini spread syntax ile header’a veriyoruz. headerLeft ve headerRight özellikleri sayesinde tıklanabilir ikonlar oluşturup appBar’a bu ikonları ekliyoruz. const styles satırı ise ikon stillerinin daha yönetilebilir hale gelmesini sağlıyor. Son olarak oluşturduğumuz HomeNavigator component’ini, diğer dosyaların import edebilmesi için export ederek proje içerisinde kullanıma açıyoruz. Artık HomeNavigator’ü TabNavigator içerisinde kullanabiliriz. Bunun için tek yapmamız gereken routeConfig kısmında yer alan Home path’i için HomeNavigator’ü göstermek:

const routeConfig = {
 Home: HomeNavigator,
 Search: createStackNavigator({ Search: OtherScreen }),
 AddPost: createStackNavigator({ AddPost: MainScreen }),
 Activity: createStackNavigator({ Activity: OtherScreen }),
 Profile: createStackNavigator({ Profile: MainScreen }),
};

Projeyi çalıştırdığınızda aşağıdaki gibi appBar ile karşılaşacaksınız:

Şimdi ana ekranda gönderilerin görüntülenmesine geçebiliriz. Gönderiler bir liste halinde scroll edilebilir şekilde ekranda yer alacak. Bunun için React Native kütüphanesinde yer alan FlatList component’ini kullanabiliriz. ScrollView component’i de benzer bir işi yapıyor fakat aralarındaki fark FlatList’in bir VirtualizedList olup, rendering işlemini asenkron olarak yapıyor olmasıdır. Bu sayede, birçok elemana sahip büyük listelerin performanslı bir şekilde görüntülenmesi sağlanır. ScrollView’ı ise metin görüntüleme gibi daha az içerik gereken/liste olmayan ekranlarda kullanabilirsiniz.

Örnek bir FlatList kullanımı aşağıdaki gibidir:

data attribute’ünün parametre olarak aldığı array’de her zaman key isimli bir property bulunmak zorundadır, eğer yoksa aşağıdaki gibi bir keyExtractor fonksiyonu kullanılarak id gibi unique bir attribute de key olarak kullanılabilir. Aksi halde FlatList’in render performansı düşer ve uygulama bir uyarı ile bunu size bildirir.

keyExtractor={(item, index) => item.id}

Bir diziyi listeleyebildik ve FlatList’in sorunsuz çalıştığını gördük. Gönderi için Post isimli bir component oluşturarak onu da listeleyebiliriz. Şimdi Instagram uygulaması içerisinde örnek bir gönderi seçelim ve bunu satır bazlı olacak şekilde bileşenlerine ayıralım:

Bir Post bileşenini 7 küçük bileşene ayırabileceğimizi gördük. Şimdi bu bileşenler için bir post dizini oluşturup, touch komutuyla dosyalarını oluşturalım:

mkdir post 
cd post
touch Post.js PostHeader.js PostImage.js PostActions.js PostLikes.js PostDescription.js PostComments.js PostPublishDate.js

PostHeader.js dosyasını açarak kodlamaya başlayabiliriz:

PostHeader component’i parametre olarak post nesnesini alıyor ve içeriğini uygun bir şekilde basıyor. Bu bileşen için önizleme yapmak istersek HomeScreen.js dosyasında bir post nesnesi oluşturup, renderItem kısmında FlatList’e bağlayarak test edebiliriz:

Şimdi PostImage’a geçebiliriz. Bu bileşen sadece bir Image component’ini içermesi yeterlidir:

postImg parametresi için fotoğraf url’ini picsum’dan çektiğimiz için uygulamayı her refresh ettiğinizde farklı bir fotoğraf listesiyle karşılaşabilirsiniz. HomeScreen’de PostImage’ı test ettiğimizde aşağıdaki gibi görüntülenecektir:

Gönderi altındaki like share butonları için PostActions component’i aşağıdaki gibi olacaktır:

HomeScreen’de renderItem kısmını aşağıdaki gibi değiştirerek oluşturduğumuz 3 component’i de bir arada görüntüleyebiliriz:

renderItem={({ item, index }) => 
   <View>
     <PostHeader post={post} />
     <PostImage post={post} />
     <PostActions post={post} />
   </View> 
}/>

Ana sayfa şekillenmeye başladı. Şimdi beğenme adedini görüntüleyecek olan PostLikes’ı da oluşturalım:

Şimdi PostDescription bileşenine geçebiliriz. Bu bileşende Önemli olan kısım ise iki satırdan sonrasını devamı.. şeklinde kısaltması. Bunun için proje dizinine giderek react-native-read-more-text kütüphanesini yükleyebiliriz:

cd ../../../../../
npm i react-native-read-more-text --save

Bu kütüphanenin renderRevealedFooter ve renderTruncatedFooter metodlarını aşağıdaki gibi kodlamak gerekiyor. Instagram’da …devamı metnine tıklandığında tekrar geri kısaltma özelliği olmadığı için renderRevealedFooter’da sadece return; ifadesi kullanabiliriz. Ayrıca satır sayısı 2 olduktan sonra kısaltma yapmasını sağlamak için de numberOfLines={2} olarak atamamız yeterli olacaktır:

Buradaki problem, …devamını oku kısmının kısaltılan metin ile aynı satıra gelmemesi. Bunu yapmak biraz güç eğer sizin bir çözümünüz varsa yorum kısmından yazarsanız, yazıda da ilgili şekilde değiştirebiliriz.

PostComments bileşenini de aşağıdaki şekilde kodlayabiliriz:

Son olarak gönderinin ne kadar önce paylaşıldığının görüntülenmesi için PostPublishDate component’ini kodlayacağız. Tarih formatımız 2019-11-24T17:28:31.123Z şeklinde olduğu için bunu daha okunabilir hale getirmemiz gerekiyor. Bunun için src dizini altında bir utils dizini oluşturup, içerisine aşağıdaki prettyTime.js dosyasını ekleyelim:

PostPublishDate.js dosyasının içeriği de aşağıdaki gibi olacaktır:

HomeScreen içerisindeki renderItem’da yer alan Post alt bileşenlerini de Post içine alacak şekilde refactor edebiliriz. Post.js dosyası da aşağıdaki hale gelecektir:

HomeScreen’deki renderItem kısmına aşağıdaki şekilde sadece Post bileşenini yazmamız yeterli olacaktır:

renderItem={() => <Post post={post} />}

Projenin son halini 3-adding-post-component branch’ine giderek edinebilirsiniz.

git checkout 3-adding-post-component

Sonuç Olarak

FlatList bileşeninin kullanımı oldukça kolay, tek bir renderItem fonksiyonu ile istediğiniz veriyi basabiliyorsunuz. Ayrıca FlatList’e vereceğiniz veri için olan arayüz kompleks ise satır veya sütun bazında alt bileşenlere ayırmak, uygulamayı kolayca yönetmenizi sağlayacaktır.

Sonraki yazımda Instagram story’lerinin eklenmesinden bahsedeceğim. Görüş ve önerilerinizi yorumlar kısmından yazaiblirsiniz. Sonraki yazı >