React Native'de Özel Sayfalandırma ile Verileri Dinamik Olarak Yükleme

Sayfalandırma, performansı ve kullanılabilirliği artırmak için büyük miktarda veriyi daha küçük, daha yönetilebilir parçalara veya sayfalara bölme sistemini ifade eder. Özel sayfalandırma, düzgün bir şekilde uygulanırsa daha iyi bir kullanıcı deneyimi sağlayabilir. React Native'de verileri dinamik olarak yüklemenize izin veren özel bir sayfalandırma çözümünün nasıl oluşturulacağını öğrenin.

Özel Sayfalandırmayı Anlamak

Özel sayfalandırma ile geliştiriciler, uygulamalarının özel gereksinimlerine uyan bir sayfalandırma mekanizması oluşturabilir. Özel sayfalandırma, sayfalar arasında gezinmek için benzersiz bir kullanıcı arayüzü tasarlamayı, aşağıdakiler için algoritmalar uygulamayı içerebilir: bir veritabanından veya API'den veri çekme, veya sonsuz kaydırma veya geç yükleme gibi özellikleri birleştirme.

Özel Sayfalandırmanın Avantajları

React Native mobil uygulamalarınız için özel bir sayfalandırma sistemi oluşturmak bazı avantajlar sağlayabilir:

• Uygulamanızın ölçeklenebilirliğini geliştirebilir ve daha büyük miktarlardaki verileri daha verimli bir şekilde işlemesine olanak tanır. Bu, özellikle büyük veri kümeleriyle ilgilenen uygulamalar için önemlidir.
• Özel sayfalandırma, verileri daha küçük ve daha yönetilebilir parçalara bölerek uygulamanızın performansını artırabilir. Bu, yükleme süresini azaltacaktır.
• Özel sayfalandırma ile, uygulamanız içinde verileri sunma ve bunlara erişme konusunda daha fazla esnekliğe ve kontrole sahip olacaksınız.

Özel Sayfalandırma ile Dinamik Yükleme Uygulama

React Native uygulamanız yalnızca o sırada yüklemesi gereken gerekli verileri yüklediğinde buna dinamik yükleme denir. Özel sayfalandırma ile dinamik yüklemeyi uygulamak için şu genel adımları uygulayabilirsiniz:

1. Sayfalandırma yöntemini belirleme: İçeriğiniz için en uygun sayfalandırma yöntemine karar verin. Bu geleneksel olabilir sayfa tabanlı Kullanıcıların bir sonraki sayfayı yüklemek için tıkladığı sayfalandırma sistemi veya sonsuz kaydırma kullanıcı sayfayı aşağı kaydırdıkça daha fazla içeriğin yüklendiği sistem.
2. Sunucu tarafı ve istemci tarafı kodu yazın: Belirli veri sayfaları için sayfalandırma isteklerini işlemek ve yalnızca o sayfanın verilerini döndürmek için sunucu tarafı kodu yazacaksınız. Daha sonra, daha fazla veri için istekleri tetikleyen kullanıcı eylemlerini dinlemek için istemci tarafı kodu yazacaksınız. Daha fazla yükle düğmesine basın veya sayfanın en altına gidin.
3. Veri yüklemeyi uygula: Kullanıcı daha fazla veri için bir istek tetiklediğinde, uygulama bir sonraki veri sayfası için sunucu tarafına bir istek göndermelidir. Sunucu tarafı daha sonra yalnızca uygulamanın sayfayı güncellemek için kullanabileceği o sayfanın verilerini döndürmelidir.
4. sayfayı güncelle: Son olarak, sayfayı yeni yüklenen verilerle güncelleyeceksiniz. Bu, yeni verilerin mevcut bir öğe listesine eklenmesini veya tüm listenin yeni verilerle değiştirilmesini içerebilir.

Veri Kaynağını Ayarlama

React Native'de özel sayfalandırmayı uygulamanın ilk adımı, veri kaynağınızı ayarlamaktır. Bu genellikle bir API veya veritabanından veri almayı ve bir durum değişkeninde depolamayı içerir. Dikkate almak basit bir REST API'si bu, kitapların bir listesini döndürür.

API yanıtının nasıl görünebileceğine dair bir örneği burada bulabilirsiniz:

{
"veri": [
 {
"İD": 1,
"başlık": "Çavdar Avcısı",
"yazar": "JD Salinger"
 },
 {
"İD": 2,
"başlık": "Bir alaycı kuş öldürmek için",
"yazar": "Harper Lee"
 },
// ...
 ],
"sayfa": 1,
"toplam sayfalar": 5
}

Bu verileri React Native uygulamamızda almak için gidip getirmek döndüren işlev, Söz bu, REST API'sinden gelen yanıtla çözülür.

Özel Sayfalandırma İşlevi Oluşturma

API'den veri çekecek ve durumu yeni alınan verilerle güncelleyecek bir fonksiyon oluşturmaya devam edelim. Bu işlev, React Native uygulamasının ekranında neyin oluşturulacağına karar verecektir.

Kuyu bu işlevi zaman uyumsuz bir işlev olarak tanımlayın bu, bir sayfa parametresi alır ve getirilen verilerle çözümlenen bir Promise döndürür.

sabit SAYFA BOYUTU = 10;
sabit kitap getir = zaman uyumsuz (sayfa) => {
denemek {
sabit cevap = beklemek gidip getirmek(` https://myapi.com/books? sayfa=${sayfa}&sayfaBoyutu=${PAGE_SIZE}`);
sabit json = beklemek yanıt.json();
geri dönmek json.data;
 } yakalamak (hata) {
konsol.hata (hata);
geri dönmek [];
 }
}

Yukarıdaki kod bloğunda, kitap getir fonksiyon alır sayfa parametresi ve o sayfadaki verilerle çözülen bir Taahhüt döndürür. Burada, SAYFA BOYUTU Sabit, sayfa başına getirilen kitap sayısını sınırlamak için kullanılır.

Özel Sayfalandırma İşlevinin Yardımıyla Dinamik Yükleme Gerçekleştirme

Özel sayfalandırma işlevi tanımlandığında, artık uygulamada dinamik yükleme uygulamak için bunu kullanabilirsiniz. Bunu yapmak için Düz Liste React Native'de büyük veri listelerini işlemek için yüksek performanslı bir bileşen olan bileşen.

İlk olarak, Düz Liste bazı başlangıç ​​durumlarına sahip bileşen:

içe aktarmak Tepki, { useState, useEffect } itibaren'tepki';
içe aktarmak { Düz Liste, Görünüm, Metin } itibaren"tepki-yerli";
sabit uygulama = () => {
sabit [kitaplar, setBooks] = useState([]);
sabit [currentPage, setCurrentPage] = useState(1);
 useEffect(() => {
// Verilerin ilk sayfasını getir
 fetchBooks (currentPage).then(veri => setBooks (veri));
 }, []);
sabit renderÖğesi = ({ öğe }) => {
geri dönmek (

yazı Boyutu: 18 }}>{item.title}</Text>
yazı Boyutu: 14 }}>{öğe.yazar}</Text>
 </View>
 );
 };
geri dönmek (
 veri={kitaplar}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
ihracatvarsayılan Uygulama;

Bu kod, FlatList bileşenini iki durum parçasıyla kurar, yani kitabın Ve geçerli sayfa. biz kullanıyoruz useEffect() uygulamamız ilk çalıştırıldığında verilerin ilk sayfasını getirmek için kancayı kullanın.

Sonra, bir tanımlıyoruz renderItem öğesinden bir öğe alan işlev kitabın dizi ve bir döndürür Görüş kitabın adını ve yazarını içerir.

Sonunda geçtik kitabın dizisine veri pervane Düz Liste, bizim ile birlikte renderItem işlev ve keyExtractor.

Artık Düz Listemizin, bir kullanıcının listenin sonuna kaydırdığını algılayabildiğinden emin olmalıyız. Bu noktada, yeni verileri alıp yüklemeye ve işlemeye devam etmelidir.

Bunu yapmak için, kullanacağız onEndUlaşıldı sağlanan destek Düz Liste, kullanıcı listenin sonuna gittiğinde çağrılan bir geri aramadır. Ayrıca güncelleme yapmalıyız geçerli sayfa Şu anda hangi sayfada olduğumuzu takip etmek için durum.

İşte tüm bunları uygulayan güncellenmiş kod:

içe aktarmak Tepki, { useState, useEffect } itibaren'tepki';
içe aktarmak { Düz Liste, Görünüm, Metin } itibaren"tepki-yerli";
sabit uygulama = () => {
sabit [kitaplar, setBooks] = useState([]);
sabit [currentPage, setCurrentPage] = useState(1);
sabit [isLoading, setIsLoading] = useState(YANLIŞ);
 useEffect(() => {
 fetchBooks (currentPage).then(veri => setBooks (veri));
 }, []);
sabit daha fazla getir = zaman uyumsuz () => {
eğer (yükleniyor) geri dönmek;
 setIsLoading(doğru);
sabit sonraki Sayfa = geçerli Sayfa + 1;
sabit yeniVeri = beklemek fetchBooks (sonraki Sayfa);
 setCurrentPage (sonraki Sayfa);
 setIsLoading(YANLIŞ);
 setKitaplar(öncekiVeri => [...prevData, ...newData]);
 };
sabit renderÖğesi = ({ öğe }) => {
geri dönmek (
dolgu malzemesi: 16 }}>
yazı Boyutu: 18 }}>{item.title}</Text>
yazı Boyutu: 14 }}>{öğe.yazar}</Text>
 </View>
 );
 };
geri dönmek (
 veri={kitaplar}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
ihracatvarsayılan Uygulama;

Burada iki yeni durum ekledik. yükleniyor Ve onEndReachedThreshold. yükleniyor şu anda veri alıp almadığımızı izler ve onEndReachedThreshold ateşler onEndUlaşıldı kullanıcı listenin sonunun %10'una kaydırdığında geri arama.

adlı yeni bir işlev oluşturduk. getirDevamı bu ne zaman çalışır onEndUlaşıldı kovuldu. Halihazırda veri yükleyip yüklemediğimizi kontrol eder ve yüklememişsek bir sonraki veri sayfasını getirir ve listemizi günceller.

Son olarak, gerekli yeni donanımları oyunumuza ekledik. Düz Liste bileşen. bu Düz Liste kullanıcı listenin sonuna doğru kaydırırken bileşen artık verileri dinamik olarak yükleyecektir.

Özel Sayfalandırmayı Kullanarak Uygulamanızın Performansını Artırın

Kendi özel sayfalandırma sisteminizle React Native'de verileri dinamik olarak nasıl yükleyeceğinizi öğrendiniz. Bu yöntem, uygulamanızda büyük miktarda veriyle uğraşırken size daha fazla esneklik ve kontrol sağlar. Sayfalandırmanızı uygulamanızın stiline ve gereksinimlerine uyacak şekilde uyarlamayı unutmayın. İstediğiniz görünümü ve işlevselliği elde etmek için daha da özelleştirebilirsiniz. Genel olarak, uygulamanızın performansını optimize etmenize kesinlikle yardımcı olur.