我很反应原生。我想在我的应用中实现刷卡,因为我使用了react-native-tinder-swipe-cards。
是否可以在从左向右滑动时显示上一张卡片。因为即使我递减索引的值总是显示下一张卡,它位于数组的下一个索引处。
我现在正在尝试的是:
handleYup(card) {
console.log("yup",card)
//Alert.alert("Card",card.id+"");
this.setState({
cardYup: true
})
}
handleNope(card) {
console.log("nope")
//Alert.alert("Card", card.id + "");
this.setState({
cardNope: true
})
}
cardRemoved(index) {
if(this.state.cardYup){
index=index-2;
this.setState({
cardYup:false
})
}
else if (this.state.cardNope) {
//index = index +1
this.setState({
cardNope: false
})
}
console.log(`The index is ${index}`);
Alert.alert("Index", index+"");
let CARD_REFRESH_LIMIT = 1
if (this.state.cards.length - index <= CARD_REFRESH_LIMIT) {
console.log(`There are only ${this.state.cards.length - index - 1} cards left.`);
if (!this.state.outOfCards) {
//console.log(`Adding ${cards2.length} more cards`)
Alert.alert("No Cards","No morecards present")
this.setState({
outOfCards: true
})
}
}
}
答案 0 :(得分:1)
当然可以在现有库中添加一些功能,但由于时间限制,我将库从react-native-tinder-swipe-cards.切换到react-native-deck-swiper
在应用所有这些道具时,我能够获得所需的功能
<Swiper
ref={swiper => {
this.swiper = swiper
}}
goBackToPreviousCardOnSwipeRight={true}
showSecondCard={false}
onSwiped={this.onSwiped}
onTapCard={this.swipeLeft}
cards={this.state.cards}
cardIndex={id}
renderCard={this.renderCard}
verticalSwipe={false}
cardVerticalMargin={5}
cardHorizontalMargin={5}
onSwipedAll={this.onSwipedAllCards}
cardStyle={{height:520}}>
</Swiper>