反应原生甲板刷卡一次刷两张卡

问题描述

我正在使用 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);
            }}
        />
    );
}

Example video

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）