react-native-swipe-card

一个支持手势切换的卡片组，支持依次返回切掉的卡片

Usage no npm install needed!

<script type="module">
  import reactNativeSwipeCard from 'https://cdn.skypack.dev/react-native-swipe-card';
</script>

README

react-native-swipe-card

一个支持手势切换的卡片组，支持依次返回切掉的卡片

Preview

预览图

使用 Demo

import { CardStack, Card } from '../components/SwipeCard'


<CardStack
  ref={ref => (this.cardStack = ref)}
  style={styles.container}
  handleCurCard={this.getCurIndex}
  renderNoMoreCards={() => <Text>再也没有了！！</Text>}
  >
  {clothes.map((cloth, index) => (
    <Card style={[styles.card]} key={index}>
      <Image source={cloth} style={{ width: windowWidth - 20, height: 500 }} />
    </Card>
  ))}
</CardStack>

Props

CardStack

Props type description required default
verticalThreshold number 垂直方向，滑动距离超过该值时，card才会被移除 No
horizontalThreshold number 水平方向，滑动距离超过该值时，card才会被移除 No
renderNoMoreCards func 当没有 Card 之后，显示的样式 No
handleCurCard func 当切换Card之后，调用该函数 No

Card

Props type description required default
style object 单个卡片框的样式 No
children node 卡片的内容 Yes