Jak používat komponentu FlatList - Základní informace o reakci

Existuje několik způsobů, jak vytvořit rolovací seznam v React Native, zejména jde o ScrollView a ListView. Každý z nich má své silné a slabé stránky. Od verze 0.43 produktu React Native jsme měli přístup ke dvěma novým pohledům na seznam, FlatList a SectionList. Dnes se podíváme na to, jak používat komponentu FlatList.

Co je to?

Co je komponenta FlatList? Je to snadný způsob, jak vytvořit efektivní rolovací seznam dat. Nejen, že je efektivní, ale také má neuvěřitelně jednoduché API, se kterým lze pracovat. Pokud jste komponentu ListView už používali nebo jste s ní obeznámeni, je velmi podobná, v každém případě je lepší (téměř) lépe. Už nemusíte data formátovat - stačí jim předat řadu dat a ihned se dostat k vykreslení.

Preferujete video? Podívejte se na tento tutoriál na YouTube a přihlaste se k odběru, když jste tam!

Základní použití

V FlatListu musíte vědět o dvou primárních rekvizitách a to jsou data a renderItem. Prvním je pole dat použitých k vytvoření seznamu, obvykle pole objektů, a druhým je funkce, která vezme jednotlivý prvek datového pole a vykreslí pro něj komponentu.

Data pocházejí z rozhraní Random User Generator API a pro rozhraní budou použity React Native Elements.

Celý zdrojový kód je k dispozici na GitHubu.

Na hlavní stránce tohoto tutoriálu aplikace odešle žádost rozhraní API generátoru náhodných uživatelů a uloží odpověď z odpovědi ve stavu součásti. Prohlédněte si níže uvedený kód a seznamte se s ním.

Soubory index.ios.js a index.android.js umístíte také odkazem na vytvořený soubor FlatListDemo.js.

Po dokončení můžete pokračovat a skutečně začít vykreslovat data. Chcete-li tak učinit, musíte nejprve importovat {List, ListItem} z "reag-native-elements"; takže máte potřebné komponenty pro vykreslení dat. Zbytek práce bude probíhat metodou renderování. První lešení:

Nyní musíte předat pole dat do FlatListu přes datovou prop. To je k dispozici na this.state.data.

Pak chcete vykreslit obsah pomocí renderItem prop. Funkce je předána jediný argument, kterým je objekt. Data, která vás zajímají, jsou v klíči položky, takže k jejich zpřístupnění z funkce můžete použít destruktivní. Pak vraťte komponentu pomocí těchto dat.

Nyní se spuštěnou aplikací a po čekání asi na sekundu na odpověď ze serveru byste měli vidět něco podobného (přesná data se mohou mírně lišit).

Všimněte si této chyby na dně? To je varování, že v prvcích seznamu chybí klíče. Tyto jedinečné klíče umožňují VirtualizedList (což je to, na čem je FlatList postaven) sledovat položky a pomůcky v efektivitě seznamu. Nebudu se do toho ponořit, ale jen vím, že je to důležité.

Chcete-li tento problém zmírnit, musíte zvolit část dat, která je pro každou položku jedinečná. V tomto případě můžete použít e-mailovou adresu uživatele, protože to bude pro každou položku jedinečné. Poté můžete použít klíč keyExtractor prop k určení, která část dat by měla být použita jako klíč.

Nyní se varování již nezobrazuje.

Žádné další chyby!

Oddělovač

Řekněme, že ve vaší aplikaci již nemáte oddělovače a chcete, ale nechcete je vykreslit v horní nebo dolní části seznamu. Dalo by se přidat borderBottom na každý prvek kromě posledního ... nebo můžete použít podpěru ItemSeparatorComponent, která se postará o veškerou logiku za vás.

V tomto příkladu musíte nejprve odstranit všechny okraje aplikace.

Potom budete chtít vytvořit oddělovací komponentu. Je to velmi jednoduché, ale místo toho, aby se jednalo o celou šířku obrazovky, začne (přibližně) tam, kde se text nachází.

a pak můžete pokračovat a použít to jednoduše přidáním ItemSeparatorComponent = {this.renderSeparator} do komponenty FlatList.

Nechávám tě s něčím takovým. Všimněte si, že v horní a dolní části seznamu není oddělovač vykreslen.

Záhlaví

Vykreslení komponenty v horní části seznamu, která se posouvá směrem dolů s obsahem při procházení seznamem, je stejně snadné jako přidání oddělovače. Chcete-li toho skutečně dosáhnout, použijete komponentu SearchBar z React Native Elements.

Nejprve vytvořte novou funkci, která vykreslí požadovanou komponentu v záhlaví.

Potom budete chtít tuto hlavičku skutečně vykreslit pomocí podpory ListHeaderComponent na FlatListu.

Ponechává vám následující ...

Zápatí

Zápatí je velmi stejné jako záhlaví, pouze to, že je na konci seznamu, nikoli na začátku. Toto zápatí bude o něco složitější než předchozí příklad (nastavení pro nekonečný posun), ale platí stejné zásady. Nejprve vytvořte metodu pro vyvolání zápatí a vrácení komponenty.

Potom tuto funkci vyvolejte z ListFooterComponent.

Díky tomu máte něco podobného (trošku jsem upravil kód, abych viděl ActivityIndicator).

Přetáhněte k aktualizaci

Nekonečný svitek

Doufám, že se vám tento tutoriál líbil! Pokud máte zájem o sestavení první aplikace React Native nebo o upevnění základních znalostí, podívejte se na můj bezplatný kurz React Native!