Как отображать списки
Этот пост является частью серии, в которой я описываю свой опыт изучения React Native при создании своего первого мобильного приложения. Это также мой способ отблагодарить сообщество React Native советами и идеями, которые я записываю по ходу дела.
Почти каждое приложение должно отображать список объектов. В нашем случае эти списки имеют конечное количество объектов, но во многих случаях требуется бесконечный список (например, лента для приложения социальной сети, такого как Instagram). Давайте попробуем научиться отображать списки в React Native с новым компонентом FlatList.
Самый простой способ использования FlatList
Два основных реквизита, которые вам нужно передать FlatList, — это массив данных и функция, которая возвращает компонент из каждого элемента данных.
Очистка некоторых предупреждений
Если вы заметили, даже если приведенный выше код работает, он выдает нам предупреждение о том, что в VirtualizedList (на самом деле это то, на чем построен FlatList) отсутствуют ключи для элементов.
Если вы визуализировали массив компонентов в React, вы, вероятно, видели такое предупреждение раньше. VirtualizedList требует уникальный ключ для каждого компонента, который используется для кэширования и других соображений эффективности. Один из способов сделать это — иметь реквизит key в каждом элементе и использовать его. Если массив данных не содержит элементов с ключевым свойством, мы можем предоставить функцию, которая генерирует уникальный ключ для каждого элемента, как показано ниже. Это должно позаботиться о предупреждениях.
Функция обновления по запросу
Очень распространенная функция списков в мобильных приложениях — «обновить по нажатию». Обычно это сигнализирует приложению получить новые данные с сервера и повторно отобразить список объектов. На самом деле это довольно легко сделать с помощью FlatList.
Что нам нужно добавить, так это обратный вызов, который вызывается, когда пользователь выполняет жест «потяните для обновления» (onRefresh), и флаг, сообщающий FlatList о том, что обновление выполняется (refreshing). Приведенный выше код — простая игрушка, но вы можете себе представить, что обработчик onRefresh получает какие-то данные по сети, что может занять некоторое время.
Бонусные баллы: бесконечная прокрутка
Приложение, которое мы создаем, не требует бесконечной функциональности прокрутки, но я мог бы рассказать об этом здесь, так как я немного поигрался с этим.
Чтобы заставить это работать, вам нужно реализовать обработчик для onEndReachedprop. Логика в этом обработчике зависит от вас, но две основные вещи заключаются в том, что (а) как следует из названия, это срабатывает, когда пользователь прокручивает список до конца, и (б) вы, скорее всего, захотите обновите массив элементов, которые вы загружаете в реквизит data в обработчике. Для целей этой простой демонстрации предположим, что при каждом вызове мы добавляем еще 10 элементов в массив данных.
Вам также нужно будет передать значение реквизита onEndReachedThreshold. Согласно документации, это устанавливает порог в пикселях (виртуальный, а не физический) для вызова метода onEndReached. Вы можете поиграть с этим, но нулевое значение — хорошая отправная точка.
В приведенном ниже примере в качестве реквизита входных данных используется массив восходящих целых чисел и отображается простое ортогональное представление. Когда мы достигнем конца списка, обработчик onEndReached добавит еще немного данных в конец массива, так что мы идем от [0,..,9] => [0,..,9,10,.. ,19] и так далее.
Вы заметите, что мы также используем часть состояния page каждый раз, когда мы вызываем moreData. Хотя здесь это не очень полезно, вы можете себе представить, что в реальном сценарии, когда moreData будет вызывать API для получения данных с разбивкой на страницы, нам нужно будет отслеживать, где мы находимся и какие данные мы запрашиваем дальше.
Итак, мы здесь! Мы освоили отображение простых списков (возможно, бесконечных) элементов в React Native. Довольно аккуратно, если я сам так говорю. Далее: настройка экранов регистрации и входа в систему, их подключение к AWS Cognito. Вещи становятся реальными!
Если вам понравилась эта статья, не стесняйтесь нажать кнопку хлопка 👏, чтобы помочь другим найти ее.
Обо мне
Я Алекс, инженер-программист и фанат стартапов. В настоящее время я являюсь соучредителем стартапа AgentRisk, где я являюсь вице-президентом по продукту и разработке. В прошлой жизни я был частью команды инженеров-основателей в стартапе корпоративных облачных хранилищ в Силиконовой долине, делал кучу крутых передовых проектов в Cisco Research и работал над действительно инновационной сетью центров обработки данных. архитектуры» во время учебы в магистратуре Калифорнийского университета в Сан-Франциско. Мне всегда нравится изучать новые технологии и постоянно заниматься поставками сторонних проектов.
