在混合应用程序中反应原生手势应答器

旁边

我试图在单击图像时使用触摸事件位置开始从该位置到屏幕中心的图像动画。

当 React Native 全屏显示时,这不是问题。但是当 React Native 在混合应用程序中运行并且 React Native 渲染的屏幕没有占据整个屏幕时(比如在拆分视图模式下,或者在 iPad 上的弹出视图中),nativeEvent坐标都是相对于视图的React Native 正在渲染的地方,而不是实际的屏幕。

我想获得触摸发生的实际屏幕坐标。有什么解决方法可以做到这一点吗?

手势响应系统的文档中,所有事件都与根元素相关。我认为这意味着 react native 的根元素。

我做了一些实验,react nativeDimensions确实给了我正确的屏幕尺寸。我首先考虑使用它来计算 React Native 屏幕渲染位置的偏移量。但是,仅凭这些数据,我真的无法知道视图的顶部/底部/左侧/右侧有多少间距。

旁边

弄清楚了。

当 React Native 在混合应用程序的子视图中运行时,我可以使用measureInWindow 计算出实际的屏幕坐标。

onPress = () => {
   this.refs.button.measureInWindow((x, y, width, height) => {
     console.log("x", x, "y", y);
   })
}

render() {
  <TouchableOpacity ref="button" onPress={this.onPress}>
    ...
  </TouchableOpacity>
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在React Native应用程序中删除iOS的原生手势?

反应原生手势通过前视图到后面的视图

混合控制台应用程序中的多个平移手势

后台应用程序以收听拖动手势

使用滑动手势在多页jQuery移动应用程序中更改页面

TTS 在 tensorflow 中无法用于手势检测 android 应用程序

将免触摸手势整合到我的Android应用程序中

Kinect应用程序中的“骨架,手势”时期有什么用?

如何在混合应用程序中的角度控制器内部注册cordova事件

在混合应用程序中找不到AngularJS

在混合应用程序中的 webviews 之间共享数据

为什么在Unity / MRTK应用程序中的HoloLens1上无法使用“空中敲击”手势?

Windows 8.1应用程序和顶部与底部边缘手势

我的Android手势识别应用程序需要分类方法吗?

在Windows 8.1应用程序中使用C#进行手势

在混合应用程序中,如何确认只有您的应用程序正在访问服务器端页面

IBM Worklight 6.1在混合应用程序中集成服务器生成的页面

如何在混合React-native应用程序中传递初始属性

如何在混合应用程序中定位 Web 视图元素

在混合应用程序中创建Websocket连接时出错

在混合应用程序中从设备的图库中选择多个图像

如何在混合应用程序中查询Worklight Server主机信息是什么

在混合应用程序中未触发window.onload()

在混合应用程序框架(例如Ionic,Cordova,

如何在Apple Watch应用中识别手势?

如何从UITableViewCell的标签中删除手势识别器?

videoView片段中的Android手势检测器

长按手势识别器中的问题

如何在混合的Web API和MVC应用程序中使用Autofac解析Web API控制器?