React Native PanResponder 更改我正在拖动的项目

如何解决React Native PanResponder 更改我正在拖动的项目

我有一个评论列表，我想拖放这些评论并重新排序。这是列表的样子：https://i.stack.imgur.com/sozkK.png

我的问题是，我想在用户拖动评论时向用户显示该项目所在的“预览”，因此每次将该项目拖到列表中的另一个项目上时，我都会对列表交换重新排序那两个 但是，当前正在拖动的项目更改为我正在拖动的项目。 假设我有一个数组 ["a","b","c"]，如果我拖动 A 并经过 B，我拖动的项目将转换为 B（因为 B 现在位于数组）。我想要的是简单地显示如果被拖动的项目被拖放到那里，列表会是什么样子的预览

这是我的组件：

import React,{ useState,useEffect,useRef,useMemo,View } from "react";
import { StyleSheet,Animated,PanResponder } from "react-native";

const Draggable = ({
  index,position,movingDraggable,onMovingDraggable,releaseDraggable,onReleaseDraggable,swap,renderChild
}) => {
  const animatedView = useRef();
  const [zIndex,setZIndex] = useState(0);
  const [isMovedOver,setIsMovedOver] = useState(false);

  useEffect(() => {
      animatedView.current.measure((x,y,width,height,pageX,pageY) => {
        if (
          movingDraggable && 
          movingDraggable.index != index &&
          movingDraggable.pageX > pageX &&
          movingDraggable.pageX < pageX + width &&
          movingDraggable.pageY > pageY &&
          movingDraggable.pageY < pageY + height
        ) {
          setIsMovedOver(true);
          swap(index,movingDraggable.index);
        } else {
          setIsMovedOver(false);
        }
      });
  },[movingDraggable]);

  useEffect(() => {
    animatedView.current.measure((x,pageY) => {
      if (
        releaseDraggable &&
        releaseDraggable.index != index &&
        releaseDraggable.pageX > pageX &&
        releaseDraggable.pageX < pageX + width &&
        releaseDraggable.pageY > pageY &&
        releaseDraggable.pageY < pageY + height
      ) {
        swap(index,releaseDraggable.index);
      }
    });
  },[releaseDraggable]);

  const pan = useRef(new Animated.ValueXY());
  const panResponder = useMemo(
    () =>
      PanResponder.create({
        onStartShouldSetPanResponder: (evt,gestureState) => true,onMoveShouldSetPanResponderCapture: (evt,onPanResponderGrant: (evt,gestureState) => {
          setZIndex(1);
          pan.current.setoffset({
            x: pan.current.x._value,y: pan.current.y._value,});
          pan.current.setValue({ x: 0,y: 0 });
        },onPanResponderMove: Animated.event(
          [null,{ dx: pan.current.x,dy: pan.current.y }],{
            useNativeDriver: false,listener: (evt) => {
              const { pageX,pageY } = evt.nativeEvent;

              onMovingDraggable({ index,pageY });
            },}
        ),onPanResponderRelease: (evt,gestureState) => {
          setZIndex(0);
          const { pageX,pageY } = evt.nativeEvent;
          onReleaseDraggable({ index,pageY });
          setIsMovedOver(false);
            Animated.spring(pan.current,{
              tovalue: {
                x: 0 - pan.current.x._offset,y: 0 - pan.current.y._offset,},useNativeDriver: false,}).start(() => {
              pan.current.setValue({ x: 0,y: 0 });
              pan.current.setoffset({ x: 0,y: 0 });
            });
        },}),[]
  );

  const panStyle = { transform: pan.current.getTranslateTransform() };
  return (
    <Animated.View
      {...panResponder.panHandlers}
      ref={animatedView}
      style={[panStyle,styles.shadow,{ zIndex: zIndex },/* zIndex ? { width: 0 } : null */ ]}
    >
      {renderChild(isMovedOver)}
    </Animated.View>
  )
};

const styles = StyleSheet.create({
  shadow: {
    shadowColor: "#000",shadowOffset: {
      width: 0,height: 6,shadowOpacity: 0.1,shadowRadius: 10,elevation: 10,});

export default Draggable

父级中的函数：

  const onMovingDraggable = (movingDraggable) => {
    setMovingDraggable(movingDraggable);
  };

  const onReleaseDraggable = (releaseDraggable) => {
    setMovingDraggable(null);
    setReleaseDraggable(releaseDraggable);
  };

  const swap = (index1,index2) => {
    var arr = [...characteristics];
    arr.splice(index1 + 1,arr[index2])
    arr.splice(index2,1)
    setcharacteristics(arr);
  };