Како динамички учитати податке са прилагођеном пагинацијом у Реацт Нативе-у

Пагинација се односи на систем поделе велике количине података на мање делове или странице којима је лакше управљати ради побољшања перформанси и употребљивости. Прилагођена пагинација, ако се правилно примени, може да обезбеди боље корисничко искуство. Научите како да креирате прилагођено решење за пагинацију у Реацт Нативе-у које вам омогућава да динамички учитавате податке.

Разумевање прилагођене пагинације

Са прилагођеном пагинацијом, програмери могу креирати механизам пагинације који одговара специфичним захтевима њихове апликације. Прилагођено пагинирање може укључивати дизајнирање јединственог корисничког интерфејса за навигацију између страница, имплементацију алгоритама за преузимање података из базе података или АПИ-ја, или укључује функције као што су бесконачно померање или лењо учитавање.

Предности прилагођене пагинације

Креирање прилагођеног система пагинације за ваше Реацт Нативе мобилне апликације може понудити неке предности:

• Може да побољша скалабилност ваше апликације, омогућавајући јој да ефикасније рукује већим количинама података. Ово је посебно важно за апликације које се баве великим скуповима података.
• Прилагођена пагинација може да побољша перформансе ваше апликације дељењем података на мање делове којима се лакше управља. Ово ће смањити време учитавања.
• Са прилагођеном пагинацијом, имаћете повећану флексибилност и контролу у представљању и приступу подацима унутар ваше апликације.

Имплементација динамичког учитавања са прилагођеном пагинацијом

Када ваша Реацт Нативе апликација учитава само неопходне податке које је потребно учитати у том тренутку, онда се то назива динамичким учитавањем. Да бисте применили динамичко учитавање са прилагођеном пагинацијом, можете да пратите ове опште кораке:

1. Одредите метод пагинације: Одлучите се за метод пагинације који најбоље одговара вашем садржају. Ово би могло бити традиционално базиран на страници систем пагинације, где корисници кликну да би учитали следећу страницу, или бесконачно померање систем, где се више садржаја учитава док корисник скролује низ страницу.
2. Напишите код на страни сервера и клијента: Написаћете код на страни сервера за обраду захтева за пагинацију за одређене странице података и вратити само податке за ту страницу. Затим ћете написати код на страни клијента да бисте слушали радње корисника које покрећу захтеве за више података, као што је клик на а Учитај више дугме или скроловање до дна странице.
3. Спроведите учитавање података: Када корисник покрене захтев за више података, апликација треба да пошаље захтев страни сервера за следећу страницу података. Страна сервера би тада требало да врати само податке за ту страницу, које апликација може да користи за ажурирање странице.
4. Ажурирајте страницу: Коначно, ажурираћете страницу са новоучитаним подацима. Ово може укључивати додавање нових података постојећој листи ставки или замену целе листе новим подацима.

Подешавање извора података

Први корак у примени прилагођене пагинације у Реацт Нативе-у је подешавање извора података. Ово обично укључује преузимање података из АПИ-ја или базе података и њихово складиштење у променљивој стања. Размотрити једноставан РЕСТ АПИ који враћа листу књига.

Ево примера како би АПИ одговор могао да изгледа:

{
"подаци": [
 {
"ид": 1,
"титула": "Ловац у житу",
"аутор": "Ј.Д. Салингер"
 },
 {
"ид": 2,
"титула": "Убити птицу ругалицу",
"аутор": "Харпер Ли"
 },
// ...
 ],
"страна": 1,
"тоталПагес": 5
}

Да бисмо преузели ове податке у нашој апликацији Реацт Нативе, можемо да користимо донети функција, која враћа а Обећавам који се решава одговором РЕСТ АПИ-ја.

Креирање прилагођене функције пагинације

Хајде да наставимо са креирањем функције која ће преузети податке из АПИ-ја и ажурирати стање са новопримљеним подацима. Ова функција ће одлучити шта да се прикаже на екрану апликације Реацт Нативе.

Добро дефинисати ову функцију као асинхронизовану функцију који узима параметар странице и враћа обећање које се решава са преузетим подацима.

конст ПАГЕ_СИЗЕ = 10;
конст фетцхБоокс = асинц (страница) => {
покушати {
конст одговор = чекати донеси (` https://myapi.com/books? паге=${паге}&пагеСизе=${ПАГЕ_СИЗЕ}`);
конст јсон = чекати респонсе.јсон();
повратак јсон.дата;
 } улов (грешка) {
конзола.еррор (грешка);
повратак [];
 }
}

У блоку кода изнад, тхе фетцхБоокс функција узима а страна параметар и враћа обећање које се решава са подацима са те странице. Ево, ВЕЛИЧИНА СТРАНИЦЕ константа се користи за ограничавање броја књига које се преузимају по страници.

Имплементација динамичког учитавања уз помоћ функције прилагођене пагинације

Са дефинисаном прилагођеном функцијом пагинације, сада можете да је користите за имплементацију динамичког учитавања у апликацији. Да бисте то урадили, користите ФлатЛист компонента, која је компонента високих перформанси за приказивање великих листа података у Реацт Нативе-у.

Прво, поставите ФлатЛист компонента са неким почетним стањем:

увоз Реагујте, { усеСтате, усеЕффецт } из'реаговати';
увоз { ФлатЛист, Виев, Тект } из'реацт-нативе';
конст Апп = () => {
конст [књиге, сетБоокс] = усеСтате([]);
конст [цуррентПаге, сетЦуррентПаге] = усеСтате(1);
 усеЕффецт(() => {
// Дохвати почетну страницу података
 фетцхБоокс (цуррентПаге).тхен(података => сетБоокс (подаци));
 }, []);
конст рендерИтем = ({ итем }) => {
повратак (

фонтСизе: 18 }}>{итем.титле}</Text>
фонтСизе: 14 }}>{итем.аутхор}</Text>
 </View>
 );
 };
повратак (
 дата={књиге}
 рендерИтем={рендерИтем}
 кеиЕктрацтор={итем => итем.ид.тоСтринг()}
 />
 );
}
извозУобичајено Апликација;

Овај код поставља компоненту ФлатЛист са два дела стања, наиме књиге и Тренутна страна. Користимо усеЕффецт() кука за преузимање почетне странице података када се наша апликација први пут покрене.

Затим дефинишемо а рендерИтем функција која преузима ставку из књиге низ и враћа а Поглед који садржи наслов књиге и аутора.

Коначно смо прошли књиге низ за података проп оф тхе ФлатЛист, заједно са нашим рендерИтем функција и кеиЕктрацтор.

Сада морамо да се уверимо да наша Флатлист може да открије када корисник скролује до краја листе. У том тренутку, требало би да настави са преузимањем и учитавањем нових података и рендеровањем.

Да бисмо то урадили, користићемо онЕндРеацхед реквизит обезбеђен за ФлатЛист, што је повратни позив који се позива када корисник скролује до краја листе. Такође би требало да ажурирамо наше Тренутна страна стање да пратимо на којој смо страници тренутно.

Ево ажурираног кода који имплементира све ово:

увоз Реагујте, { усеСтате, усеЕффецт } из'реаговати';
увоз { ФлатЛист, Виев, Тект } из'реацт-нативе';
конст Апп = () => {
конст [књиге, сетБоокс] = усеСтате([]);
конст [цуррентПаге, сетЦуррентПаге] = усеСтате(1);
конст [исЛоадинг, сетИсЛоадинг] = усеСтате(лажно);
 усеЕффецт(() => {
 фетцхБоокс (цуррентПаге).тхен(података => сетБоокс (подаци));
 }, []);
конст фетцхМоре = асинц () => {
ако (исЛоадинг) повратак;
 сетИсЛоадинг(истина);
конст следећаПаге = ЦуррентПаге + 1;
конст невДата = чекати фетцхБоокс (нектПаге);
 сетЦуррентПаге (нектПаге);
 сетИсЛоадинг(лажно);
 сетБоокс(превДата => [...превДата, ...невДата]);
 };
конст рендерИтем = ({ итем }) => {
повратак (
паддинг: 16 }}>
фонтСизе: 18 }}>{итем.титле}</Text>
фонтСизе: 14 }}>{итем.аутхор}</Text>
 </View>
 );
 };
повратак (
 дата={књиге}
 рендерИтем={рендерИтем}
 кеиЕктрацтор={итем => итем.ид.тоСтринг()}
 онЕндРеацхед={фетцхМоре}
 онЕндРеацхедТхресхолд={0.1}
 />
 );
}
извозУобичајено Апликација;

Овде смо додали две нове државе под називом исЛоадинг и онЕндРеацхедТхресхолд. исЛоадинг прати да ли тренутно преузимамо податке, и онЕндРеацхедТхресхолд испаљује тхе онЕндРеацхед повратни позив када корисник скролује до 10% од краја листе.

Направили смо нову функцију под називом фетцхМоре који тече када онЕндРеацхед је отпуштен. Проверава да ли већ учитавамо податке, а ако не, преузима следећу страницу података и ажурира нашу листу.

На крају смо додали нове неопходне реквизите у наше ФлатЛист саставни део. Тхе ФлатЛист компонента ће сада динамички учитавати податке док корисник скролује до краја листе.

Побољшајте перформансе своје апликације користећи прилагођену пагинацију

Научили сте како да динамички учитавате податке у Реацт Нативе-у са сопственим прилагођеним системом пагинације. Овај метод вам даје већу флексибилност и контролу када радите са великим количинама података у вашој апликацији. Не заборавите да прилагодите своју пагинацију тако да одговара стилу и потребама ваше апликације. Можете га додатно прилагодити да бисте постигли жељени изглед и функционалност. Све у свему, то би вам дефинитивно помогло да оптимизујете перформансе своје апликације.