React Native:完成拖动后获取元素的实际 x,y 坐标(react-native-gesture-handler)

2024-01-09

我正在使用这个库:https://github.com/software-mansion/react-native-gesture-handler https://github.com/software-mansion/react-native-gesture-handler

我对如何获取元素的实际 x,y 坐标有点困惑。 我正在解释...

这是初始状态:

拖动后,用event.nativeEvent.absoluteX我越来越38

但我想要0因为元素获得了左侧区域。

我越来越0仅当我将触摸移动到最左侧区域时。像这样,

但在这种情况下,这种解决方案对我不起作用????

这是我的代码:

import React, {Component} from 'react';
import {Animated, View} from 'react-native';

import {PanGestureHandler, State} from 'react-native-gesture-handler';

export default class App extends Component {
  constructor(props) {
    super(props);
    this._translateX = new Animated.Value(0);
    this._translateY = new Animated.Value(0);
    this._lastOffset = {x: 0, y: 0};
    this._onGestureEvent = Animated.event(
      [
        {
          nativeEvent: {
            translationX: this._translateX,
            translationY: this._translateY,
          },
        },
      ],
      {useNativeDriver: true},
    );
  }

  _onHandlerStateChange = event => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      this._lastOffset.x += event.nativeEvent.translationX;
      this._lastOffset.y += event.nativeEvent.translationY;
      this._translateX.setOffset(this._lastOffset.x);
      this._translateX.setValue(0);
      this._translateY.setOffset(this._lastOffset.y);
      this._translateY.setValue(0);

      console.log(event.nativeEvent.absoluteX);
      console.log(event.nativeEvent.absoluteY);
    }
  };

  render() {
    return (
      <PanGestureHandler
        {...this.props}
        onGestureEvent={this._onGestureEvent}
        onHandlerStateChange={this._onHandlerStateChange}>
        <Animated.View
          style={{
            transform: [
              {translateX: this._translateX},
              {translateY: this._translateY},
            ],
          }}>
          <View style={{backgroundColor: 'green', height: 100, width: 100}} />
        </Animated.View>
      </PanGestureHandler>
    );
  }
}

请帮忙! 提前致谢。


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Native:完成拖动后获取元素的实际 x,y 坐标(react-native-gesture-handler) 的相关文章

随机推荐