在本机中堆叠卡

Question

目前，我正在学习对本机的反应，在制作卡叠时遇到一些问题。

这是我的代码：

constructor(props) {
    super(props);
    const position = new Animated.ValueXY();
    const panResponder = new PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onPanResponderMove: (event, gesture) => {
            position.setValue({ x: gesture.dx, y: gesture.dy })
        },
    });
    this.state = { panResponder, position, index: 0 };
}


renderCards() {
    if(this.state.index >= this.props.data.length) {
        return this.props.renderNoMoreCard();
    }

    return this.props.data.map((item, i) => {
        if( i < this.state.index) { return null}

        if(i === this.state.index) {
            return (
            <Animated.View  
            key={item.id}
            style={[ styles.cardStyle, this.getCardStyle()]}
            {...this.state.panResponder.panHandlers}
        >
        {this.props.renderCard(item)}
        </Animated.View>
            );
        }

        return (
            <Animated.View key={item.id} style={styles.cardStyle}>
            {this.props.renderCard(item)}
            </Animated.View>
        ); 
    }).reverse();
}
render() {

    return(
        <View>
        {this.renderCards()}
        </View>
    );
}
}

const styles = {
    cardStyle: {
    position: 'absolute',
    width: SCREEN_WIDTH,
    top: 0,
}
};

export default Deck;

显示标题卡2而不是显示标题卡1，但是当我滑动标题卡时。卡1从视图中删除，标题更改为3。

Answer 1

错误是在使用PanResponder时，PanResponder用于将多个触摸调和为一个手势。所以， 我在声明一个对象const panResponder = new PanResponder.create 但是代码应该是 const panResponder = PanResponder.create ，然后删除该单词“ new ”就可以了！