React Native 中的 PanResponder 和动画问题

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 和动画问题

PanResponder & Animated Problem in React Native

react-native

react-animated

panresponder