React Native
List header ve footer
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.
Örnek çözümü göster
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>}
/>
);
}
Kendini test et
-
Üst bileşen prop'unu yaz
<FlatList data={tasks} renderItem={renderItem} ____={<Text>Başlık</Text>} />
Cevabı göster
<FlatList data={tasks} renderItem={renderItem} ListHeaderComponent={<Text>Başlık</Text>} />
-
Prop'u konumuna eşle
- ListHeaderComponent
- Listenin başı
- ListFooterComponent
- Listenin sonu
- renderItem
- Her öğe
- keyExtractor
- Benzersiz anahtar
-
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
Cevabı göster
Listenin sonuna — ListFooterComponent listenin sonuna bileşen koyar.
Sıradaki ders: Özet - Listeler
