Как добавить собственную карусель в React Native

3 шага для создания пользовательской карусели в React Native

Под капотом

История начинается, когда я создавал карусель в реактивном проекте для одного из моих клиентов. Я уже создал историю о том, как создать карусель в react-native, но в сегодняшней истории мы разработаем собственный компонент карусели.

Начиная

Библиотека, которую мы будем использовать, — это react-native-swipe-gesture для добавления жестов, таких как смахивание влево и вправо. Я использую готовый к использованию пример, который вы также можете использовать.

yarn add react-native-gesture-handler

После того, как репозитории клонированы и пакет установлен, нам нужны данные для карусели для нашего экрана приветствия. Вы можете выбрать столько данных, сколько хотите, и любые данные, которые вы хотите. Я использую 2 примера изображений еды, чтобы показать, учитывая, что наш проект связан с едой.

Создание пользовательского компонента карусели

В корневом каталоге создайте отдельное имя папки в качестве компонентов. Эта папка компонентов состоит из повторно используемого кода или, скажем так, организмов нашего приложения.

import React from 'react';
import { View, Text} from 'react-native';
const Welcome = () => {
  return (
    <View>
      <Text>Welcome Screen</Text>
    </View>
  );
};
export default Welcome;

Логика для свайпа

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

• Первые все 3 изображения будут рендериться из массива объектов
• Добавьте жест смахивания влево и вправо, чтобы изменить активный слайд
• Мы покажем активный индикатор и неактивный индикатор

const stages = [
 {
   id: 0,
   src: require("../assets/vegetables.jpeg")
 },
 {
   id: 1,
   src: require("../assets/vegetables.jpeg")
 },
 {
   id: 2,
   src: require("../assets/breakfast.jpeg")
 }
];

Это будут данные изображений, и, используя эти данные, мы будем визуализировать только активное изображение.

const [ active, setActive ] = useState({
 id: 0,
 src: stages[0].src
});

Используя данные этапов, мы устанавливаем активное изображение карусели.

Добавление жестов смахивания

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

Добавление логики смахивания ниже

Я также добавил логику, чтобы вернуться к последнему слайду, проведя пальцем вправо от первого слайда и наоборот.

Индикатор визуализации

Это также просто, как только мы получаем активное состояние, нам просто нужно показать активный индикатор пользователю.

Конечный продукт

Это окончательный вид изделия.

Вывод

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

Код доступен по ссылке ниже.

click to read the code repository 

До следующего раза, хорошего дня, люди.

For more such stories visit our website - 💻 iHateReading

Больше читает

Больше контента на plainenglish.io