React Native Academy · Oppitunti

SectionList otsikoineen

Ryhmitelkää kohteet osioihin SectionListillä, renderöikää kullekin ryhmälle paikallaan pysyvä osio-otsikko ja mukauttakaa kohteiden välistä erotinta.

Oppitunti 3/413 vaihetta

SectionList otsikoineen on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Milloin SectionList-komponenttia käytetään

SectionList on React Nativen komponentti ryhmiteltyjen luetteloiden näyttämiseen — data jaetaan osioihin, joilla kullakin on oma otsikkonsa. Se sopii erinomaisesti aakkosjärjestykseen lajiteltuihin yhteystietoluetteloihin, ryhmiteltyjä asetuksia sisältäviin näkymiin ja verkkokaupan kategorioihin. FlatList-komponentin tavoin se virtualisoi renderöinnin suorituskyvyn parantamiseksi.

SectionList-datan muoto

SectionList odottaa sections-propsin olevan taulukko osio-olioita. Jokaisella osio-oliolla on oltava data-taulukko, joka sisältää kyseisen osion kohteet. Yleensä mukaan lisätään myös title tai muita metatietoja osion otsikon renderöintiä varten.

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

Kohteiden renderöinti renderItem-funktiolla

SectionList-komponentin renderItem-funktio vastaanottaa olion, joka sisältää nykyisen item-kohteen, sen index-indeksin osion sisällä sekä itse section-olion. Näin pääsette käsiksi sekä kohteen dataan että sitä ympäröivän osion metatietoihin samassa renderöintikutsussa.

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

Osioiden otsikoiden renderöinti

Välittäkää renderSectionHeader-funktio, jotta jokaisen osion yläpuolelle voidaan näyttää otsikko. Funktio vastaanottaa arvon { section } — nykyisen osio-olion. Kun palautatte värillisellä taustalla varustetun View-komponentin, otsikko erottuu sen alapuolella olevista kohteista.

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

Kiinnittyvät osioiden otsikot

Oletusarvoisesti osioiden otsikot vierivät luettelon mukana. Asettakaa stickySectionHeadersEnabled arvoon true, jotta otsikot kiinnittyvät näytön yläreunaan, kun vieritätte niiden ohi — samalla tavalla kuin iOS:n Contacts-apissa. iOS:ssä tämän oletusarvo on true ja Androidissa false.

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

Osion alatunniste renderSectionFooter-funktiolla

Käyttäkää renderSectionFooter-funktiota sisällön renderöintiin jokaisen osion viimeisen kohteen jälkeen. Tämä on hyödyllistä esimerkiksi näytettäessä Näytä kaikki -linkki tai jäljellä olevien kohteiden määrä rajatun ryhmän alapuolella. Funktio vastaanottaa saman { section }-argumentin kuin renderSectionHeader.

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

Kohteiden erottimet SectionList-komponentissa

FlatList-komponentin tavoin SectionList tukee ItemSeparatorComponent-komponenttia osion kohteiden välisten erottimien renderöintiin. SectionList tarjoaa myös SectionSeparatorComponent-komponentin erottimen renderöintiin yhden osion lopun (tai sen alatunnisteen) ja seuraavan osion otsikon alun väliin.

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

SectionList-esimerkki kokonaisuudessaan

Kootaan kaikki yhteen: määritelkää osioiden data, välittäkää renderItem ja renderSectionHeader, asettakaa keyExtractor ja ottakaa kiinnittyvät otsikot halutessanne käyttöön. Tämä rakenne kattaa suurimman osan tuotantosovellusten ryhmiteltyjen luetteloiden käyttötapauksista.

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

SectionList-datan muodostaminen litteästä taulukosta

Usein rajapinta palauttaa litteän taulukon. Kohteet on ryhmiteltävä yhteisen ominaisuuden perusteella ennen niiden välittämistä SectionList-komponentille. Muodostakaa kartta Array.reduce-menetelmällä ja muuntakaa se sitten sections-muotoon. Lajitelkaa osiot aakkosjärjestykseen ennakoitavan järjestyksen varmistamiseksi.

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

Tiettyyn osioon vierittäminen

Käyttäkää SectionList-komponentissa ref-viitettä ja kutsukaa scrollToLocation-metodia siirtyäksenne tiettyyn kohteeseen tai osion otsikkoon. Tämä on välttämätöntä aakkosellisissa indeksipalkeissa, kuten iOS:n Contacts-apin sivupalkissa, jossa kirjaimen napauttaminen vierittää luettelon kyseiseen osioon.

const sectionListRef = useRef(null);

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

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

SectionList-komponentin suorituskykyvinkit

SectionList-komponenttiin pätevät samat suorituskykysäännöt kuin FlatList-komponenttiin. Vakauttakaa renderItem ja renderSectionHeader useCallback-hookin avulla. Välttäkää uusien olioiden luomista suoraan sections-propsissa jokaisella renderöintikerralla — memoisoikaa käsiteltyjen osioiden data useMemo-hookilla.

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

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

Pikatarkistus

Testatkaa tässä oppitunnissa oppimanne SectionList-komponentti ja otsikot.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin yhteenveto

Tässä oppitunnissa opitte seuraavat asiat: SectionListin sections-prop vastaanottaa taulukon olioita, joista jokaisella on data-taulukko, renderSectionHeader renderöi otsikon jokaisen ryhmän yläpuolelle ja stickySectionHeadersEnabled kiinnittää otsikot yläreunaan käyttäjän vierittäessä. Seuraavaksi rakennamme täydellisen Contacts List App -sovelluksen, jossa yhdistyvät SectionList, haku ja vetämällä päivitys.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 30
Oppitunnit: 120

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”SectionList otsikoineen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “SectionList otsikoineen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”SectionList otsikoineen”?

Ryhmitelkää kohteet osioihin SectionListillä, renderöikää kullekin ryhmälle paikallaan pysyvä osio-otsikko ja mukauttakaa kohteiden välistä erotinta. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”SectionList otsikoineen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?

Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: React Native Academy