Sådan opbygges en React Native FlatList med evne til at søge i realtid

Hvis du nogensinde har brugt en mobilapp eller bygget en, skal du have stødt på en slags liste - hvad enten det var en lang liste med kontakter, produkter, lande eller andre ting.

De kan virke meget enkle for en slutbruger. Men for udviklere har visning af en lang liste med data altid været et smertepunkt, når det kommer til performante lange lister. Dette gælder især i de apps, der er bygget med React Native.

Baggrund

I løbet af de første dage af React Native havde vi den gode gamle ListView. Det havde mange funktioner, der gjorde det meget attraktivt, og det var et standardvalg til effektiv visning af lodret liste over skiftende data.

Med tiden kom der imidlertid mange problemer og bugs op, og der var et tidspunkt, hvor React Native-teamet indså, at det var på tide at genopfinde hjulet.

Indtast FlatList

I marts 2017 introducerede Facebook FlatListkomponenten, som er en lettere og mere performant måde at implementere enkle, performante lister på. Ikke kun det - dets API er lettere at forstå end originalen ListView. Sådan ser en simpel FlatList ud:

 } />

Bortset fra FlatListkan du også bruge SectionListtil gengivelse af sektionerede lister.

Hvad er det næste

Som jeg nævnte tidligere, blev ListView primært brugt til at vise lange lister med lodrette skiftende data. Men lange lister med data er lige så nyttige som en hammer uden håndtaget. ?

Næsten hele tiden, når du støder på en lang liste med data, får du også mulighed for at søge gennem disse data, så du ikke går vild med søgningen.

Reager Native Searchable FlatList

Jeg besluttede at bygge noget for at løse dette problem. Du kan finde den komplette projektudgave her.

Hvis du ikke er fortrolig med FlatList, vil jeg anbefale at gennemgå det grundlæggende i FlatList først. Denne artikel en af ​​Spencer Carli er den bedste for begyndere, der er nye i React Native.

Og nu, uden yderligere ado, lad os komme i gang og gøre vores søgbare FlatList!

Lad os først indstille nogle indledende tilstande, som vi skal bruge senere i projektet:

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

Vi har også brug for en matrixvariabel:

this.arrayholder = [];

En tom liste er tilsyneladende ikke sjovt. Så lad krydre det med en tilfældig liste over brugere.

Vi går til bruger randomuser.me, som er en gratis open source API til generering af tilfældige brugerdata. Det er som Lorem Ipsum, men for mennesker.

Lad os oprette en funktion, der går og henter nogle brugerdata til os.

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

I ovenstående kodestykke bruger vi fetchAPI'en til at stille en ekstern API-anmodning. Når anmodningen er færdig, modtager vi de brugerdata, der gemmes i datatilstand og også til vores arrayholder.

Nu, for at brugeren skal søge på listen, skal vi tilføje en søgefelt øverst på FlatList. FlatListhar en prop til at tilføje enhver brugerdefineret komponent til dens heade, r hvilket er nyttigt, da vi tilføjer en søgekomponent der.

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

I ovenstående funktion bruger vi react-native-elementsSearchBarkomponent som out header-komponent.

Som standard er der ingen logik, der filtrerer listen, når vi skriver inde i SearchBar. Til det bliver vi nødt til at skrive en funktion, der filtrerer resultaterne som teksten inde i SearchBarændringerne.

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

Ovenstående funktion kører filterfunktionen på arrayholder. Vi filtrerer brugere baseret på deres navn, så vi gemmer navnet inde i itemDatavariablen og konverterer det til store bogstaver.

Denne funktion modtager den tekst, som brugeren skriver som en parameter, som vi gemmer i en anden variabel textData efter konvertering til store bogstaver.

Derefter bruger vi den indexOftil at sammenligne både teksten og returnere sand, hvis teksten findes inde i itemData. Hvis en sandhed returneres, filtervil de andre data ignorere dem. Så nye data returneres når som helst, brugeren skriver enhver tekst i søgefeltet. Disse nye data indstilles derefter til datatilstanden, som til sidst vil blive brugt som en datakilde til FlatList.

Nu er det tid til at gengive FlatList.

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

Det er alt, hvad vi skal gøre. Hurra !!

Afslutning af tanker

Jeg har sprunget over en kode, der ikke er så vigtig for denne vejledning og for kortfattethed. Du kan finde den fulde arbejdende repo på GitHub.

Jeg tror også, at der kan være andre måder at opnå det samme på, så hvis du finder en anden måde, er du velkommen til at dele den.

Du kan også følge mig på Twitter og GitHub. Og tjek mine tidligere artikler i Medium.

Andre nyttige artikler:

  • Reager indfødt placeringssporing
  • Reager indfødte diagrammer med dynamiske værktøjstip
  • Reager indfødte diagrammer med dynamiske værktøjstip