List header ve footer
- React Native kursu
- Başlangıç
- Ders 57/116
- 5 dk
ListHeaderComponent ve ListFooterComponent öğrenirsin.
List header ve footer
FlatList ve SectionList listenin üstüne ve altına sabit bir bileşen koyabilir. ListHeaderComponent listenin başına, ListFooterComponent sonuna bir bileşen yerleştirir. Bu bileşenler kaydırma sırasında listeden ayrılmaz.
Örnek: <FlatList data={tasks} renderItem={...} ListHeaderComponent={<Text>Yapılacaklar</Text>} ListFooterComponent={<Text>Daha fazla yok</Text>} />. Bu kalıp liste üstünde başlık, altında bir dipnot gösterir. Üst bilgi genelde başlık veya sayaç için, alt bilgi ise 'hepsi bu kadar' ya da sayfalama düğmesi için kullanılır.
Header ve footer ne zaman?
Header ve footer sabit bilgi göstermek için idealdir. Bir görev listesinde header'da toplam görev sayısını, footer'da 'Hepsi bu kadar' metnini gösterebilirsin. Bu kalıp liste içerisine başlık öğesi koymaktan daha temizdir.
Önemli ayrım: header ve footer FlatList'in kaydırma alanının içindedir; liste kayarken onlar da kayar. Ekranda sabit durmasını istediğin başlıklar için header'ı FlatList'in dışına koymalısın. Bu ayrım mobilde 'liste üstü başlık' ile 'sabit başlık' arasındaki farkı belirler.
Uygulama Başlık ve dipnotlu liste yaz
Boş bileşeni tamamla. tasks dizisi tanımlı. <FlatList data={tasks} renderItem={({ item }) => <Text>{item}</Text>} keyExtractor={(item, index) => index.toString()} ListHeaderComponent={<Text style={{ fontWeight: 'bold' }}>Yapılacaklar</Text>} ListFooterComponent={<Text>Daha fazla yok</Text>} /> döndür.
Başlangıç kodu
import React from 'react';
import { FlatList, Text } from 'react-native';
export default function TaskList() {
const tasks = ['Ekmek al', 'Süt iç'];
// FlatList ekle
return null;
}Örnek çözüm
import React from 'react';
import { FlatList, Text } from 'react-native';
export default function TaskList() {
const tasks = ['Ekmek al', 'Süt iç'];
return (
<FlatList
data={tasks}
renderItem={({ item }) => <Text>{item}</Text>}
keyExtractor={(item, index) => index.toString()}
ListHeaderComponent={<Text style={{ fontWeight: 'bold' }}>Yapılacaklar</Text>}
ListFooterComponent={<Text>Daha fazla yok</Text>}
/>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Üst bileşen prop'unu yaz
<FlatList data={tasks} renderItem={renderItem} ____={<Text>Başlık</Text>} /><FlatList data={tasks} renderItem={renderItem} ListHeaderComponent={<Text>Başlık</Text>} />Açıklama: ListHeaderComponent listenin başına bileşen koyar.
2 Prop'u konumuna eşle
| Kavram | Anlamı |
|---|---|
ListHeaderComponent |
Listenin başı |
ListFooterComponent |
Listenin sonu |
renderItem |
Her öğe |
keyExtractor |
Benzersiz anahtar |
3 ListFooterComponent nereye bileşen koyar?
<FlatList
data={tasks}
renderItem={...}
ListFooterComponent={<Text>Son</Text>}
/>- Listenin başına
- Listenin dışına
- Her öğenin altına
- Listenin sonuna Doğru cevap
Açıklama: ListFooterComponent listenin sonuna bileşen koyar.