Question

我在React Native中使用PanResponder，但是我有一个简单的问题，我无法解决！

这是我的代码

class test extends React.Component {
    constructor(props) {
        super(props);
        const position = new Animated.ValueXY();
        const panResponder = PanResponder.create({
           onStartShouldSetPanResponder: () => true,
           onPanResponderMove: (evt, gs) => {
               console.log(gs.dx);
               position.setValue({ x: gs.dx , y: gs.dy })
           },
           onPanResponderRelease: (evt, gs) => {
              
               
           }, 

        });

        this.state = { panResponder, position }
    }
    getCardStyle() {
        const { position } = this.state;
        return {
            ...position.getLayout(),
        };
    }

    render() {
        return (
              <View>
                 {
                     this.props.cart.map((item, index) => {
                          return (
                         <Animated.View style={[this.getCardStyle() ,styles.CardContainer]} key={item.id}
                               {...this.state.panResponder.panHandlers}
                             >
                            <View><Image style={styles.image} source={{ uri: item.src}} /></View>
                            <Text style={styles.title}>{item.location}</Text>
                         </Animated.View>
                     )
                     })
                 }
              </View>
        );
    }
}

我想移动每个手指另外，但是当我触摸列表中的每个项目时，整个项目就会开始移动。

有人可以帮我吗？

Answer 1

解决它

我制作了另一个名为ListItem的组件，并在该组件中呈现FlatList项目，并且可以正常工作！

React Native中的PanResponder和动画问题

1 个答案: