Персонализираната пагинация с динамично зареждане на данни може да подобри производителността и цялостното потребителско изживяване на вашето приложение.

Странирането се отнася до системата за разделяне на големи количества данни на по-малки, по-управляеми части или страници за подобряване на производителността и използваемостта. Персонализираната пагинация, ако се внедри правилно, може да осигури по-добро потребителско изживяване. Научете как да създадете персонализирано решение за страниране в React Native, което ви позволява да зареждате данни динамично.

Разбиране на персонализираната пагинация

С персонализирано страниране разработчиците могат да създадат механизъм за страниране, който отговаря на специфичните изисквания на тяхното приложение. Персонализираната пагинация може да включва проектиране на уникален потребителски интерфейс за навигация между страниците, прилагане на алгоритми за извличане на данни от база данни или API, или включващи функции като безкрайно превъртане или отложено зареждане.

instagram viewer

Предимства на персонализираната пагинация

Създаването на персонализирана система за страниране за вашите мобилни приложения React Native може да предложи някои предимства:

  • Може да подобри скалируемостта на вашето приложение, позволявайки му да обработва по-големи количества данни по-ефективно. Това е особено важно за приложения, които работят с големи набори от данни.
  • Персонализираната пагинация може да подобри производителността на вашето приложение чрез разделяне на данните на по-малки и по-управляеми части. Това ще намали времето за зареждане.
  • С персонализираната пагинация ще имате по-голяма гъвкавост и контрол при представянето и достъпа до данни във вашето приложение.

Внедряване на динамично зареждане с персонализирана пагинация

Когато вашето приложение React Native зарежда само необходимите данни, които трябва да зареди по това време, тогава това се нарича динамично зареждане. За да приложите динамично зареждане с персонализирана пагинация, можете да следвате тези общи стъпки:

  1. Определете метода на страниране: Изберете метод на страниране, който работи най-добре за вашето съдържание. Това може да е традиционно базирани на страници система за пагиниране, където потребителите щракват, за да заредят следващата страница, или an безкраен превъртане система, където се зарежда повече съдържание, докато потребителят превърта надолу по страницата.
  2. Напишете код от страна на сървъра и от страна на клиента: Ще напишете код от страна на сървъра, за да обработвате заявките за страниране за конкретни страници с данни и да връщате само данните за тази страница. След това ще напишете код от страна на клиента, за да слушате за потребителски действия, които задействат заявки за повече данни, като щракване върху a Зареди още бутон или превъртане до края на страницата.
  3. Реализирайте зареждането на данни: Когато потребителят задейства заявка за повече данни, приложението трябва да изпрати заявка до страната на сървъра за следващата страница с данни. Тогава сървърната страна трябва да върне само данните за тази страница, които приложението може да използва, за да актуализира страницата.
  4. Актуализирайте страницата: Накрая ще актуализирате страницата с новозаредените данни. Това може да включва добавяне на новите данни към съществуващ списък с елементи или замяна на целия списък с новите данни.

Настройка на източника на данни

Първата стъпка в прилагането на персонализирано страниране в React Native е да настроите вашия източник на данни. Това обикновено включва извличане на данни от API или база данни и съхраняването им в променлива на състоянието. Обмисли прост REST API който връща списък с книги.

Ето пример за това как може да изглежда отговорът на API:

{
"данни": [
 {
"документ за самоличност": 1,
"заглавие": "Спасителят в ръжта",
"автор": "Дж. Д. Селинджър"
 },
 {
"документ за самоличност": 2,
"заглавие": "Да убиеш присмехулник",
"автор": "Харпър Лий"
 },
// ...
 ],
"страница": 1,
"общо страници": 5
}

За да извлечем тези данни в нашето приложение React Native, можем да използваме извличам функция, която връща a обещание който се разрешава с отговора от REST API.

Създаване на персонализирана функция за страниране

Нека продължим да създаваме функция, която ще извлича данните от API и ще актуализира състоянието с новополучените данни. Тази функция ще реши какво да изобрази на екрана на приложението React Native.

Добре дефинирайте тази функция като асинхронна функция който приема параметър на страницата и връща обещание, което се разрешава с извлечените данни.

конст PAGE_SIZE = 10;
конст fetchBooks = асинхронен (страница) => {
опитвам {
конст отговор = изчакайте извличане (` https://myapi.com/books? страница=${страница}&pageSize=${PAGE_SIZE}`);
конст json = изчакайте response.json();
връщане json.data;
 } улов (грешка) {
конзола.error (грешка);
връщане [];
 }
}

В кодовия блок по-горе, fetchBooks функцията отнема a страница параметър и връща обещание, което разрешава с данните от тази страница. Ето, PAGE_SIZE константата се използва за ограничаване на броя книги, извлечени на страница.

Внедряване на динамично зареждане с помощта на персонализираната функция за страниране

С дефинираната персонализирана функция за страниране вече можете да я използвате за внедряване на динамично зареждане в приложението. За да направите това, използвайте FlatList компонент, който е компонент с висока производителност за изобразяване на големи списъци с данни в React Native.

Първо, настройте FlatList компонент с някакво първоначално състояние:

импортиране Реагирайте, {useState, useEffect} от"реагира";
импортиране { FlatList, View, Text } от"реагиране на родния";
конст Приложение = () => {
конст [книги, setBooks] = useState([]);
конст [currentPage, setCurrentPage] = useState(1);


 useEffect(() => {
// Извличане на начална страница с данни
 fetchBooks (currentPage).then(данни => setBooks (данни));
 }, []);


конст renderItem = ({ вещ }) => {
връщане (

размер на шрифта: 18 }}>{item.title}</Text>
размер на шрифта: 14 }}>{item.author}</Text>
 </View>
 );
 };


връщане (
 данни={книги}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
износпо подразбиране Приложение;

Този код настройва компонента FlatList с две части от състояние, а именно книги и текуща страница. Ние използваме useEffect() кука за извличане на началната страница с данни, когато нашето приложение се стартира за първи път.

След това дефинираме a renderItem функция, която взема елемент от книги масив и връща a Преглед съдържащ заглавието на книгата и автора.

Най-накрая преминахме книги масив към данни опора на FlatList, заедно с нашите renderItem функция и keyExtractor.

Сега трябва да се уверим, че нашият Flatlist може да открие, когато потребител превърти до края на списъка. В този момент трябва да продължи да извлича и зарежда новите данни и да ги визуализира.

За да направим това, ще използваме onEndReached опора, предоставена на FlatList, което е обратно извикване, извиквано, когато потребителят превърти до края на списъка. Ние също трябва да актуализираме нашите текуща страница състояние, за да следите на коя страница се намираме в момента.

Ето актуализирания код, прилагащ всичко това:

импортиране Реагирайте, {useState, useEffect} от"реагира";
импортиране { FlatList, View, Text } от"реагиране на родния";
конст Приложение = () => {
конст [книги, setBooks] = useState([]);
конст [currentPage, setCurrentPage] = useState(1);
конст [isLoading, setIsLoading] = useState(невярно);


 useEffect(() => {
 fetchBooks (currentPage).then(данни => setBooks (данни));
 }, []);


конст fetchMore = асинхронен () => {
ако (зарежда се) връщане;


 setIsLoading(вярно);


конст следваща страница = текуща страница + 1;
конст нови данни = изчакайте fetchBooks (следваща страница);


 setCurrentPage (следваща страница);
 setIsLoading(невярно);
 setBooks(prevData => [...предишни данни, ...нови данни]);
 };


конст renderItem = ({ вещ }) => {
връщане (
подплата: 16 }}>
размер на шрифта: 18 }}>{item.title}</Text>
размер на шрифта: 14 }}>{item.author}</Text>
 </View>
 );
 };


връщане (
 данни={книги}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
износпо подразбиране Приложение;

Тук сме добавили две нови състояния, наречени се зарежда и onEndReachedThreshold. се зарежда следи дали в момента извличаме данни и onEndReachedThreshold изстрелва onEndReached обратно извикване, когато потребителят е превъртял до 10% от края на списъка.

Създадохме нова функция, наречена fetchMore който работи, когато onEndReached е уволнен. Той проверява дали вече зареждаме данни и ако не, извлича следващата страница с данни и актуализира нашия списък.

Накрая добавихме новия необходим реквизит към нашия FlatList компонент. The FlatList сега компонентът ще зарежда динамично данни, докато потребителят превърта до края на списъка.

Подобрете производителността на приложението си с персонализирана пагинация

Научихте как да зареждате данни динамично в React Native с вашата собствена персонализирана система за страниране. Този метод ви дава повече гъвкавост и контрол, когато работите с големи количества данни във вашето приложение. Не забравяйте да персонализирате пагинацията си, за да съответства на стила и нуждите на вашето приложение. Можете да го персонализирате още повече, за да постигнете желания вид и функционалност. Като цяло определено ще ви помогне да оптимизирате ефективността на приложението си.