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

1. react-native-swiper:
   React Native Swiper — это широко используемая библиотека, предлагающая гибкий и настраиваемый компонент просмотра с помощью пролистывания. Он поддерживает как горизонтальное, так и вертикальное пролистывание, а также предоставляет возможности нумерации страниц, автозапуска и циклической прокрутки. Вот пример его использования:

import Swiper from 'react-native-swiper';
const MySwiper = () => {
  return (
    <Swiper>
      <View style={styles.slide1}>
        <Text>Slide 1</Text>
      </View>
      <View style={styles.slide2}>
        <Text>Slide 2</Text>
      </View>
      <View style={styles.slide3}>
        <Text>Slide 3</Text>
      </View>
    </Swiper>
  );
};
const styles = StyleSheet.create({
  slide1: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB',
  },
  slide2: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#97CAE5',
  },
  slide3: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#92BBD9',
  },
});
export default MySwiper;

2. react-native-deck-swiper:
   Если вам нужен интерфейс смахивания карточек, похожий на Tinder, React-native-deck-swiper — отличный выбор. Он предоставляет стопку карточек с жестами для навигации. Вот пример:

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import SwipeCards from 'react-native-deck-swiper';
const MySwiper = () => {
  const [cards, setCards] = useState(['Card 1', 'Card 2', 'Card 3']);
  const renderCard = (card, index) => {
    return (
      <View style={styles.card}>
        <Text>{card}</Text>
      </View>
    );
  };
  const onSwiped = (index) => {
    // Handle swipe events
    console.log('Swiped card at index:', index);
  };
  return (
    <SwipeCards
      cards={cards}
      renderCard={renderCard}
      onSwiped={onSwiped}
      cardIndex={0}
    />
  );
};
const styles = StyleSheet.create({
  card: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: 'gray',
  },
});
export default MySwiper;

3. react-native-gesture-handler:
   Если вы предпочитаете более низкоуровневый подход, вы можете использовать библиотеку response-native-gesture-handler для реализации жестов смахивания вручную. Эта библиотека предоставляет API-интерфейсы распознавания жестов, которые можно использовать для создания пользовательских представлений смахивания. Вот пример:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { PanGestureHandler, State } from 'react-native-gesture-handler';
const MySwiper = () => {
  const onGestureEvent = (event) => {
    // Handle gesture events
    console.log('Gesture event:', event.nativeEvent);
  };
  return (
    <PanGestureHandler onGestureEvent={onGestureEvent}>
      <View style={styles.container}>
        <Text>Swipe me</Text>
      </View>
    </PanGestureHandler>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});
export default MySwiper;

В этой статье мы рассмотрели различные методы реализации представлений смахивания в React Native. Мы рассмотрели популярные библиотеки, такие как React-Native-Swiper и React-Native-Deck-Swiper, а также вариант нижнего уровня с использованием React-Native-Gesture-Handler. В зависимости от требований вашего проекта и предпочтений в дизайне вы можете выбрать наиболее подходящий подход для создания привлекательных представлений смахивания в ваших приложениях React Native.