推荐一款React Native的滑动卡片组件:Swipe Cards
一款流行的React Native滑动卡片组件是react-native-swipe-cards
。以下是如何使用它的示例代码:
首先,你需要安装这个包:
npm install --save react-native-swipe-cards
然后,你可以在你的React Native代码中引入并使用这个组件:
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import SwipeCards from 'react-native-swipe-cards';
export default class SwipeCardExample extends React.Component {
constructor(props) {
super(props);
this.state = {
cards: this.props.cards,
};
}
renderCard(cardData) {
return (
<View style={styles.card}>
<Text style={styles.cardText}>{cardData.text}</Text>
</View>
);
}
render() {
return (
<SwipeCards
cards={this.state.cards}
renderCard={cardData => this.renderCard(cardData)}
onSwipedLeft={(cardData) => console.log('swiped left')}
onSwipedRight={(cardData) => console.log('swiped right')}
onSwipedTop={(cardData) => console.log('swiped top')}
onSwipedBottom={(cardData) => console.log('swiped bottom')}
/>
);
}
}
const styles = StyleSheet.create({
card: {
padding: 10,
marginTop: 10,
shadowColor: 'black',
shadowOffset: { width: 0, height: 2 },
shadowRadius: 6,
shadowOpacity: 0.2,
backgroundColor: 'white',
borderRadius: 3,
},
cardText: {
fontSize: 20,
},
});
在这个例子中,SwipeCards
组件被用来展示一系列卡片,用户可以通过滑动卡片来表达对卡片内容的喜欢或不喜欢。每张卡片上的数据由renderCard
方法渲染,并提供了在用户滑动卡片时触发的回调函数。
评论已关闭