1. Home
  2. Docs
  3. React Native
  4. Componentler
  5. FlatList

FlatList

Datalarımızı render içerisinde sıralı şekilde listelemek için kullanırız, kullanımı kolay ve stabildir, en çok tercih edilen listeleme componentleri arasında baş sırayı oynar.

FlatList Component i react-native içerisinde dahili olarak gelir.

import {FlatList} from ‘react-native’

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

Kullanımı yukarıda görüldüğü üzere oldukça basittir aldığı propslar . ;

data = {}dizi değeri alır ve burada verilen data flatlist içerisinde render edilir
extraData = {}her değiştiğinde FlatList yeniden render edilir.
ListFooterComponent={}Flatlist in en sonunda yer almasını istediğimiz data
keyExtractor = {}her listelenen data için verilen uniqe ıd
renderItem={}alınan dataların gösterim alanı yani tasarım alanıdır.
horizontal = {true}render edilen dataların yan yana listelenmesini sağlarız, false alırsa alt alta render edilir
numRows={(integer)}Yanyana listelenecek maksimum render component adını temsil eder (integer) değeri bir integer değer atanmalıdır
Was this article helpful to you? Yes No