Настраиваемое разбиение на страницы с динамической загрузкой данных может улучшить производительность и общий пользовательский интерфейс вашего приложения.

Разбиение на страницы относится к системе разделения больших объемов данных на более мелкие, более управляемые фрагменты или страницы для повышения производительности и удобства использования. Пользовательское разбиение на страницы, если оно реализовано правильно, может обеспечить лучший пользовательский опыт. Узнайте, как создать собственное решение для разбиения на страницы в React Native, позволяющее динамически загружать данные.

Понимание пользовательской пагинации

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

instagram viewer

Преимущества пользовательской пагинации

Создание пользовательской системы разбивки на страницы для мобильных приложений React Native может дать некоторые преимущества:

  • Это может улучшить масштабируемость вашего приложения, позволяя ему более эффективно обрабатывать большие объемы данных. Это особенно важно для приложений, работающих с большими наборами данных.
  • Пользовательское разбиение на страницы может повысить производительность вашего приложения за счет разделения данных на более мелкие и более управляемые фрагменты. Это сократит время загрузки.
  • Благодаря настраиваемой нумерации страниц у вас будет повышенная гибкость и контроль при представлении и доступе к данным в вашем приложении.

Реализация динамической загрузки с пользовательской разбивкой на страницы

Когда ваше приложение React Native загружает только те данные, которые ему нужны для загрузки в данный момент, это называется динамической загрузкой. Чтобы реализовать динамическую загрузку с настраиваемой нумерацией страниц, вы можете выполнить следующие общие шаги:

  1. Определяем метод пагинации: выберите метод разбивки на страницы, который лучше всего подходит для вашего контента. Это может быть традиционный постраничный система разбиения на страницы, где пользователи нажимают, чтобы загрузить следующую страницу, или бесконечная прокрутка система, где больше контента загружается по мере того, как пользователь прокручивает страницу вниз.
  2. Пишите серверный и клиентский код: вы будете писать серверный код для обработки запросов на разбивку на страницы для определенных страниц данных и возвращать данные только для этой страницы. Затем вы напишете код на стороне клиента для прослушивания действий пользователя, которые инициируют запросы на получение дополнительных данных, например, щелчок по Загрузи больше кнопку или прокрутив страницу вниз.
  3. Реализовать загрузку данных: когда пользователь инициирует запрос дополнительных данных, приложение должно отправить запрос на сервер для получения следующей страницы данных. Затем серверная сторона должна возвращать только данные для этой страницы, которые приложение может использовать для обновления страницы.
  4. Обновить страницу: Наконец, вы обновите страницу новыми загруженными данными. Это может включать добавление новых данных к существующему списку элементов или замену всего списка новыми данными.

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

Первым шагом в реализации пользовательского разбиения на страницы в React Native является настройка источника данных. Обычно это включает получение данных из API или базы данных и их сохранение в переменной состояния. Учитывать простой REST API который возвращает список книг.

Вот пример того, как может выглядеть ответ API:

{
"данные": [
 {
"идентификатор": 1,
"заголовок": "Ловец во ржи",
"автор": "Джей Ди Сэлинджер"
 },
 {
"идентификатор": 2,
"заголовок": "Убить пересмешника",
"автор": "Харпер Ли"
 },
// ...
 ],
"страница": 1,
"всего страниц": 5
}

Чтобы получить эти данные в нашем приложении React Native, мы можем использовать принести функция, которая возвращает Обещать это разрешается с ответом от REST API.

Создание пользовательской функции пагинации

Давайте приступим к созданию функции, которая будет получать данные из API и обновлять состояние вновь полученными данными. Эта функция будет решать, что отображать на экране приложения React Native.

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

константа PAGE_SIZE = 10;
константа fetchBooks = асинхронный (страница) => {
пытаться {
константа ответ = Ждите принести(` https://myapi.com/books? страница=${страница}&размер страницы=${PAGE_SIZE}`);
константа json = Ждите ответ.json();
возвращаться json.данные;
 } ловить (ошибка) {
консоль.error (ошибка);
возвращаться [];
 }
}

В приведенном выше блоке кода fetchBooks функция принимает страница параметр и возвращает обещание, которое разрешается с данными с этой страницы. Здесь РАЗМЕР СТРАНИЦЫ константа используется для ограничения количества книг, загружаемых на страницу.

Реализация динамической загрузки с помощью пользовательской функции пагинации

После определения пользовательской функции разбивки на страницы теперь вы можете использовать ее для реализации динамической загрузки в приложении. Для этого используйте Плоский список компонент, который является высокопроизводительным компонентом для рендеринга больших списков данных в React Native.

Сначала настройте Плоский список компонент с некоторым начальным состоянием:

Импортировать Реагировать, {useState, useEffect} от«реагировать»;
Импортировать {Плоский список, вид, текст} от«реагирующий нативный»;
константа Приложение = () => {
константа [книги, setBooks] = useState([]);
константа [текущая страница, setCurrentPage] = useState (1);


 использоватьЭффект(() => {
// Получить начальную страницу данных
 fetchBooks (currentPage).then(данные => setBooks (данные));
 }, []);


константа рендеритем = ({ элемент }) => {
возвращаться (

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


возвращаться (
 данные = {книги}
 рендеритем={рендеритем}
 keyExtractor={item => item.id.toString()}
 />
 );
}
экспортпо умолчанию Приложение;

Этот код устанавливает компонент FlatList с двумя частями состояния, а именно книги и текущая страница. Мы используем использоватьЭффект() ловушка для получения начальной страницы данных при первом запуске нашего приложения.

Далее мы определяем рендеритем функция, которая берет элемент из книги массив и возвращает Вид содержащий название книги и автора.

Наконец-то мы прошли книги массив к данные опора Плоский список, вместе с нашим рендеритем функция и keyExtractor.

Теперь нам нужно убедиться, что наш Flatlist может определять, когда пользователь прокручивает список до конца. В этот момент он должен продолжить выборку и загрузку новых данных и их рендеринг.

Для этого воспользуемся onEndReached реквизит, предоставленный Плоский список, который вызывается, когда пользователь прокручивает список до конца. Мы также должны обновить наш текущая страница состояние, чтобы отслеживать, на какой странице мы сейчас находимся.

Вот обновленный код, реализующий все это:

Импортировать Реагировать, {useState, useEffect} от«реагировать»;
Импортировать {Плоский список, вид, текст} от«реагирующий нативный»;
константа Приложение = () => {
константа [книги, setBooks] = useState([]);
константа [текущая страница, setCurrentPage] = useState (1);
константа [isLoading, setIsLoading] = useState(ЛОЖЬ);


 использоватьЭффект(() => {
 fetchBooks (currentPage).then(данные => setBooks (данные));
 }, []);


константа fetchMore = асинхронный () => {
если (загружается) возвращаться;


 setIsLoading(истинный);


константа следующая страница = текущая страница + 1;
константа новые данные = Ждите fetchBooks (следующая страница);


 setCurrentPage (следующая страница);
 setIsLoading(ЛОЖЬ);
 установитьКниги(предыдущие данные => [...предыдущие данные, ...новые данные]);
 };


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


возвращаться (
 данные = {книги}
 рендеритем={рендеритем}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
экспортпо умолчанию Приложение;

Здесь мы добавили два новых состояния, называемых isLoading и onEndReachedThreshold. isLoading отслеживает, извлекаем ли мы в данный момент данные, и onEndReachedThreshold стреляет onEndReached обратный вызов, когда пользователь прокрутил до 10% от конца списка.

Мы создали новую функцию под названием fetchПодробнее который работает, когда onEndReached уволен. Он проверяет, загружаем ли мы уже данные, и если нет, то извлекает следующую страницу данных и обновляет наш список.

Наконец, мы добавили новые необходимые реквизиты в наш Плоский список компонент. Плоский список Компонент теперь будет динамически загружать данные, когда пользователь прокручивает список до конца.

Улучшите производительность вашего приложения, используя пользовательскую разбивку на страницы

Вы узнали, как динамически загружать данные в React Native с помощью собственной системы разбиения на страницы. Этот метод дает вам больше гибкости и контроля при работе с большими объемами данных в вашем приложении. Не забудьте настроить нумерацию страниц в соответствии со стилем и потребностями вашего приложения. Вы можете настроить его еще больше, чтобы добиться желаемого внешнего вида и функциональности. В целом, это определенно поможет вам оптимизировать производительность вашего приложения.