FlatList

A FlatList a React Native-ben egy kényelmesen görgethető és rugalmasan konfigurálható, dinamikus listát jelent.

A dinamikus szót itt abban az értelemben használom, hogy a FlatList komponensen belül mindig csak annyi tartalom töltődik be, amennyi a képernyőn látszik. Ezzel tehát kiküszöböli a ScrollView-nak a nagyon hosszú listáknál jelentkező performanciális problémáit.

Komponens paraméterek

Maga a FlatList egy komponens, aminek több paramétere is van. A data a megjelenítendő lista. A renderItem az a függvény, aminek segítségével a listaelemek megjelenítésre kerülnek. A keyExtractor jó arra, hogy minden lista elemnek egyedi kulcsa legyen. A kulcs fontos a listák esetében. Erről egy másik bejegyzésben írtam. A contentContainerStyle segítségével pedig stílust tudunk adni a listát tartalmazó konténernek.

Példa:

    <FlatList
      data={[
        { name: 1 },
        { name: 2 },
        { name: 3 },
        { name: 4 },
        { name: 5 },
        { name: 6 },
        { name: 7 },
        { name: 8 },
        { name: 9 },
        { name: 10 },
      ]}
      renderItem={() => (
        <>
          <Spacer position="bottom" size="large">
            <RestaurantInfoCard />
          </Spacer>
        </>
      )}
      keyExtractor={(item) => item.name}
      contentContainerStyle={{ padding: 16 }}
    />

styled – contentContainerStyle

Az inline stílusok nem egy követendő minta, azaz „antipattern”. A styled components lehetővé teszi, hogy hozzáférjünk egy komponens tulajdonságaihoz. Erre jó az attrs:

const RestaurantList = styled(FlatList).<strong>attrs</strong>({
  <strong>contentContainerStyle</strong>: {
    padding: 16,
  }
})``;

export const RestaurantsScreen = () => (
  <SafeArea>
    <SearchContainer>
      <Searchbar />
    </SearchContainer>

    <<strong>RestaurantList</strong>
      data={[
        { name: 1 },
        { name: 2 },
        { name: 3 },
        { name: 4 },
        { name: 5 },
        { name: 6 },
        { name: 7 },
        { name: 8 },
        { name: 9 },
        { name: 10 },
      ]}
      renderItem={() => (
        <>
          <Spacer position="bottom" size="large">
            <RestaurantInfoCard />
          </Spacer>
        </>
      )}
      keyExtractor={(item) => item.name}
    />
  </SafeArea>
);

Először is a FlatList-et átneveztük azért, hogy tudjuk használni a styled-hoz. Aztán az attrs segítségével hozzáférést kaptunk a FlatList komponens contentContainerStyle tulajdonságához. Innentől kezdve ennek is lehet már adni stílust, ahogy a fenti kód is mutatja.

FlatList vagy ScrollView

A ScrollView egy másik megoldás a listákra. Azonban a ScrollView minden lista elemet egyszerre próbál a képernyőre tölteni. Ha a lista nagyon hosszú, akkor lassú lehet a teljes lista megjelenítése.

Ezzel szemben a FlatList, csak annyi elemet tölt be a DOM-ba egyszerre, amennyi a képernyőn megjelenik.

Tehát a FlatList sokkal alkalmasabb az olyan listák megjelenítésére, aminek nagyon-nagyon hosszúak, vagy esetleg előre nem is ismert a darabszáma. Ebből az is következik, hogy akkor is a FlatList-et érdemes használni, amikor az adatokat API-ból vesszük.

Dokumentáció

Hivatalos leírás a FlatListről.