Question

我使用Pan Responder来检测触摸事件。

我这样做：

onStartShouldSetPanResponder: (e, gestureState) => {
        console.log(gestureState)
        console.log(e)
      },

但是我无法知道用户触摸的位置，因为gestureState.x0始终返回0.与gestureState.Y0相同

任何人都知道如何检测到这一点？

谢谢！

Answer 1

您应该使用onPanResponderStart事件来获取gestureState。试试这个：

this._panResponder = PanResponder.create({
  onStartShouldSetPanResponder:(evt, gestureState) => true,
  onPanResponderStart: (evt, gestureState) => {
    console.log(evt, gestureState)
  }
});

Answer 2

onStartShouldSetPanResponder是一种在视图开始时询问视图是否要成为响应者的方法。

PanResponder中有四种方法来协商谁应该是响应者。

onStartShouldSetPanResponder: (evt, gestureState) => {...},
onStartShouldSetPanResponderCapture: (evt, gestureState) => {...},
onMoveShouldSetPanResponder: (evt, gestureState) => {...},
onMoveShouldSetPanResponderCapture: (evt, gestureState) => {...},

Libraries/Interaction/PanResponder.js#L423对于onStartShouldSetPanResponder，它将在onStartShouldSetResponder函数中被调用。因此，我们可以阅读doc about ShouldSet Handlers来简要了解这四种方法。

nativeEvent

如果此视图成为该触摸的响应者，则应实现以下任何一种方法来获取nativeEvent。

// The View is now responding for touch events. 
onPanResponderGrant: (evt, gestureState) => {}, 
onPanResponderMove: (evt, gestureState) => {}, 
// The end of the touch
onPanResponderRelease: (evt, gestureState) => {}

nativeEvent
- locationX-触摸相对于元素的X位置
- locationY-触摸相对于元素的Y位置
- pageX-触摸相对于根元素的X位置
- pageY-触摸相对于根元素的Y位置

您可以使用page*或location*来获取相对于特定视图的接触点。

代码可能像这样：

  this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onPanResponderGrant: (e, gestureState) => {
         console.log(e.locationX, e.locationY, e.pageX, e.pageY);
      },
  })

  <View
        {...this._panResponder.panHandlers}
      >
  </View>

检测平移响应者触摸坐标

2 个答案: