Javascript 反应器本地pan响应器位置X/Y不正确

当我在屏幕上拖动圆时，我正试图通过实时响应的平移来获得圆相对于其父圆的x，y坐标

根据docs（）的规定，位置Y应该是触摸屏相对于元件的Y位置，但是，它似乎不正确。我有什么遗漏吗

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Obstacle from './Obstacle';

import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  TouchableOpacity,
  PanResponder,
  Animated
} from 'react-native';

import { Svg } from 'expo';

const { Circle, Rect } = Svg;

const NUM_OBSTACLES = 1;
const CIRCLE_RADIUS = 40;

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

class Canvas extends Component {
  constructor(props) {
    super(props);

    this.state = {
      pan: new Animated.ValueXY(),
      mousePosition: { x: 0, y: 0 }
    };
  }

  componentWillMount() {
    // Add a listener for the delta value change
    this._val = { x: 0, y: 0 };

    this.state.pan.addListener(value => (this._val = value));

    // Initialize PanResponder with move handling
    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

      onPanResponderGrant: (evt, gestureState) => {
        this.state.pan.setOffset(this.state.pan.__getValue());
        this.state.pan.setValue({ x: 0, y: 0 });
        this.locationPageOffsetX =
          evt.nativeEvent.pageX - evt.nativeEvent.locationX;
        this.locationPageOffsetY =
          evt.nativeEvent.pageY - evt.nativeEvent.locationY;
      },
      onPanResponderMove: Animated.event(
        [null, { dx: this.state.pan.x, dy: this.state.pan.y }],
        {
          listener: (evt, gestureState) => {
            console.log(
              `locationX : ${evt.nativeEvent.locationX}   locationY : ${
                evt.nativeEvent.locationY
              }`
            );
          }
        }
      )
    });
  }

  render() {
    const panStyle = {
      transform: this.state.pan.getTranslateTransform()
    };
    // );
    return (
      <>
        <View
          style={{
            borderWidth: 1,
            height: '80%',
            width: '100%',
            backgroundColor: 'lightgrey'
          }}
        >
          <Animated.View
            {...this.panResponder.panHandlers}
            style={[panStyle, styles.circle]}
          />

        </View>
      </>
    );
  }
}

const styles = StyleSheet.create({
  circle: {
    position: 'absolute',
    backgroundColor: 'skyblue',
    width: CIRCLE_RADIUS * 2,
    height: CIRCLE_RADIUS * 2,
    borderRadius: CIRCLE_RADIUS,
    zIndex: 1
  }
});

export default Canvas;

---

你怎么知道这是不对的？您得到的值是否与预期值不同？位置是否未定义？还有，你已经尝试过什么解决方案了？@schu34谢谢你的回复，我已经更新了帖子。我已尝试应用此处所述的偏移量，但在左上角仍显示类似于locationX:66.5 locationY:66的内容

locationX : 48   locationY : 48
locationX : 48   locationY : 47.5
locationX : 47   locationY : 48
locationX : 44   locationY : 46.5