reactjs - 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>
);
}
}
请帮忙!提前致谢。
解决方案
推荐阅读
- javascript - Javascript:是否只有一页的 sessionStorage 或 localStorage 之类的东西?
- c# - 如何使用 foreach 终止和重新启动
- node.js - 为什么微软用 NodeJS 而不是 .NET 制作 Visual Studio Code?
- javascript - IE 11 不加载 JS 脚本(将其从开发者工具的脚本列表中删除)
- php - 子 pid XXXX 退出信号分段错误 (11),HTTPD_PATH 中可能的核心转储
- c# - 如何在 C# 中显示一个国家/地区的正确时区名称?
- python - 由于有效负载无效,向 Typeform 发布请求失败
- ios - NativeScript - 使用 iBeacon 重新启动应用程序,AppDelegate 必须实现窗口属性
- javascript - 使用 lodash 过滤数组 WithIn Array
- elasticsearch - ElasticSearch 可以选择不为空或不为空的包含字段之一吗?