Panresponder动画无法发挥价值

如何解决Panresponder动画无法发挥价值

我创建了一个平面列表，该列表的中心是屏幕中间的滑动动画，允许用户在x轴上滑动。我想存储用户滑动组件多远的值，然后再对该数字进行操作。问题是当我调用setSwipedistance并尝试以某种状态存储dx时，组件/平面列表卡在该位置。例如，如果用户从初始点向左或向右滑动100个单位，而不是弹回值0（初始点），则它现在停留在100上。我知道如果只删除setSwipedistance（dx ），但我需要状态中的数字来刷新我的单位列表。

关于如何完成动画和存储值的任何想法吗？

const DayView = () => {
  const pan = useRef(new Animated.ValueXY()).current;
  const [swipedistance,setSwipedistance] = useState(0);

  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,onPanResponderMove: Animated.event([
        null,{ dx: pan.x,dy: pan.y },],{ useNativeDriver: false }),onPanResponderRelease: (e,{ dx }) => {
        // eslint-disable-next-line no-console
        Animated.spring(pan,{ tovalue: { x: 0,y: 0 },useNativeDriver: false }).start();
        setSwipedistance(dx);
      },}),).current;

  return (
    <View>
      <Animated.FlatList
        data={lessons}
        renderItem={renderEvent}
        keyExtractor={(item) => item.id.toString()}
        onRefresh={() => fetchLessons(date)}
        refreshing={refreshList}
        style={{
          transform: [{ translateX: pan.x }],}}
        {...panResponder.panHandlers}
      />
    </View>
  );
};