React Native FlatList

tarihinde gönderilmiş tarafından

React Native ile listeleme yada ekranda alt alta sıralama işlemleri yapmak istiyorsanız en iyi tercih FlatList companenti olacaktır bunun altarnetifleri var (ListView) ancak en çok kullanılanı ve geliştiriciler tarafındanda performans olarakta en çok tercih edileni FlatList dir.

      <FlatList style={styless.container}
          data={this.state.CompArray}
          extraData={this.state}
          ListFooterComponent= {()=>
          <View
            style={{
              paddingVertical: 20,
            }}
          >
          </View>}
          keyExtractor={(item, index) => index}
          renderItem={({item,index}) =><Text>{item.veri} </Text>}
      />

Kullanılan yapıyı anlatacak olursak ;

style : CSS tanımlaması

data : Sıralanacak veriler dizisi

keyExtractor : Her component alanı için özel key ataması

extraData : data içerisinde belirlediğimiz diziye çalışma esnasında yeni bir değer eklenirse flatliste gösterilmesi yani yeniden render edilmesi için bir değişken var renderla demek için kullanılır. Buraya state verilir .

ListFooterComponent : FlatList in en sonunda gösterilecek Component tanımlamak için kullanılır buraya devamını gör yada flatlistin altına bir component eklendiyse listeden olan değerlerin bu componentin altında kalmaması için boş component eklenir.

renderItem : FlatListte gösterilecek bileşenlerin tanımlanmasıdır Text Componentlerinin sıralanmasını istiyorsak <Text> vermelisiniz ancak dokunabilir bir alan eklemek gerekiyorsa <TouchableOpacity  /> eklemelisiniz.

FlatListte sıralanan bileşenlere tıklanabilmesini istiyorsak yani her liste elamanı üzerinden bir işlem yapılacaksa bileşen olarak button vermelisiniz, (TouchableOpacity, TouchableHighLight)