Panresponder动画无法发挥价值

Question

我创建了一个平面列表，该列表的中心是屏幕中间的滑动动画，允许用户在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>
  );
};