React Native: как получить жесты на позициях событий onTouchStart, onTouchEnd и onTouchMove (например, координаты X и Y) в Android - PullRequest
Новая
       53

React Native: как получить жесты на позициях событий onTouchStart, onTouchEnd и onTouchMove (например, координаты X и Y) в Android

0 голосов
/ 26 апреля 2019

Как мне получить координаты моего события onTouchEnd. Таким образом, я касаюсь или перемещаю фигуру в любом месте экрана и могу получить координаты X, Y того места, где это произошло. onResponderRelease не запускается в onTouchEnd на Android,

Я включил примеры реализаций для всех обработчиков событий ответа на жест, но закомментировал большинство из них в моем представлении, чтобы просто предоставить базовую функциональность: подписка на все события касания и перемещения

псевдокод будет выглядеть так: 

<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>

Методы обработчика событий респондента: 

    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. На самом деле, когда я прикасаюсь к представлению «Особое положение на экране», я получаю соответствующие координаты x и y. Интерфейс приложения будет выглядеть так:

Если этой функции по-прежнему недостаточно для Android (например, если вам нужна информация о мультитач), обратитесь к PanResponde

...