React Native:如何在Android中获取onTouchStart,onTouchEnd和onTouchMove事件位置(例如X和Y坐标)的手势

时间:2019-04-26 13:47:50

标签: react-native event-handling touch gesture

如何获取onTouchEnd事件的坐标。因此,我可以在显示器上的任意位置触摸或移动图形,然后可以检索其发生位置的X,Y位置。在Android的onTouchEnd中不会触发onResponderRelease,

我已经提供了所有手势响应事件处理程序的示例实现,但在我的View中已将其中的大多数注释掉,只是提供了基本功能:订阅所有触摸和移动事件

伪代码如下所示:

<View
        style={this.props.style}
        ref={this._saveRef}
        onStartShouldSetResponder={(event) => {
          return this.handleDoubleTap({nativeEvent: 
          event.nativeEvent});
        }}
        onResponderGrant={this._onTouchStart}
        onResponderMove={this._onTouchMove}
        onResponderRelease={this._onTouchEnd}
        onResponderTerminate={this._onTouchEnd} // When 
        onResponderRelease can't call by some reason
      >
        {this.props.children}
 </View>

Responder事件处理程序方法:

    if (this.isDoubleTap) {
      return false;
    }
    this.context.setScroll && this.context.setScroll(false);
    const currentTouchTimeStamp = Date.now();
    this._prevTouchInfo = {
      prevTouchX: nativeEvent.pageX,
      prevTouchY: nativeEvent.pageY,
      prevTouchTimeStamp: currentTouchTimeStamp
    };
    this.props.onStart(nativeEvent);
  };

  _onTouchMove = ({nativeEvent}) => {
    if (nativeEvent.touches.length <= 1) {
      if (this.isDoubleTap) {
        return false;
      }
      const self = this;
      const gesture = {
        x0: this._prevTouchInfo.prevTouchX,
        x1: nativeEvent.pageX,
        y0: this._prevTouchInfo.prevTouchY,
        y1: nativeEvent.pageY,
        dx: nativeEvent.pageX - this._prevTouchInfo.prevTouchX,
        dy: nativeEvent.pageY - this._prevTouchInfo.prevTouchY
      };
      InteractionManager.runAfterInteractions(function () {
        self.props.onMove(nativeEvent, gesture);
      });
    }
  };

  _onTouchEnd = ({nativeEvent}) => {
      nativeEvent.touches.length === 0 && this.context.setScroll && this.context.setScroll(true);
    this.props.onEnd(nativeEvent);
  };
}

我正在用React native开发一个应用程序。实际上,当我触摸到View上的特定位置时,获取相应的x和y坐标。应用程序用户界面如下所示:

如果这仍然不足以支持android功能(例如,如果您需要多点触控信息),请参阅PanResponde

0 个答案:

没有答案