elementi - Sınırsız veri yazdırabilme

FlatList elementi Çok uzun olabilme olasılığı olan verileri ekrana yazırmamızı sağlayan react native elementidir. 

FlatList ile ScrollView elementi arasındaki fark; 
ScrollView elementi içerisine eklediğimiz bütün elementleri app başlangıcında render eder.
Fakat Flatlist elementi sadece ekranda gözüken elementleri render eder. 

Bu durumda ekrana yazdırmak istediğimiz veri listesi uzadıkça ScrollView kullanmamız uygulamamızı yavaşlatmamıza sebep olabilir. 

Flatlist  element oluşturmak için onda 2 adet prop belirtmemiz zorunludur. Bunlar data ve renderItem proplarıdır. 

Data prop'u yazırmak istediğimiz veri dizisi,
Flatlist için belirilmesi gereken veri disizi key, value şeklindedir. Eğer bu şekilde belirtir isek 
renderItem içerisinde dönen döngüde yazdırdığı her elemente otomatik olarak key ekler. 
 


renderItem ise her bir dizi elemanı için ekrana yazdırmak istediğimiz element olmalıdır. ve bu prop içerisinde bir map döngüsü çalışıyor. 

Goals isminde bir dizimiz olduğunu düşünelim
 const goals = [
   {key: "1", value: "Gökhan"},
   {id: "2", value: "Hakan"},
   {key: "3", value: "Serap"}
]

Bu şekildeki bir key - value dizisi flatlis için olması gereken veri yapısıdır. Flatlist buradaki key veya id değerini alıp yazdırdığı her element için key olarak kullanacaktır. Bu her dizi elemanındaki verilen key değeri benzersiz olmalıdır. 

<FlatList 
        data={goals}  
        renderItem={itemData => (
          <View style={styles.listItem}>
            <Text>{itemData.item.value}</Text>
          </View> )} 
 />

renderItem içerisinde çalışan map döngüsünde her eleman için belirtilen itemData dizinin mevcut elemanını temsil etmez. ItemData Flatlist objesidir.  

itemData.item değeri dizi içerisindeki dönen mevcut elemanın değerini verir.
itemData.index ise dizi elemanının index değerini verir.

 

Eğer elimizdeki veri yapısı FlatList' e uyumlu değil ise, yani her dizi elemanı key ya da id değerini içeren bir obje değil ise bu durumda keyExtractor özelliğini kullanmamız gerekmektedir. 

Vericek olur isek 

 

<FlatList 
        keyExtractor={(item, index) => "key olarak belirlenecek değer"}
        data={goals}  
        renderItem={itemData => (
          <View style={styles.listItem}>
            <Text>{itemData.item.value}</Text>
          </View> )} 
 />

keyExtractor renderItem gibi içerisinde bir map dönügüsü çalıştırır ve map döngüsündeki gibi item ve index değerini kullanabiliriz. Burada return edilen değer o index'in key değeri olarak belirlenir.