从 PanResponder 内部更新状态

Question

我正在使用 react-native-svg 制作应用程序，但无法从 PanResponder 内部更新组件的状态。

我有一个 < Svg > 元素，里面有一个 < Circle > 。< Circle > 的位置是相对于一个叫做 originCoords（一个状态变量）的变量。我已经使用 PanResponder 来制作它，以便在执行平移手势时，< Svg >（其中包含 < Circle >）被移动，一旦手势结束，< Svg > 就会回到其原始位置。

我试图在平移手势完成后更改 originCoords，因此，即使 < Svg > 回到其原始位置，< Circle > 仍保持在其新位置。但是我真的很难从 PanResponder 内部更改 originCoords 的状态，在 createPanResponder.js 文件中，它只是保持不变，至少在 android 模拟器上。任何帮助将非常感激。

这是我的文件：

// MapScreen.js

import React, { useRef, useState } from "react";
import { Animated } from "react-native";
import { Svg, Circle } from "react-native-svg";
import { createPanResponder } from "../services/utils/createPanResponder";

export const MapScreen = () => {
  const [originCoords, setOriginCoords] = useState({x: 0, y: 0});
  const [circleCoords, setCircleCoords] = useState({x: 20, y: 20});

  const pan = useRef(new Animated.ValueXY()).current;
  const panResponder = createPanResponder(pan, originCoords, setOriginCoords);

  return (
    <Animated.View
      style={{transform: [{ translateX: pan.x }, { translateY: pan.y }],}}
      {...panResponder.panHandlers}
    >
      <Svg width='300' height='300' style={{ backgroundColor: "blue" }}>
        <Circle
          cx={`${circleCoords.x - originCoords.x}`}
          cy={`${circleCoords.y - originCoords.y}`}
          r="5"
          stroke="white"
          strokeWidth="1"
        />
      </Svg>
    </Animated.View>
  );
};

import { useRef } from "react";
import { PanResponder, Animated } from "react-native";

export const createPanResponder = (pan, originCoords, setOriginCoords) => {
  return useRef(
    PanResponder.create({
      // PanResponder default configs have been removed to be more succint
      onPanResponderMove: (evt, gestureState) => {
        // sets pan.x and pan.y to equal gesture's deltas
        Animated.event([{ x: pan.x }])({ x: gestureState.dx });
        Animated.event([{ y: pan.y }])({ y: gestureState.dy });
      },

      onPanResponderRelease: (evt, gestureState) => {
        //resets pan.x and pan.y
        Animated.event([{ x: pan.x }])({ x: 0 });
        Animated.event([{ y: pan.y }])({ y: 0 });

        // PROBLEM IS HERE, setOriginCoords DOESN'T DO ANYTHING
        console.log(originCoords); // { x: 0, y: 0 }
        const { dx, dy } = gestureState;
        setOriginCoords({ ...originCoords, dx, dy });
        console.log(originCoords); // { x: 0, y: 0 }
      },
    })
  ).current;
};

Answer 1

虽然我没有看到制作这个\xc2\xa0 function\xc2\xa0a类组件的失败原因，functions但没有state，只有类有。这是我今天从这里和文档中学到的

\n

constructor(props) {\n    super(props);\n    this.pan = new Animated.ValueXY();\n    this.panResponder = PanResponder.create({\n      onStartShouldSetPanResponder: (e, state) => false,\n      onStartShouldSetPanResponderCapture: (e, state) => false,\n      onMoveShouldSetPanResponder: () => true,\n      onMoveShouldSetPanResponderCapture: (e, { dx, dy }) => {\n        if (Math.abs(dx) > 10 || Math.abs(dy) > 10) {\n          this.state.holding && this.setState({ holding: false });\n          return true;\n        } else {\n          !this.state.holding && this.setState({ holding: true });\n          return true;\n        }\n      },\n      onPanResponderGrant: (e, gestureState) => {\n        this.pan.setOffset(this.pan.__getValue());\n        this.pan.setValue({ x: e.nativeEvent.pageX, y: e.nativeEvent.pageY });\n      },\n      onPanResponderMove: (e, gesture) => {\n        this.pan.setValue({ x: gesture.dx, y: gesture.dy });\n        /*Animated.event([null, { dx: this.pan.x, dy: this.pan.y }])(\n          e,\n          gestureState\n        );*/\n        if (Math.abs(gesture.dx) > 10 || Math.abs(gesture.dy) > 10) {\n          clearTimeout(this.t);\n          this.state.holding && this.setState({ holding: false });\n        } else {\n          !this.state.holding && this.setState({ holding: true });\n        }\n      },\n      onPanResponderRelease: (e, { vx, dx }) => {\n        this.setState({ holding: false });\n        const offScreenX = () => {\n          if (this.props.width < e.nativeEvent.pageX) {\n            Animated.spring(this.pan.x, {\n              toValue: this.props.width - 60,\n              bounciness: 10\n            }).start();\n          } else if (0 > e.nativeEvent.pageX) {\n            Animated.spring(this.pan.x, {\n              toValue: 0,\n              bounciness: 10\n            }).start();\n          }\n        };\n        const offScreenY = () => {\n          if (this.props.height < e.nativeEvent.pageY) {\n            Animated.spring(this.pan.y, {\n              toValue: this.props.height - 60,\n              bounciness: 10\n            }).start();\n          } else if (0 > e.nativeEvent.pageY) {\n            Animated.spring(this.pan.y, {\n              toValue: 0,\n              bounciness: 10\n            }).start();\n          }\n        };\n        // abs(vx) speed (not velocity) of gesture,\n        // abs(dx) distance traveled (not displacement)\n        //if (Math.abs(vx) >= 0.5 || Math.abs(dx) >= 30) {\n        this.pan.flattenOffset();\n        //}\n        if (this.props.width / 2 > e.nativeEvent.pageX) {\n          if (this.props.height / 2 < e.nativeEvent.pageY) {\n            offScreenX();\n            Animated.spring(this.pan.y, {\n              toValue: this.props.height - 60,\n              bounciness: 10\n            }).start();\n          } else {\n            offScreenY();\n            Animated.spring(this.pan.x, {\n              toValue: 0,\n              bounciness: 10\n            }).start();\n          }\n        } else {\n          if (this.props.height / 2 > e.nativeEvent.pageY) {\n            offScreenX();\n            Animated.spring(this.pan.y, {\n              toValue: 0,\n              bounciness: 10\n            }).start();\n          } else {\n            offScreenY();\n            Animated.spring(this.pan.x, {\n              toValue: this.props.width - 60,\n              bounciness: 10\n            }).start();\n          }\n        }\n      }\n    });\n    this.state = { highAndTight: true, hideOpener: true };\n  }\n

\n