Listview – FlatList

Uygulamamızda listeleme yapmak yani listview yapısını kullanmak için FlatList çok iyi bir seçenektir. Tabi eğer ki listemiz bölümlendirilmiş yani başlık başlık olmayacak şekilde ise. Fakat bölümlendirme olacak ise SectionList kullanabiliriz.

FlatList çok efektif bir listview yapısıdır. Bazı özelliklerini belirtmek gerekirse;

• Herhangi bir manuel işlem gerekmeksizin her iki platform için de kullanılabilir.
• Yatay olarak gösterilebilir.
• Header ve footer eklenebilir.
• Aşağı yukarı kaydırmada ‘Yükleniyor’ (Loading) imleci mevcuttur.
• Yenileme (refresh) mevcuttur.

FlatList birçok parametre ve fonksiyon içerir. Yapacağımız ve anlatacağımız örnekte en sık kullanılan birkaç işleve değineceğiz.

data

Listemizi içerir. Listemizi array olarak belirtilmelidir.

onPressItem

Listedeki herhangi bir elemana tıklanıldığında tetiklenecek olan fonksiyondur.

keyExtractor

Listedeki elemanların id değerlerini tanımlamak için kullanılır. string bir değer olmasına dikkat edilmelidir.

renderItem

Listenin nasıl gösterileceğini belirtmek için kullanılır. Yani listedeki her elemanın içerikleri ile birlikte görsel olarak kullanıcıya sunulduğu bölümdür.

onRefresh

Listede yenileme(refresh) yapıldığında yapılacak işlemleri içerir.

refreshing

Listenin yenileme(refresh) yapılıp yapılmaması işlemi bu parametreye göre belirlenir.

extraData

Listenin kendisini otomatik olarak yenilemesini sağlayan parametredir. Buraya bağlanan state değişkeninin değişmesi durumunda FlatList yeniden yorumlanacaktır(re-render).

ItemSeparatorComponent

Elemanlar arasında ayıraç koymak ya da ayıraca farklı bir şekil katmak için kullanılabilir. Örnek bir kod parçası aşağıdaki gibidir.

ItemSeparatorComponent={Platform.OS !== ‘android’ && ({highlighted}) => ( <View style={[style.separator, highlighted && {marginLeft: 0}]} /> )}

Önce basit bir örnek yapacağız. FlatList temelini gösterelim.

Şimdi ise biraz daha gerçekçi bir örnek yapalım.

Teşekkürler.