FlatList
- React Native kursu
- Başlangıç
- Ders 53/116
- 5 dk
FlatList ile verimli liste render etmeyi öğrenirsin.
FlatList
FlatList uzun listeleri verimli gösteren bileşendir. Üç temel prop alır: data diziyi, renderItem her öğeyi çizen işlevi, keyExtractor her öğenin benzersiz anahtarını döndürür. Yalnızca ekranda görünen öğeleri render eder; binlerce öğe olsa bile akıcı kalır.
ScrollView içine tek tek öğe koymak yerine FlatList kullanmak performansı artırır. ScrollView tüm çocuklarını bir kez render eder; FlatList ise yalnızca görünenleri. Bu yüzden uzun listelerde her zaman FlatList tercih edilir.
Üç temel prop
Bir FlatList yazmak için üç prop vermen yeter. data bir dizi alır: data={numbers}. renderItem bir işlev alır; bu işlev her öğeyi çizer: renderItem={({ item }) => <Text>{item}</Text>}. keyExtractor her öğenin benzersiz anahtarını döndürür.
Örnek: <FlatList data={[1, 2, 3]} renderItem={({ item }) => <Text>{item}</Text>} keyExtractor={(item) => item.toString()} />. Bu üç prop birlikte çalışır; biri eksikse liste ya çalışmaz ya da uyarı verir. renderItem'in parametresi bir nesnedir; bu nesnenin item özelliği o anki dizi öğesidir.
Uygulama Sayı listesi yaz
Boş bileşeni tamamla. numbers dizisi zaten tanımlı: [1, 2, 3]. Dönüşte <FlatList data={numbers} renderItem={({ item }) => <Text>{item}</Text>} keyExtractor={(item) => item.toString()} /> kullan.
Başlangıç kodu
import React from 'react';
import { FlatList, Text } from 'react-native';
export default function NumberList() {
const numbers = [1, 2, 3];
// FlatList ekle
return null;
}Örnek çözüm
import React from 'react';
import { FlatList, Text } from 'react-native';
export default function NumberList() {
const numbers = [1, 2, 3];
return (
<FlatList
data={numbers}
renderItem={({ item }) => <Text>{item}</Text>}
keyExtractor={(item) => item.toString()}
/>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 FlatList neden ScrollView'dan daha verimlidir?
/* 1000 öğeli liste */- Tüm öğeleri bir anda çizer
- Daha az özellik alır
- Öğeleri gizler
- Yalnızca görünen öğeleri çizer Doğru cevap
Açıklama: FlatList yalnızca ekranda görünen öğeleri render eder.
2 data prop'unu yaz
<FlatList ____={numbers} renderItem={renderItem} keyExtractor={keyExtractor} /><FlatList data={numbers} renderItem={renderItem} keyExtractor={keyExtractor} />Açıklama: data prop'u listelenecek diziyi alır.
3 Prop'u işlevine eşle
| Kavram | Anlamı |
|---|---|
data |
Liste dizisi |
renderItem |
Her öğeyi çizer |
keyExtractor |
Benzersiz anahtar |
FlatList |
Verimli liste bileşeni |