Как реализовать полноценную галерею?

Для реализации полноценной галереи в React Native вам потребуется несколько компонентов и библиотек. В этом ответе я расскажу подробнее о каждом шаге.

1. Установка необходимых библиотек:
Для создания галереи вам понадобятся следующие библиотеки:
- react-native-image-picker: позволяет выбрать изображения из галереи или сделать фото с камеры.
- react-native-image-zoom-viewer: предоставляет возможность увеличивать изображения в галерее.
- react-native-reanimated: для создания плавных анимаций.

Используйте следующие команды для установки библиотек:

   npm install react-native-image-picker
   npm install react-native-image-zoom-viewer
   npm install react-native-reanimated

2. Создание компонента для выбора изображений:
Создайте компонент, который позволит пользователю выбрать изображения из галереи или сделать снимок с камеры. Для этого вы можете использовать компонент react-native-image-picker. Внутри этого компонента вы можете отображать выбранные изображения в виде миниатюр.

   import React, { useState } from 'react';
   import { View, Image, Button } from 'react-native';
   import ImagePicker from 'react-native-image-picker';

   const ImagePickerComponent = () => {
     const [images, setImages] = useState([]);

     const selectImages = () => {
       ImagePicker.showImagePicker(
         {
           mediaType: 'photo',
           maxHeight: 800,
           maxWidth: 800,
         },
         (response) => {
           if (response.didCancel) {
             console.log('User cancelled image picker');
           } else if (response.error) {
             console.log('ImagePicker Error: ', response.error);
           } else {
             setImages([...images, response]);
           }
         },
       );
     };

     return (
       <View>
         {images.map((image, index) => (
           <Image
             key={index}
             source={{ uri: image.uri }}
             style={{ width: 100, height: 100 }}
           />
         ))}
         <Button title="Select Images" onPress={selectImages} />
       </View>
     );
   };

   export default ImagePickerComponent;

В этом коде мы создаем компонент ImagePickerComponent, который хранит массив выбранных изображений в состоянии images. При нажатии на кнопку "Select Images" вызывается функция selectImages, которая открывает окно выбора изображений с помощью ImagePicker.showImagePicker. Выбранные изображения добавляются в массив images, и они отображаются в виде миниатюр.

3. Создание компонента галереи:
Создайте компонент для отображения полноценной галереи с возможностью увеличивать изображения. Для этого вы можете использовать компонент react-native-image-zoom-viewer. В данном компоненте вы будете отображать выбранные изображения в увеличенном виде.

   import React from 'react';
   import { View } from 'react-native';
   import ImageViewer from 'react-native-image-zoom-viewer';

   const GalleryComponent = ({ images }) => {
     const imageUrls = images.map((image) => ({
       url: image.uri,
     }));

     return (
       <View style={{ flex: 1 }}>
         <ImageViewer imageUrls={imageUrls} />
       </View>
     );
   };

   export default GalleryComponent;

Здесь мы создаем компонент GalleryComponent, который получает массив изображений через пропс images. Массив images преобразуется в массив imageUrls, который необходим для отображения изображений в компоненте ImageViewer из react-native-image-zoom-viewer.

4. Использование компонентов:
Теперь, чтобы использовать созданные компоненты, добавьте их в свою основную компоненту.

   import React from 'react';
   import { View } from 'react-native';
   import ImagePickerComponent from './ImagePickerComponent';
   import GalleryComponent from './GalleryComponent';

   const App = () => {
     const [showGallery, setShowGallery] = useState(false);
     const [selectedImages, setSelectedImages] = useState([]);

     const handleShowGallery = () => {
       setShowGallery(true);
     };

     const handleHideGallery = () => {
       setShowGallery(false);
     };

     const handleSelectImages = (images) => {
       setShowGallery(true);
       setSelectedImages(images);
     };

     return (
       <View style={{ flex: 1 }}>
         {!showGallery && (
           <ImagePickerComponent onSelectImages={handleSelectImages} />
         )}
         {showGallery && (
           <GalleryComponent images={selectedImages} onClose={handleHideGallery} />
         )}
       </View>
     );
   };

   export default App;

В этом коде мы создаем основной компонент App, который хранит состояние showGallery, отвечающее за отображение галереи, и состояние selectedImages, хранящее выбранные пользователем изображения. По умолчанию галерея не отображается (showGallery равно false), и отображается компонент ImagePickerComponent. Когда пользователь выбирает изображения, вызывается функция handleSelectImages, которая устанавливает состояние showGallery в true и сохраняет выбранные изображения в состоянии selectedImages. После этого отображается компонент GalleryComponent, который получает массив выбранных изображений.

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