如何解决反应原生甲板刷卡一次刷两张卡
我正在使用 react-native-deck-swiper
。我注意到每次刷卡时,尽管只有一个项目从阵列中删除,但仍有两张卡在刷卡。谁能告诉我为什么会发生这个问题?下面是我添加的 ParentComponent
和 ChildComponent
:
父组件:
function ParentComponent() {
const [Items,setItems] = useState([
{
id: 454,name: 'John Smith',},{
id: 564,name: 'Alex Clarke',{
id: 432,name: 'Mathew Hayden',{
id: 4122,name: 'Dan Barker',{
id: 4320,name: 'Colin Barker',]);
const handleClick = (index) => {
Items.splice(index,1);
setItems(Items);
};
return <ChildComponent Items={Items} handleClick={handleClick} />;
}
子组件:
export default function ChildComponent({ Items,handleClick }) {
const renderCard = card => {
return (
<View
style={{
backgroundColor: '#FFF',borderRadius: 5,height: 250,padding: 50,marginLeft: 25,marginRight: 25,borderWidth: 1,borderColor: '#CCC',}}
>
<Text>{card.name}</Text>
</View>
);
};
return (
<Swiper
useViewOverflow={Platform.OS === 'ios'}
cards={Items}
onSwipedLeft={cardIndex => handleClick(cardIndex)}
onSwipedRight={cardIndex => handleClick(cardIndex)}
verticalSwipe={false}
showSecondCard={true}
stackSize={Items.length}
stackSeparation={-22}
animateCardOpacity={true}
backgroundColor={'white'}
containerStyle={styles.swiper}
renderCard={card => {
return renderCard(card);
}}
/>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。