de Vikrant Negi

Cum să construiți un React Native FlatList cu capacitate de căutare în timp real

Cum sa construiti un React Native FlatList cu capacitate de
Reacționează lista plată de căutare nativă

Dacă ați folosit vreodată o aplicație mobilă sau ați creat una, atunci trebuie să fi întâlnit un fel de listă – indiferent dacă a fost o listă lungă de contacte, produse, țări sau alte lucruri.

Acestea pot părea foarte simple pentru utilizatorul final. Dar pentru dezvoltatori, afișarea unei liste lungi de date a fost întotdeauna un punct dificil atunci când vine vorba de liste lungi performante. Acest lucru este valabil mai ales în aplicațiile care sunt construite cu React Native.

fundal

În primele zile ale React Native, am avut vechiul bun ListView. Avea multe caracteristici care îl făceau foarte atractiv și era o alegere implicită pentru afișarea eficientă a listei verticale a datelor în schimbare.

Cu timpul, totuși, au apărut multe probleme și erori și a existat un moment în care echipa React Native a realizat că este timpul să reinventeze roata.

Introduceți FlatList

În martie 2017, Facebook a introdus FlatList componentă, care este un mod mai ușor și mai performant de a implementa liste simple, performante. Nu numai asta – API-ul său este mai ușor de înțeles decât originalulListView. Iată cum arată o listă simplă FlatList:

<FlatList   data={[{title: ‘Title Text’, key: ‘item1’}, …]}   renderItem={({item}) => <ListItem title={item.title} />} />

Inafara de FlatList, puteți utiliza și SectionList pentru redarea listelor secționate.

Ce urmeaza

După cum am menționat mai devreme, ListView a fost utilizat în principal pentru afișarea listelor lungi de date verticale în schimbare. Dar listele lungi de date sunt la fel de utile ca un ciocan fără mâner. ?

Aproape tot timpul, ori de câte ori întâlniți o listă lungă de date, vi se oferă și posibilitatea de a căuta în aceste date, astfel încât să nu vă pierdeți căutarea.

Cum sa construiti un React Native FlatList cu capacitate de
Lista țărilor Whatsapp cu căutare

Reactionați pe lista nativă care poate fi căutată

Am decis să construiesc ceva pentru a rezolva această problemă. Puteți găsi repo completul proiectului Aici.

Dacă nu sunteți familiarizați cu FlatList, aș recomanda să parcurgeți mai întâi elementele de bază ale FlatList. Acest articol unul de Spencer Carli este cel mai bun pentru începătorii care încep cu React Native.

Și acum, fără alte întrebări, să începem și să facem lista noastră de căutare!

Mai întâi, să setăm câteva stări inițiale pe care le vom folosi mai târziu în proiect:

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

De asemenea, vom avea nevoie de o variabilă matrice:

this.arrayholder = [];

Se pare că o listă goală nu este distractivă. Deci, lăsați-l să vă condimenteze cu o listă aleatorie de utilizatori.

Mergem la utilizator randomuser.me care este gratuit, sursa deschisa API pentru generarea datelor aleatorii ale utilizatorilor. Este ca Lorem Ipsum, dar pentru oameni.

Să creăm o funcție care merge și preia niște date de utilizator pentru noi.

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

În fragmentul de cod de mai sus, folosim fetch API pentru a efectua o cerere API la distanță. Când solicitarea este finalizată, vom primi datele utilizatorului care sunt salvate în data statului și, de asemenea, pentru a noastră arrayholder.

Acum, pentru ca utilizatorul să caute în listă, trebuie să adăugăm o bară de căutare în partea de sus a FlatList. FlatList are un element propice pentru a adăuga orice componentă personalizată la capul său, ceea ce este util deoarece vom adăuga o componentă de căutare acolo.

renderHeader = () => {    
  return (      
    <SearchBar        
      placeholder="Type Here..."        
      lightTheme        
      round        
      onChangeText={text => this.searchFilterFunction(text)}
      autoCorrect={false}             
    />    
  );  
};

În funcția de mai sus pe care o folosim react-native-elements SearchBar componentă ca componentă antet.

În mod implicit, nu există nicio logică care să filtreze lista pe măsură ce tastăm în SearchBar. Pentru aceasta va trebui să scriem o funcție care va filtra rezultatele ca text în interiorul SearchBar schimbări.

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

Funcția de mai sus va rula funcția de filtrare pe arrayholder. Vom filtra utilizatorii în funcție de numele lor, așa că vom stoca numele în itemData variabilă și convertiți-l în majuscule.

Această funcție va primi textul pe care utilizatorul îl tastează ca parametru, pe care îl vom stoca într-o altă variabilă textData după ce îl transformăm în majuscule.

După aceea, vom folosi indexOf pentru a compara textul și a reveni la adevărat dacă textul se găsește în interiorul itemData. Dacă se returnează un adevărat, atunci filter va păstra acele date în mod înțelept, le va ignora. Deci, datele noi sunt returnate oricând utilizatorul tastează orice text în bara de căutare. Aceste date noi sunt apoi setate la data , care va fi în cele din urmă utilizat ca sursă de date pentru FlatList.

Acum este timpul să redați FlatList.

<List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
  <FlatList          
    data={this.state.data}          
    renderItem={({ item }) => ( 
      <ListItem              
        roundAvatar              
        title={`${item.name.first} ${item.name.last}`}  
        subtitle={item.email}                           
        avatar={{ uri: item.picture.thumbnail }}   
        containerStyle={{ borderBottomWidth: 0 }} 
       />          
     )}          
     keyExtractor={item => item.email}  
     ItemSeparatorComponent={this.renderSeparator} 
     ListHeaderComponent={this.renderHeader}                             
  />            
</List>

Asta este tot ce trebuie să facem. Ura!!

1612196406 577 Cum sa construiti un React Native FlatList cu capacitate de
Reacționați FlatList nativ care poate fi căutat

Gânduri de închidere

Am omis un cod care nu este atât de important pentru acest tutorial și din motive de scurtă durată. Puteți găsi funcționarea completă repo pe GitHub.

De asemenea, cred că pot exista și alte modalități de a realiza același lucru – așa că dacă găsiți o altă cale, atunci vă rugăm să nu ezitați să o împărtășiți.

Poți să mă urmărești și mai departe Stare de nervozitate și GitHub. Și consultați articolele mele anterioare în Mediu.

Alte articole utile: