Как реализовать свайп фото, как на android в контактах?

Для реализации свайпа фото, как в приложении "Контакты" на Android, вам потребуется использовать React Native и одну из библиотек для создания свайпов, таких как react-native-gesture-handler или react-native-swipe-gesture.

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

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

Ваш компонент должен состоять из следующих элементов:

1. Компонент FlatList или ScrollView, который будет отображать список фотографий. В FlatList вы можете использовать горизонтальную прокрутку, чтобы фотографии отображались как горизонтальный список.

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

3. В компоненте фотографии (внутри TouchableOpacity, чтобы иметь возможность отслеживать жесты), вы должны добавить обработчики событий для свайпа влево и вправо. Внутри этих обработчиков вы можете выполнять необходимые действия, такие как переключение на следующую или предыдущую фотографию.

Ниже приведен пример кода, который показывает, как реализовать эту логику:

import React, { useState } from 'react';
import { ScrollView, Image, TouchableOpacity, View } from 'react-native';
import { Swipeable } from 'react-native-gesture-handler';

const photos = [
  { id: 1, url: 'https://example.com/photo1.jpg' },
  { id: 2, url: 'https://example.com/photo2.jpg' },
  { id: 3, url: 'https://example.com/photo3.jpg' },
  // и так далее
];

const PhotoSwipe = () => {
  const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);

  const handleSwipeLeft = () => {
    if (currentPhotoIndex < photos.length - 1) {
      setCurrentPhotoIndex(currentPhotoIndex + 1);
    }
  };

  const handleSwipeRight = () => {
    if (currentPhotoIndex > 0) {
      setCurrentPhotoIndex(currentPhotoIndex - 1);
    }
  };

  return (
    <ScrollView horizontal>
      {photos.map((photo, index) => (
        <Swipeable key={photo.id} onSwipeLeft={handleSwipeLeft} onSwipeRight={handleSwipeRight}>
          <TouchableOpacity>
            <Image source={{ uri: photo.url }} style={{ width: 200, height: 200 }} />
          </TouchableOpacity>
        </Swipeable>
      ))}
    </ScrollView>
  );
};

export default PhotoSwipe;

В этом примере PhotoSwipe компонент отображает горизонтальный список фотографий, которые можно свайпать влево или вправо. Каждая фотография представляется отдельным компонентом, который отображает изображение с помощью компонента Image. В свою очередь, для обработки свайпов используется компонент Swipeable из библиотеки react-native-gesture-handler.