Как я могу отображать изображения как колоду карт (стек), как Tinder?

Question

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

if (redirectToStackAfterPhotoSubmit) {
        return (
            <Stack
                imagesOnStack={this.state.url || 'http://via.placeholder.com/400x300'}
                alt="Uploaded Images"
                height="300"
                Width="400"
            />
        );
    }

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

Непосредственно ниже моя попытка, что я делаю неправильно и как я могу это исправить?

Вот Upload.js (не все опубликовал, потому что это большой файл)

     this.state = {
           url: '',
           picture: [],
           selectedPictureIndex: 0
        };

     render() {
        const redirectToStackAfterPhotoSubmit = this.state.redirectToStackAfterPhotoSubmit;

        const { picture } = this.state;

        const picList = picture.map(pic => {
            return(
                <li key={pic.id}>{this.state.url[pic]}</li>
            );
        });

        if (redirectToStackAfterPhotoSubmit) {
            return (
                <Stack
                    imagesOnStack={picList || 'http://via.placeholder.com/400x300'}
                    alt="Uploaded Images"
                    height="300"
                    Width="400"
                />
            );
        }
    }

Вот Stack.js:

import React, { Component } from 'react';

class Stack extends Component {
    toggleNext() {
        console.log("clicked toggleNext()");
        if(this.state.selectedPicture === this.state.picture.length - 1) {
            return;
        }

        this.setState(prevState => ({
            selectedPicture: prevState.selectedIndex + 1
        }));
    }

    togglePrevious() {
        console.log("clicked togglePrevious()");
        if(this.state.selectedPicture === 0) {
            return;
        }

        this.setState(prevState => ({
            selectedPicture: prevState.selectedPicture - 1
        }));
    }

    render() {
        return(
            <div>
                <img src={this.props.imagesOnStack} alt=""/>
                <button onClick={this.toggleNext}>Next</button>
                <button onClick={this.togglePrevious}>Prev</button>
            </div>
        );
    }
}

export default Stack;

Answer 1

Для реактивного натива, вот пакет npm, использующий колоду свайпов: activ-native-swipe-card.

Репозитории Github: https://github.com/EQuimper/MyOwnChallenge-RnMovieTinder Пакеты: https://github.com/meteor-factory/react-native-tinder-swipe-cards

Для React вы можете использовать карту реакционного удара

import Cards, { Card } from 'react-swipe-card'


const data = ['Alexandre', 'Thomas', 'Lucien']

const Wrapper = () => {
  return (
      <Cards onEnd={action('end')} className='master-root'>
        {data.map(item => 
          <Card 
            onSwipeLeft={action('swipe left')} 
            onSwipeRight={action('swipe right')}>
            <h2>{item}</h2>
          </Card>
        )}
      </Cards>
  )
}