Создание карусели с нуля в React Native.
Эта часть демонстрирует, как создать карусель с компонентом FlatList. Эта карусель будет отображать шестнадцатеричный код и устанавливать тот же шестнадцатеричный код в качестве цвета фона.
Демонстрация, сопровождающая эту часть (по этой ссылке на Github), продемонстрирует карусельную привязку к каждому отдельному элементу. Мы добьемся этого, используя свойство FlatList SnapToInterval и Dimensions API.
Следующий скринкаст суммирует этот процесс. Обратите внимание, что мы также отрендерили нижний колонтитул в нашей карусели. Это возможно с помощью свойства FlatList ListFooterComponent.
Если в какой-то момент вы заблудитесь, полный код приведен внизу этой статьи
Стартовый код
Ниже я прикрепил суть GitHub с кодом, который вам понадобится для запуска этого проекта. В этом коде мы:
- Импорт пакетов,
- Объявление массива шестнадцатеричных кодов
- Передача функции RenderItem
- Создаем наши стили
Рендеринг элемента
Если вы запустите этот код, вы заметите, что ничего не появится. Это связано с тем, что наша функция renderItem не имеет метода возврата. Теперь мы добавим функцию возврата.
В этой функции возврата мы сделаем две вещи
- Отобразите наш HexCode в виде строки
- Установите наш шестнадцатеричный код в качестве цвета фона
Чтобы отобразить наш HexCode в виде строки, нам нужно обернуть реквизит нашего элемента в компонент Text. Затем мы обернем этот Textcomponent в aViewcomponent с примененным к нему стилем контейнера элемента.
Измените функцию renderItem, как показано ниже.
В этой функции renderItem мы устанавливаем реквизит элемента как строку, отображаемую в компоненте Text, изначение, предоставленное для нашего стиля background-color. Вы также можете заметить, что мы получаем значение высоты.
Именно здесь в игру вступает APIDimensions.
Добавьте следующую строку кода, чтобы получить текущую высоту вашего устройства. Это необходимо, чтобы каждый элемент в карусели мог расширяться до полной высоты устройства.
Скринкаст ниже подытоживает прогресс, которого мы достигли на данный момент. Вы можете заметить, что есть еще несколько вещей, над которыми нам нужно поработать. Во-первых, наши элементы не привязаны к каждому отдельному элементу. Под привязкой я подразумеваю, что одновременно должен отображаться только один элемент. Не часть из двух, как показано в нашем скринкасте
Привязка к интервалу
Чтобы наша карусель привязывалась к каждому элементу, мы будем использовать 4 реквизита FlatList: showsVerticalScrollIndicator, decelerationRate, snapToAlignment и snapToInterval.
showsVerticalScrollIndicator, decelerationRate проще всего понять. showsVerticalScrollIndicator просто скроет вертикальную полосу прокрутки. decelerationRate определяет скорость замедления прокрутки.
snapToAlignment и snapToInterval работают рука об руку. Согласно реактивным документам:
Когда установлено, [snapToInterval] заставляет представление прокрутки останавливаться на кратном значении
snapToInterval. Это можно использовать для разбиения на страницы дочерних элементов, длина которых меньше размера прокрутки.
Это означает использование snapToInterval и настройку привязки с интервалами высоты устройства. Мы создаем ситуацию, когда одновременно отображается только один элемент.
snapToAlignment , с другой стороны, просто определяет, где произойдет привязка. Для наших вариантов использования будет установлено значение snapToAlignment 'start'.
Код для этого ниже.
Этот скринкаст показывает, как карусель теперь щелкает по каждому отдельному элементу.
Нижний колонтитул
Последним шагом к завершению карусели является добавление элемента нижнего колонтитула. Для этого мы будем использовать ListFooterComponent prop. Первым шагом является создание функции renderFooter. В приведенном ниже коде показано, как это сделать.
Теперь мы передадим эту функцию в наш ListFooterComponent prop.
и на этом наша карусель завершена.
Полный код
Вот полный код, если в какой-то момент вы заблудились.
Заключение
Спасибо, что добрались до конца моей статьи «7 источников вдохновения для вашего следующего проекта веб-разработки». Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать, и я постараюсь ответить как можно скорее.
Если вы новичок в Medium, вы можете присоединиться по этой ссылке здесь.
Еще мои истории
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
