SectionList

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.

Örnek çözümü göster

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.

Kendini test et

SectionList hangi veri yapısını alır?
```
<SectionList
  ???={[
    { title: 'A', data: [...] }
  ]}
/>
```
- data
- items
- sections
- list
Cevabı göster

sections — sections prop'u bölüm nesneleri dizisini alır.

renderSectionHeader parametresini yaz

renderSectionHeader={({____}) => <Text>{section.title}</Text>}

Cevabı göster

renderSectionHeader={({section}) => <Text>{section.title}</Text>}

SectionList prop'unu işlevine eşle

sections

Bölüm dizisi
renderItem

Her öğeyi çizer
renderSectionHeader

Bölüm başlığını çizer
section.title

Başlık metni

Sıradaki ders: List header ve footer

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler