SectionList met headers
Groepeer items in secties met SectionList, geef voor elke groep een sticky sectieheader weer en pas de scheiding tussen items aan.
SectionList met headers is een gratis React Native Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.
Wanneer gebruik je SectionList
SectionList is de React Native-component voor het weergeven van gegroepeerde lijsten: gegevens die in secties zijn verdeeld, elk met een eigen koptekst. De component is ideaal voor alfabetisch gesorteerde contactenlijsten, instellingenschermen met gegroepeerde opties of e-commercecategorieën. Net als FlatList gebruikt de component virtualisatie voor betere prestaties.
Gegevensindeling voor SectionList
SectionList verwacht dat de prop sections een array met sectieobjecten is. Elk sectieobject moet een data-array bevatten met de items voor die sectie. Meestal voeg je ook een title of andere metagegevens toe om de koptekst van de sectie weer te geven.
const SECTIONS = [
{
title: 'A',
data: [
{ id: '1', name: 'Alice' },
{ id: '2', name: 'Andrew' },
],
},
{
title: 'B',
data: [
{ id: '3', name: 'Bob' },
{ id: '4', name: 'Beth' },
],
},
];Items weergeven met renderItem
De functie renderItem in SectionList ontvangt een object met het huidige item, de index daarvan binnen de sectie en het section-object zelf. Zo heb je in dezelfde render-aanroep toegang tot zowel de itemgegevens als de metagegevens van de omringende sectie.
const renderItem = ({ item, section }) => (
<View style={styles.row}>
<Text>{item.name}</Text>
<Text style={styles.sectionLabel}>{section.title}</Text>
</View>
);Kopteksten van secties weergeven
Geef een functie renderSectionHeader door om boven elke sectie een koptekst weer te geven. De functie ontvangt { section } — het huidige sectieobject. Als je een View met een gekleurde achtergrond teruggeeft, valt de koptekst op tussen de items eronder.
const renderSectionHeader = ({ section }) => (
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>{section.title}</Text>
</View>
);
<SectionList
sections={SECTIONS}
renderItem={renderItem}
renderSectionHeader={renderSectionHeader}
keyExtractor={(item) => item.id}
/>Vastgezette kopteksten van secties
Standaard scrollen kopteksten van secties mee met de lijst. Stel stickySectionHeadersEnabled in op true om kopteksten boven aan het scherm vast te zetten wanneer je erlangs scrollt — hetzelfde gedrag als in de app Contacten van iOS. Op iOS staat dit standaard op true en op Android op false.
<SectionList
sections={SECTIONS}
renderItem={renderItem}
renderSectionHeader={renderSectionHeader}
keyExtractor={(item) => item.id}
stickySectionHeadersEnabled={true}
/>Voettekst van een sectie met renderSectionFooter
Gebruik renderSectionFooter om inhoud na het laatste item in elke sectie weer te geven. Dit is handig om een link 'Alles bekijken' of het aantal resterende items onder een ingekorte groep te tonen. De functie ontvangt hetzelfde argument { section } als renderSectionHeader.
const renderSectionFooter = ({ section }) => (
<TouchableOpacity>
<Text style={styles.viewAll}>
View all {section.data.length} {section.title} contacts
</Text>
</TouchableOpacity>
);Scheidingslijnen voor items in SectionList
Net als FlatList ondersteunt SectionList ItemSeparatorComponent om scheidingslijnen tussen items binnen een sectie weer te geven. SectionList biedt ook SectionSeparatorComponent om een scheidingslijn weer te geven tussen het einde van de ene sectie (of de voettekst ervan) en het begin van de koptekst van de volgende sectie.
const ItemSeparator = () => <View style={styles.separator} />;
const SectionSeparator = () => <View style={styles.sectionSeparator} />;
<SectionList
sections={SECTIONS}
renderItem={renderItem}
renderSectionHeader={renderSectionHeader}
keyExtractor={(item) => item.id}
ItemSeparatorComponent={ItemSeparator}
SectionSeparatorComponent={SectionSeparator}
/>Een volledig SectionList-voorbeeld
Alles samenvoegen: definieer de gegevens van je secties, geef renderItem en renderSectionHeader op, stel een keyExtractor in en schakel eventueel vastgezette kopteksten in. Dit patroon dekt het merendeel van de toepassingen voor gegroepeerde lijsten in productie-apps.
import { SectionList, View, Text, StyleSheet } from 'react-native';
export default function ContactsScreen() {
return (
<SectionList
sections={SECTIONS}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View style={styles.row}><Text>{item.name}</Text></View>
)}
renderSectionHeader={({ section }) => (
<View style={styles.header}><Text style={styles.headerText}>{section.title}</Text></View>
)}
stickySectionHeadersEnabled
/>
);
}Gegevens voor SectionList opbouwen vanuit een platte array
Vaak retourneert je API een platte array. Je moet items op basis van een gemeenschappelijke eigenschap groeperen voordat je ze aan SectionList doorgeeft. Gebruik Array.reduce om een map op te bouwen en zet die daarna om naar de indeling voor secties. Sorteer de secties alfabetisch voor een voorspelbare volgorde.
function groupByFirstLetter(contacts) {
const map = contacts.reduce((acc, contact) => {
const letter = contact.name[0].toUpperCase();
if (!acc[letter]) acc[letter] = [];
acc[letter].push(contact);
return acc;
}, {});
return Object.keys(map).sort().map((key) => ({
title: key,
data: map[key],
}));
}Naar een specifieke sectie scrollen
Gebruik een ref op SectionList en roep scrollToLocation aan om naar een specifiek item of een specifieke koptekst van een sectie te springen. Dit is essentieel voor alfabetische indexbalken, zoals de zijbalk in Contacten van iOS, waarbij het aantikken van een letter de lijst naar die sectie laat scrollen.
const sectionListRef = useRef(null);
const scrollToSection = (sectionIndex) => {
sectionListRef.current?.scrollToLocation({
sectionIndex,
itemIndex: 0,
animated: true,
});
};
<SectionList ref={sectionListRef} sections={SECTIONS} ... />Prestatietips voor SectionList
Dezelfde prestat regels die voor FlatList gelden, gelden ook voor SectionList. Maak renderItem en renderSectionHeader stabiel met useCallback. Maak niet bij elke render nieuwe objecten inline in de prop sections; onthoud de verwerkte sectiegegevens met useMemo.
const sections = useMemo(
() => groupByFirstLetter(contacts),
[contacts]
);
const renderItem = useCallback(({ item }) => (
<Row item={item} />
), []);Korte controle
Test je begrip van SectionList met kopteksten uit deze les.
Samenvatting van de les
In deze les heb je geleerd: de prop sections van SectionList ontvangt een array met objecten die elk een data-array hebben, renderSectionHeader geeft een titel boven elke groep weer en stickySectionHeadersEnabled zet kopteksten boven aan het scherm vast terwijl gebruikers scrollen. Hierna bouwen we een complete app met een contactenlijst waarin SectionList, zoeken en pull-to-refresh worden gecombineerd.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “SectionList met headers” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “SectionList met headers”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.
Wat leer ik in “SectionList met headers”?
Groepeer items in secties met SectionList, geef voor elke groep een sticky sectieheader weer en pas de scheiding tussen items aan. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Native Academy te beginnen?
Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “SectionList met headers”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Native Academy?
Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- FlatList-data, renderItem en keyExtractor
- Pull-to-refresh en meer laden
- SectionList met headers
- Een contactenlijstapp bouwen