在本机反应中堆叠卡片答案

【问题标题】：Stacking Cards in react native在本机反应中堆叠卡片
【发布时间】：2018-06-30 20:06:27
【问题描述】：

目前我正在学习本机反应，但在制作卡片时遇到了一些问题。

这是我的代码：

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。

【问题讨论】：

我发现了一个错误，即在使用 panResponder 时我正在创建一个对象 const panResponder = new PanResponder.create 但代码应该是 const panResponder = PanResponder.create 并通过更改这一行它奏效了。

标签： reactjs react-native

【解决方案1】：

错误是在使用 PanResponder 时，它用于将多个触摸协调为一个手势。所以，我在声明一个对象const panResponder = new PanResponder.create 但代码应该是 const panResponder = PanResponder.create 并通过删除这个单词“new”它起作用了！

【讨论】：