简体   繁体   English

如何检测用户在本机反应中触摸某个元素?

[英]How do I detect the users touch on an element in react native?

I understand in react native we have: - OnPress (detects a press and release) - OnPressIn (detects the user going from not touching, to touching the button) -OnPressOut (detects the user releasing the button, or moving their finger elsewhere) 我知道在React Native中我们有:-OnPress(检测到按下并释放)-OnPressIn(检测到用户从不触摸到触摸按钮)-OnPressOut(检测到用户释放按钮或将手指移到其他位置)

But I want to detect when the user is already touching the screen elsewhere, and then drags their finger over the button. 但是我想检测用户何时已经在其他地方触摸屏幕,然后将手指拖到按钮上。

You can use the PanResponder API to have fine-grained control over touches and gestures. 您可以使用PanResponder API对触摸和手势进行细粒度的控制。 Create PanHandlers and attach them to the View you want to detect touches on. 创建PanHandlers并将其附加到要检测触摸的View

For your use case of detecting drag, you can use the onPanResponderMove 对于检测拖动的用例,可以使用onPanResponderMove

onPanResponderMove: (evt, gestureState) => {
    // The most recent move distance is gestureState.move{X,Y}
    // The accumulated gesture distance since becoming responder is
    // gestureState.d{x,y}
  }

Use dx and dy to get the distance dragged on X and Y axes. 使用dxdy获取在X和Y轴上拖动的距离。

Here's the documentation on PanResponder 这是PanResponder上的文档

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在本机反应中检测textInput外部的触摸 - How to detect touch outside textInput in react native 如何在本机反应中同时启用多个按钮的触摸? - How do I enable touch on multiple buttons simultaneously in react native? 如何在 React-native 中检测外部文本输入触摸 - How to detect outside textInput touch In React-native 反应原生检测触摸开始和结束事件 - React native detect touch start and end event 如何在 react-native 中设置 Alert 元素的样式? - how do I style an Alert element in react-native? 如何在 React Native redux 的 reducer 中向数组添加元素? - How do I add an element to array in reducer of React native redux? React Native FlexBox & Wrap - 如何检测元素是否移动到下一行? - React Native FlexBox & Wrap - how to detect if element moved to next row? 如何在 React Native 的嵌套 Touchable 中传播触摸事件? - How can I propagate touch event in nested Touchable in React Native? 在React Native中使用goBack()时,如何检测语言是否已更改? - How do I detect if a language has been changed when using the goBack() in React Native? 在 React Native 上获得此 position 后,如何检测用户何时获得视图并执行某些操作? - How can I detect when the user gets a View and do something after getting this position on React Native?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM