推荐使用：react-native-deck-swiper —— 一款优雅的React Native卡片轮播组件

import React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import DeckSwiper from 'react-native-deck-swiper';
 
const cards = [
  { name: 'A', image: require('./assets/card_A.png') },
  { name: 'B', image: require('./assets/card_B.png') },
  { name: 'C', image: require('./assets/card_C.png') },
  // ...更多卡片数据
];
 
export default class CardSwiper extends React.Component {
  renderCard(card, index) {
    const { name, image } = card;
    return (
      <View key={index} style={styles.card}>
        <Image style={styles.cardImage} source={image} />
        <Text style={styles.cardText}>{name}</Text>
      </View>
    );
  }
 
  render() {
    return (
      <DeckSwiper
        data={cards}
        renderCard={this.renderCard}
        onSwipedLeft={(card) => console.log('swiped left', card)}
        onSwipedRight={(card) => console.log('swiped right', card)}
        onSwipedTop={(card) => console.log('swiped top', card)}
        onSwipedBottom={(card) => console.log('swiped bottom', card)}
      />
    );
  }
}
 
const styles = StyleSheet.create({
  card: {
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardImage: {
    height: 128,
    width: 128,
    borderRadius: 64,
  },
  cardText: {
    color: '#000',
    fontSize: 16,
    marginTop: 10,
  },
});

这段代码演示了如何使用react-native-deck-swiper创建一个卡片轮播组件，并在用户滑动卡片时处理相关的事件。代码中包含了一个简单的卡片数组以及如何渲染每张卡片的实例。这个例子有助于理解如何在实际应用中使用这个库。