PanResponder - 在另一個組件上調用 Animated.spring 后重置手勢狀態

Question

我正在 React Native 中設置一個拖放圖像添加欄。 前提是用戶可以拖動圖像（在單行中）以重新排列它們，或者將它們拖動到行左側的垃圾桶中。

我對所有圖像（最多 5 個）使用單個 panResponder。 平移響應器獲取目標並相應地設置位置。

但是，如果我使用Animated.spring在 onPanResponderMove 方法中移動不同的組件，則當前被拖動的組件會立即重置為其原始 position。

For instance, if I move item c to the left one index, Animated.spring gets called on item b moving it to the right 1 index (60px), however when that happens item c gets forced back to its original position (now over item b的當前位置），因為gestureState.dx突然再次報告0。

為什么會發生這種情況，我該如何解決這個問題？

到目前為止我所擁有的：

import React, { useState, useEffect, useMemo, useRef } from 'react';
import {
  TouchableOpacity,
  View,
  Image,
  Text,
  Animated,
  PanResponder,
} from 'react-native';

interface AddImageBarProps {
  onImageAdd: () => void;
  onImageRemove: () => void;
}

const addImage = require('../../../Assets/img/OtherActionButtons/addPhoto.png');
const trash = require('../../../Assets/img/OtherActionButtons/trash.png');

export const AddImageBar = (props: AddImageBarProps) => {
  const width = 50;
  const margin = 5;

  const imageRefs = useRef([]);
  const positionRefs = useRef([]);

  const [imageArr, setImageArr] = useState<string[]>(['a', 'b', 'c']);
  const [deleteMode, setDeleteMode] = useState(false);
  const [moving, setMoving] = useState<boolean[]>([]);

  useEffect(() => {
    positionRefs.current = [];
    for (let i = 0; i < imageArr.length; i++) {
      positionRefs.current = [...positionRefs.current, new Animated.ValueXY()];
    }
  }, [imageArr]);

  const findIndex = (eventTarget: string) => {
    const index = imageRefs.current.findIndex((imgRef) => {
      return imgRef?._nativeTag === eventTarget;
    });
    if (index >= 0) {
      return index;
    }
    return undefined;
  };

  const getMovedIndexes = (dx: number): number => {
    let indexCount = 0;
    const dxIsNeg = dx < 0;
    if (dxIsNeg) {
      dx = dx * -1;
    }

    dx = dx - width / 2 - margin;
    if (dx < 0) {
      return;
    }
    indexCount = indexCount + 1;
    indexCount = indexCount + Math.trunc(dx / (width + margin));

    return dxIsNeg ? indexCount * -1 : indexCount;
  };

  const updateMoving = (i: number, value: boolean) => {
    const newMoving = moving.map((item, index) => {
      if (index === i) {
        return value;
      } else {
        return item;
      }
    });
    setMoving(newMoving);
  };

  const panResponder = useMemo(
    () =>
      PanResponder.create({
        onStartShouldSetPanResponder: (event, gestureState) => true,
        onPanResponderMove: (event, gestureState) => {
          const index = findIndex(event.nativeEvent.target);
          positionRefs.current[index].setValue({
            x: gestureState.dx,
            y: gestureState.dy,
          });

          const movedIndex = getMovedIndexes(gestureState.dx);

          if (index > 0 && movedIndex < 0) {
            console.log(`movedIndex: `, JSON.stringify(movedIndex));
            for (let i = movedIndex; i < 0; i++) {
              if (!moving[index + i]) {
                console.log(`index + i: `, JSON.stringify(index + i));
                updateMoving(index + i, true);
                Animated.spring(positionRefs.current[0], {
                  toValue: { x: width + margin, y: 0 },
                  friction: 10,
                  useNativeDriver: true,
                }).start(() => {
                  updateMoving(index + i, false);
                });
              }
            }
          }
        },
        onPanResponderGrant: (event) => {
          setDeleteMode(true);
          console.log(`granting`);
        },
        onPanResponderRelease: (event, gestureState) => {
          console.log(`releasing`);
          setDeleteMode(false);
        },
      }),
    [moving],
  );

  return (
    <View
      style={{ marginVertical: 5, flexDirection: 'row', alignItems: 'center' }}>
      <TouchableOpacity
        style={{ borderWidth: 1, borderColor: '#a1a1a1', borderRadius: 3 }}>
        <Image
          source={deleteMode ? trash : addImage}
          resizeMode="contain"
          style={{
            height: 50,
            width: 50,
          }}
        />
      </TouchableOpacity>
      {imageArr.map((item, index) => {
        return (
          <Animated.View
            ref={(element) =>
              (imageRefs.current = [...imageRefs.current, element])
            }
            key={index}
            style={{
              backgroundColor: '#0FF',
              height: 50,
              width: 50,
              justifyContent: 'center',
              alignItems: 'center',
              marginHorizontal: 5,
              transform: [
                {
                  translateX: positionRefs.current[index]?.x
                    ? positionRefs.current[index].x
                    : 0,
                },
                { translateY: 0 },
              ],
            }}
            {...panResponder.panHandlers}>
            <View pointerEvents="none">
              <Text>{item}</Text>
            </View>
          </Animated.View>
        );
      })}
    </View>
  );
};