SectionList
- React Native kursu
- Başlangıç
- Ders 56/116
- 5 dk
SectionList ile gruplu liste öğrenirsin.
SectionList
SectionList gruplara ayrılmış listeleri gösterir. FlatList düz bir dizi alırken, SectionList bölüm (section) nesneleri dizisi alır. Her bölümün title ve data alanları vardır. Adreste şehir şehir, menüde kategori kategori ayırmak için idealdir.
Örnek: sections=[{ title: 'Meyveler', data: ['Elma', 'Armut'] }, { title: 'Sebzeler', data: ['Domates', 'Biber'] }]. renderItem her bir öğeyi çizer; renderSectionHeader her bölümün başlığını çizer. Böylece liste görsel olarak bölümlere ayrılır.
Uygulama Bölümlü liste yaz
Boş bileşeni tamamla. sections dizisi tanımlı: iki bölüm var, her birinin title ve data alanları. <SectionList sections={sections} renderItem={({ item }) => <Text>{item}</Text>} renderSectionHeader={({ section }) => <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>} keyExtractor={(item, index) => index.toString()} /> döndür.
Başlangıç kodu
import React from 'react';
import { SectionList, Text } from 'react-native';
export default function GroupedList() {
const sections = [
{ title: 'Meyveler', data: ['Elma', 'Armut'] },
{ title: 'Sebzeler', data: ['Domates', 'Biber'] }
];
// SectionList ekle
return null;
}Örnek çözüm
import React from 'react';
import { SectionList, Text } from 'react-native';
export default function GroupedList() {
const sections = [
{ title: 'Meyveler', data: ['Elma', 'Armut'] },
{ title: 'Sebzeler', data: ['Domates', 'Biber'] }
];
return (
<SectionList
sections={sections}
renderItem={({ item }) => <Text>{item}</Text>}
renderSectionHeader={({ section }) => <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>}
keyExtractor={(item, index) => index.toString()}
/>
);
}renderSectionHeader
Her bölümün üstünde bir başlık göstermek için renderSectionHeader kullanılır. Bu işlev bir nesne alır; nesnenin section özelliği bölümün kendisidir. section.title başlık metnidir. Başlığı diğer öğelerden ayırmak için kalın font veya farklı arka plan verilebilir.
Örnek: renderSectionHeader={({ section }) => <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>}. Bu kalıp her bölümün üstünde kalın bir başlık gösterir. Mobilde başlıklar yapışkan (sticky) olabilir; bu davranış stickySectionHeadersEnabled prop'u ile açılır.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 SectionList hangi veri yapısını alır?
<SectionList
???={[
{ title: 'A', data: [...] }
]}
/>- data
- items
- sections Doğru cevap
- list
Açıklama: sections prop'u bölüm nesneleri dizisini alır.
2 renderSectionHeader parametresini yaz
renderSectionHeader={({____}) => <Text>{section.title}</Text>}renderSectionHeader={({section}) => <Text>{section.title}</Text>}Açıklama: section parametresi bölümün kendisini taşır.
3 SectionList prop'unu işlevine eşle
| Kavram | Anlamı |
|---|---|
sections |
Bölüm dizisi |
renderItem |
Her öğeyi çizer |
renderSectionHeader |
Bölüm başlığını çizer |
section.title |
Başlık metni |