Question

到目前为止，我可以像这样显示用户上传到浏览器的图像。

require_once 'database_config.php';

但是这次，我希望用户能够通过单击按钮浏览下一张或上一张图片。我知道我的尝试是尝试列出一个清单，我只是这样做，目的只是为了弄清楚我正在使用什么。

下面是我的尝试，我在做错什么以及如何解决？

这里是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

Answer 1

对于react native，这是一个使用滑动卡座的npm软件包：react-native-swipe-card。

Github存储库：https://github.com/EQuimper/MyOwnChallenge-RnMovieTinder软件包：https://github.com/meteor-factory/react-native-tinder-swipe-cards

对于React，您可以使用react-swipe-card

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>
  )
}

如何显示像Tinder一样的纸牌（堆叠）图像？

1 个答案: