Gerçek zamanlı arama yeteneği ile bir React Native FlatList nasıl oluşturulur

Daha önce bir mobil uygulama kullandıysanız veya bir tane oluşturduysanız, o zaman bir tür listeyle karşılaşmış olmalısınız - ister uzun bir iletişim listesi, ürün, ülke veya başka şeyler olsun.

Bir son kullanıcıya çok basit görünebilirler. Ancak geliştiriciler için, uzun bir veri listesi görüntülemek, yüksek performanslı uzun listeler söz konusu olduğunda her zaman bir sorun olmuştur. Bu, özellikle React Native ile oluşturulan uygulamalarda geçerlidir.

Arka fon

React Native'in ilk günlerinde çok güzel şeyler yaşadık ListView. Onu çok çekici kılan birçok özelliği vardı ve değişen verilerin dikey listesini verimli bir şekilde görüntülemek için varsayılan bir seçimdi.

Ancak zamanla birçok sorun ve hata ortaya çıktı ve React Native ekibinin tekerleği yeniden keşfetme zamanının geldiğini anladığı bir nokta oldu.

FlatList'e Girin

Mart 2017'de Facebook FlatList, basit, performanslı listeleri uygulamanın daha kolay ve daha performanslı bir yolu olan bileşeni tanıttı . Sadece bu da değil - API'sinin anlaşılması orijinalinden daha kolaydır ListView. İşte basit bir FlatList nasıl görünür:

 } />

Bunun dışında FlatList, SectionListbölümlere ayrılmış listeleri oluşturmak için de kullanabilirsiniz .

Sıradaki ne

Daha önce bahsettiğim gibi, ListView öncelikle dikey değişen verilerin uzun listelerini görüntülemek için kullanıldı. Ancak uzun veri listeleri, sapsız bir çekiç kadar kullanışlıdır. ?

Neredeyse her zaman, uzun bir veri listesiyle karşılaştığınızda, aynı zamanda bu veriler içinde arama yapma olanağına sahip olursunuz, böylece arama yaparken kaybolmazsınız.

React Native Searchable FlatList

Bu sorunu çözmek için bir şeyler inşa etmeye karar verdim. Tam proje deposunu burada bulabilirsiniz.

FlatList'e aşina değilseniz, önce FlatList'in temellerini incelemenizi tavsiye ederim. Spencer Carli'nin yazdığı bu makale, React Native'de yeni olan yeni başlayanlar için en iyisidir.

Ve şimdi, daha fazla uzatmadan başlayalım ve aranabilir FlatList'imizi yapalım!

İlk olarak, projede daha sonra kullanacağımız bazı başlangıç ​​durumları belirleyelim:

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

Ayrıca bir dizi değişkenine ihtiyacımız olacak:

this.arrayholder = [];

Görünüşe göre boş bir liste hiç eğlenceli değil. Öyleyse rastgele bir kullanıcı listesiyle renklendirelim.

Rastgele kullanıcı verileri oluşturmak için ücretsiz, açık kaynaklı bir API olan randomuser.me kullanıcısına gidiyoruz. Lorem Ipsum gibi ama insanlar için.

Bizim için bazı kullanıcı verilerini alıp getiren bir fonksiyon oluşturalım.

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

Yukarıdaki kod parçacığında, fetchuzak API isteğinde bulunmak için API'yi kullanıyoruz . Talep tamamlandığında, hem eyaletimize datahem de bize kaydedilen kullanıcı verilerini alacağız arrayholder.

Şimdi, kullanıcının listeyi arayabilmesi için, üst kısmına bir arama çubuğu eklememiz gerekiyor FlatList. FlatListbaşlığına herhangi bir özel bileşeni eklemek için bir pervane vardır, r bu, oraya bir arama bileşeni ekleyeceğimiz için yararlıdır.

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

Yukarıdaki işlevde react-native-elementsSearchBarbileşeni başlık bileşeni olarak kullanıyoruz .

Varsayılan olarak, listeyi SearchBar. Bunun için, sonuçları SearchBardeğişikliklerin içindeki metin olarak filtreleyecek bir işlev yazmamız gerekecek .

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

Yukarıdaki işlev, üzerinde filtre işlevini çalıştıracaktır arrayholder. Kullanıcıları adlarına göre filtreleyeceğiz, bu yüzden adı itemDatadeğişkenin içinde saklayıp büyük harfe çevireceğiz.

Bu işlev, kullanıcının parametre olarak yazdığı metni alacak ve onu büyük harfe dönüştürdükten sonra başka bir değişken textData'da saklayacağız.

Bundan sonra, indexOfhem metni karşılaştırmak hem de metin içinde bulunursa true döndürmek için kullanacağız itemData. Eğer bir true döndürülürse, filtero veriyi tutacaksa, başka türlü onu görmezden gelir. Böylece, kullanıcı arama çubuğuna herhangi bir metin yazdığında yeni veriler döndürülür. Bu yeni veriler daha sonra duruma ayarlanır ve datasonunda veri kaynağı olarak kullanılır FlatList.

Şimdi FlatList'i oluşturma zamanı.

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

Tüm yapmamız gereken bu. Yaşasın !!

Kapanış Düşünceler

Bu eğitim için ve kısalık uğruna çok önemli olmayan bazı kodları atladım. Tam çalışma deposunu GitHub'da bulabilirsiniz.

Ayrıca, aynı şeyi başarmanın başka yolları da olabileceğine inanıyorum - bu yüzden başka bir yol bulursanız, lütfen paylaşmaktan çekinmeyin.

Beni Twitter ve GitHub'da da takip edebilirsiniz. Ve Medium'daki önceki makalelerime göz atın.

Diğer Yararlı Makaleler:

  • Yerel Konum İzleme Tepki
  • Yerel grafiklere dinamik araç ipuçları ile tepki verin
  • Yerel grafiklere dinamik araç ipuçları ile tepki verin