Ako zostaviť React Native FlatList s možnosťou vyhľadávania v reálnom čase

Ak ste niekedy používali alebo vytvorili mobilnú aplikáciu, určite ste sa stretli s nejakým zoznamom - či už išlo o dlhý zoznam kontaktov, produktov, krajín alebo iných vecí.

Koncovému užívateľovi sa môžu zdať veľmi jednoduché. Ale pre vývojárov bolo zobrazenie dlhého zoznamu údajov vždy veľkým problémom, pokiaľ ide o dlhé zoznamy výkonných umelcov. Platí to najmä pre aplikácie, ktoré sú zostavené s React Native.

Pozadie

Počas prvých dní React Native sme mali staré dobré ListView. Mal veľa funkcií, vďaka ktorým bol veľmi atraktívny, a bol predvolenou voľbou na efektívne zobrazovanie vertikálneho zoznamu meniacich sa údajov.

Postupom času sa však objavilo veľa problémov a chýb a nastal bod, keď si tím React Native uvedomil, že je čas znovu objaviť koleso.

Zadajte FlatList

V marci 2017 Facebook predstavil FlatListkomponent, ktorý predstavuje ľahší a výkonnejší spôsob implementácie jednoduchých, výkonných zoznamov. A nielen to - jeho API je ľahšie pochopiteľné ako pôvodné ListView. Takto vyzerá jednoduchý FlatList:

 } />

Okrem FlatListtoho môžete tiež použiť SectionListna vykreslenie rozdelených zoznamov.

Čo bude ďalej

Ako som už spomínal, ListView sa používal predovšetkým na zobrazovanie dlhých zoznamov vertikálne sa meniacich údajov. Ale dlhé zoznamy údajov sú rovnako užitočné ako kladivo bez rukoväte. ?

Takmer vždy, kedykoľvek sa stretnete s dlhým zoznamom údajov, zobrazí sa vám tiež možnosť vyhľadávať tieto údaje, aby ste sa pri hľadaní nestratili.

Reagujte natívnym prehľadávateľným FlatListom

Rozhodol som sa niečo postaviť, aby som tento problém vyriešil. Kompletné repo projektu nájdete tu.

Pokiaľ nie ste oboznámení s FlatListom, odporučil by som najskôr si prejsť základy FlatList. Tento článok od Spencera Carliho je najlepší pre začiatočníkov, ktorí sú v React Native noví.

A teraz, bez ďalších okolkov, začnime a urobme náš prehľadateľný FlatList!

Najskôr nastavíme niekoľko počiatočných stavov, ktoré použijeme neskôr v projekte:

this.state = { loading: false, data: [], error: null, };

Budeme tiež potrebovať premennú poľa:

this.arrayholder = [];

Prázdny zoznam zjavne nie je žiadna sranda. Poďme si to teda okoreniť náhodným zoznamom používateľov.

Ideme na user randomuser.me, čo je bezplatné, open-source API na generovanie náhodných užívateľských dát. Je to ako Lorem Ipsum, ale pre ľudí.

Vytvorme funkciu, ktorá pre nás načíta niektoré používateľské údaje.

makeRemoteRequest = () => { const url = `//randomuser.me/api/?&results=20`; this.setState({ loading: true }); fetch(url) .then(res => res.json()) .then(res => { this.setState( null, loading: false, ); this.arrayholder = res.results; }) .catch(error => { this.setState({ error, loading: false }); }); };

Vo vyššie uvedenom útržku kódu používame fetchrozhranie API na odoslanie žiadosti o vzdialené rozhranie API. Po dokončení žiadosti dostaneme používateľské údaje, ktoré sa uložia do datastavu a tiež do našich arrayholder.

Teraz, aby používateľ mohol prehľadávať zoznam, musíme pridať vyhľadávací panel v hornej časti okna FlatList. FlatListmá rekvizitu na pridanie ľubovoľného vlastného komponentu do svojej schránky, čo je užitočné, pretože tam pridáme vyhľadávací komponent.

renderHeader = () => { return (  this.searchFilterFunction(text)} autoCorrect={false} /> ); };

Vo vyššie uvedenej funkcii používame react-native-elementsSearchBarkomponent ako výstupný komponent hlavičky.

V predvolenom nastavení neexistuje logika, ktorá bude filtrovať zoznam, keď píšeme do SearchBar. Na to budeme musieť napísať funkciu, ktorá vyfiltruje výsledky ako text vo vnútri SearchBarzmien.

searchFilterFunction = text => { const newData = this.arrayholder.filter(item => { const itemData = `${item.name.title.toUpperCase()} ${item.name.first.toUpperCase()} ${item.name.last.toUpperCase()}`; const textData = text.toUpperCase(); return itemData.indexOf(textData) > -1; }); this.setState({ data: newData }); };

Vyššie uvedená funkcia spustí funkciu filtra na arrayholder. Budeme filtrovať používateľov podľa ich mena, takže meno uložíme do itemDatapremennej a prevedieme ho na veľké písmená.

Táto funkcia dostane text, ktorý užívateľ napíše ako parameter, ktorý po prevode na veľké písmená uložíme do inej premennej textData.

Potom použijeme indexOfna porovnanie text a vrátenie hodnoty true, ak sa text nachádza vo vnútri itemData. Ak sa vráti pravda, filterpotom tieto údaje ponechá, inak ich bude ignorovať. Nové údaje sa teda vrátia kedykoľvek, keď používateľ do vyhľadávacieho panela napíše akýkoľvek text. Tieto nové údaje sa potom nastavia do datastavu, ktorý sa nakoniec použije ako zdroj údajov pre server FlatList.

Teraz je čas vykresliť FlatList.

  (  )} keyExtractor={item => item.email} ItemSeparatorComponent={this.renderSeparator} ListHeaderComponent={this.renderHeader} />

To je všetko, čo musíme urobiť. Hurá !!

Záverečné myšlienky

Preskočil som nejaký kód, ktorý nie je pre tento tutoriál až tak dôležitý, kvôli stručnosti. Plné pracovné repo nájdete na GitHub.

Tiež si myslím, že môžu existovať aj iné spôsoby, ako dosiahnuť to isté - takže ak nájdete iný spôsob, neváhajte ho zdieľať.

Môžete ma tiež sledovať na Twitteri a GitHube. A pozrite si moje predchádzajúce články v sekcii Stredné.

Ďalšie užitočné články:

  • Reagovať natívnym sledovaním polohy
  • Reagujte na natívne grafy s dynamickými popismi nástrojov
  • Reagujte na natívne grafy s dynamickými popismi nástrojov