React Native Academy · Lektion

SectionList med overskrifter

Gruppér elementer i sektioner med SectionList, render en fastgjort sektionsoverskrift for hver gruppe, og tilpas separatoren mellem elementerne.

Lektion 3 af 413 trin

SectionList med overskrifter er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.

Hvornår skal du bruge SectionList

SectionList er React Native-komponenten til visning af grupperede lister — data opdelt i sektioner, som hver har sin egen overskrift. Den er velegnet til kontaktlister sorteret alfabetisk, indstillingsskærme med grupperede valgmuligheder eller kategorier i webshops. Ligesom FlatList virtualiserer den gengivelsen for at opnå bedre ydeevne.

Dataformat for SectionList

SectionList forventer, at dens sections-prop er et array af sektionsobjekter. Hvert sektionsobjekt skal have et data-array med elementerne for den pågældende sektion. Du medtager typisk også en title eller andre metadata til gengivelse af sektionens overskrift.

const SECTIONS = [
  {
    title: 'A',
    data: [
      { id: '1', name: 'Alice' },
      { id: '2', name: 'Andrew' },
    ],
  },
  {
    title: 'B',
    data: [
      { id: '3', name: 'Bob' },
      { id: '4', name: 'Beth' },
    ],
  },
];

Gengivelse af elementer med renderItem

Funktionen renderItem i SectionList modtager et objekt med det aktuelle item, dets index i sektionen og selve section-objektet. Det giver dig adgang til både elementets data og den omgivende sektions metadata i det samme gengivelseskald.

const renderItem = ({ item, section }) => (
  <View style={styles.row}>
    <Text>{item.name}</Text>
    <Text style={styles.sectionLabel}>{section.title}</Text>
  </View>
);

Gengivelse af sektionsoverskrifter

Send en renderSectionHeader-funktion med for at vise en overskrift over hver sektion. Funktionen modtager { section } — det aktuelle sektionsobjekt. Hvis du returnerer en View med en farvet baggrund, skiller overskriften sig ud fra elementerne nedenunder.

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}
/>

Fastgjorte sektionsoverskrifter

Som standard ruller sektionsoverskrifterne med listen. Sæt stickySectionHeadersEnabled til true for at få overskrifterne til at blive fastgjort øverst på skærmen, når du ruller forbi dem — ligesom i iOS-appen Kontakter. Værdien er som standard true på iOS og false på Android.

<SectionList
  sections={SECTIONS}
  renderItem={renderItem}
  renderSectionHeader={renderSectionHeader}
  keyExtractor={(item) => item.id}
  stickySectionHeadersEnabled={true}
/>

Sektionsfod med renderSectionFooter

Brug renderSectionFooter til at gengive indhold efter det sidste element i hver sektion. Det er nyttigt til at vise et link som "Vis alle" eller antallet af resterende elementer under en afkortet gruppe. Funktionen modtager det samme argument, { section }, som renderSectionHeader.

const renderSectionFooter = ({ section }) => (
  <TouchableOpacity>
    <Text style={styles.viewAll}>
      View all {section.data.length} {section.title} contacts
    </Text>
  </TouchableOpacity>
);

Elementseparatorer i SectionList

Ligesom FlatList understøtter SectionList ItemSeparatorComponent til gengivelse af skillelinjer mellem elementer i en sektion. SectionList har også SectionSeparatorComponent til gengivelse af en separator mellem slutningen af én sektion (eller dens fod) og begyndelsen af den næste sektions overskrift.

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}
/>

Et komplet SectionList-eksempel

Her samler du det hele: Definér dine sektionsdata, angiv renderItem og renderSectionHeader, indstil en keyExtractor, og aktivér eventuelt fastgjorte overskrifter. Dette mønster dækker de fleste anvendelser af grupperede lister i produktionsapps.

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
    />
  );
}

Sådan bygger du data til SectionList fra et fladt array

Dit API returnerer ofte et fladt array. Du skal gruppere elementerne efter en fælles egenskab, før du sender dem til SectionList. Brug Array.reduce til at opbygge et map, og konvertér det derefter til sektionsformatet. Sortér sektionerne alfabetisk for at få en forudsigelig rækkefølge.

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],
  }));
}

Rul til en bestemt sektion

Brug en ref på SectionList, og kald scrollToLocation for at springe til et bestemt element eller en sektionsoverskrift. Det er afgørende for alfabetiske indeksbjælker, som sidelinjen i iOS Kontakter, hvor et tryk på et bogstav ruller listen til den pågældende sektion.

const sectionListRef = useRef(null);

const scrollToSection = (sectionIndex) => {
  sectionListRef.current?.scrollToLocation({
    sectionIndex,
    itemIndex: 0,
    animated: true,
  });
};

<SectionList ref={sectionListRef} sections={SECTIONS} ... />

Ydeevnetips til SectionList

De samme regler for ydeevne, som gælder for FlatList, gælder også for SectionList. Gør renderItem og renderSectionHeader stabile med useCallback. Undgå at oprette nye objekter direkte i sections-proppen ved hver gengivelse — memoisér de behandlede sektionsdata med useMemo.

const sections = useMemo(
  () => groupByFirstLetter(contacts),
  [contacts]
);

const renderItem = useCallback(({ item }) => (
  <Row item={item} />
), []);

Hurtigt tjek

Test din forståelse af SectionList med overskrifter fra denne lektion.

Besvar den i den interaktive lektion

Opsummering af lektionen

I denne lektion lærte du, at: SectionLists sections-prop tager et array af objekter, som hver har et data-array, renderSectionHeader gengiver en titel over hver gruppe, og stickySectionHeadersEnabled fastgør overskrifter øverst, mens brugerne ruller. Nu bygger vi en komplet app med en kontaktliste, der kombinerer SectionList, søgning og træk for at opdatere.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 30
Lektioner: 120

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “SectionList med overskrifter” gratis?

Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “SectionList med overskrifter”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “SectionList med overskrifter”?

Gruppér elementer i sektioner med SectionList, render en fastgjort sektionsoverskrift for hver gruppe, og tilpas separatoren mellem elementerne. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Native Academy?

Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “SectionList med overskrifter”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Native Academy-lektion?

Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

FlatList-data, renderItem og keyExtractor
Træk for at opdatere og indlæs mere
SectionList med overskrifter
Opbygning af en app med kontaktliste

← Tilbage til React Native Academy