如何解决React Native:完成拖动后获取元素的实际x,y坐标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>
);
}
}
请帮助! 预先感谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。