React Native FlatList

Herkese selamlar,

1 ay öncesine kadar sadece adını bildiğim kodlama yapmadığım React Native compenentlerinden FlatList yapısından bahsedeceğim.

Peki nedir bu FlatList ?

Uygulamamızda listelemek yapmak için kullandığımız yapıdır. En basit ve en kullanışlı listeleme yöntemidir. Bir uygulama oluştururken karşımızda bazı listeler çıkacaktır; bunlar kişi listesi, adres listesi, telefon listesi vb. olabilir. Ama bazı durumlarda büyük veri kümeleri veya uzun listeler görüntülemek zordur. Flatlist burada devreye giriyor.

FlatList’ te bazı özellikler vardır. Bunlar;

· Çapraz platform

· Yatay olarak gösterilebilir

· Yenileme(refresh)

·Başlık, altbilgi, ayırıcı, çoklu sütun desteğine sahiptir

FlatList componenti birden fazla prop kullanır. En çok kullanılan proplar;

data =En önemli propslardan biri. Listemizi oluşturur. Listeyi array tipinde belirtmelidir.

renderItem=datayı alır ve listeye dönüştürür.

keyExractor=Listedeki verileri takip eder ve render edilmesini sağlar. Listedeki verilere id değerini atar. keyExratctor değeri unique olmalıdır.

onPressItem=Listedeki veriye tıklatıldığında tetiklenen fonksiyondur.

onRefresh=Listede yenileme yapılacak işlemleri sağlar.

refreshing=Listede yenileme yapılıp yapılmaması bu işleve bağlıdır. Boolean değer içerir.

extraData=Listeyi otomatik olarak yenilemesini sağlar.

FlatList Temel Kullanım

· İlk önce FlatListimizi import edelim.

· Daha sonra bir veri hazırlayalım. State içerisine name ve id değerleri atadım.

· Gelelim FlatList yapısına Burada 2 önemli props kullanacağız.

data(veriyi kullanacağımız ) ve renderItem(verileri yazdırdığımız kısım)

Örneğimize style verdikten sonra son hali bu şekilde.

FlatList componentini en basit haliyle anlatmaya çalıştım. Uygulamamızda rahatlıkla liste yapılarını uygulayabiliriz .Umarım faydalı bir içerik olmuştur.