ios - 捕获全局手势(如何构建 AppStore "BUY"按钮)

Question

我想在我的应用程序中有一个类似 AppStore 的购买流程。

第一次触摸时，购买按钮会发生变化，要求用户确认。

如果用户触摸屏幕上的其他任何地方，购买按钮将恢复正常。常规的触摸被拦截了。

我不确定在 react-native 中做 (2) 的最佳方法是什么。

我可以使用响应系统(即 PanResponder)拦截整个屏幕的触摸。但是，触摸永远不会到达购买按钮( TouchableWithHighlight 控件)。

触摸事件包含被触摸元素的节点id，可以与想要的元素进行比较，但这非常困难，因为可触摸区域可能包含多个节点。

这怎么可能接近？

Answer 1

我目前已经确定了这种方法:

全局拦截组件可以设置为“阻止除此 View 之外的手势”。

计算该 View 的屏幕坐标。

此屏幕矩形内的触摸通过。

这工作得很好。由于在拦截模式下不需要滚动，我们不必考虑屏幕上的目标位置发生变化。但是，动画可能有问题。

var EventEmitter = require('events').EventEmitter
UIManager = require('NativeModules').UIManager;

var CaptureAll = React.createClass({
  _panResponder: {},
  _isBlocking: false,
  _allowedRect: null,

  componentWillMount: function() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponderCapture: this._handleStartShouldSetPanResponderCapture,
      onMoveShouldSetPanResponderCapture: this._handleMoveShouldSetPanResponderCapture,
      onPanResponderGrant: this._handlePanResponderGrant,
      onPanResponderMove: this._handlePanResponderMove,
      onPanResponderRelease: this._handlePanResponderEnd,
      onPanResponderTerminate: this._handlePanResponderEnd,
    });

    this.eventEmitter = new EventEmitter();
  },

  render: function() {
    return (
      <View style={this.props.style} {...this._panResponder.panHandlers}>{this.props.children}</View>
    );
  },

  _handleStartShouldSetPanResponderCapture: function(e: Object, gestureState: Object): boolean {
    // If we are not blocking, do not intercept
    if (!this.isBlocking)
      return false;

    // Let the touch through if it is in the allowed rect
    if (this.allowedRect && e.touchHistory.indexOfSingleActiveTouch) {
      var touch = e.touchHistory.touchBank[e.touchHistory.indexOfSingleActiveTouch];
      var r = this.allowedRect;
      if (touch.currentPageX >= r.x && touch.currentPageX <= (r.x + r.w)
        && touch.currentPageY >= r.y && touch.currentPageY <= (r.y + r.h)
      )
        return false;
    }

    // Intercept and block this touch
    this.eventEmitter.emit('block', { panEvent: e });
    return true;
  },

  _handleMoveShouldSetPanResponderCapture: function(e: Object, gestureState: Object): boolean {
    return this._handleStartShouldSetPanResponderCapture(e, gestureState);
  },

  _handlePanResponderGrant: function(e: Object, gestureState: Object) {},
  _handlePanResponderMove: function(e: Object, gestureState: Object) {},
  _handlePanResponderEnd: function(e: Object, gestureState: Object) {},

  blockExceptRect: function(x, y, w, h) {
    this.isBlocking = true;
    this.allowedRect = {x, y, w, h}
  },

  blockExceptComponent: function(component) {
    // Do not wait for the callback to block
    this.isBlocking = true;
    this.allowedRect = null;

    let handle = React.findNodeHandle(component);
    UIManager.measure(
      handle,
      (x, y, w, h, px, py) => {
        this.blockExceptRect(px, py, w, h);
      });
  },

  unblock: function() {
    this.isBlocking = false;
    this.allowedRect = null;
  },

  addListener: function(callback) {
    this.eventEmitter.addListener('block', callback);
  }
});