Система обработки жестов

Система обработки жестов управляет жизненным циклом жестов в вашем приложении. Нажатие может пройти через несколько фаз, пока приложение определяет намерение пользователя. Например, приложение должно определить, является ли нажатие прокруткой, свайпом по элементу или нажатием. Это может даже меняться в течение продолжительности нажатия. Также могут быть несколько одновременных нажатий.

Система обработки касаний необходима, чтобы компоненты могли согласовывать эти взаимодействия с касаниями без дополнительного знания о своих родительских или дочерних компонентах.

Рекомендации по использованию

Чтобы ваше приложение работало эффективно, каждое действие должно иметь следующие атрибуты:

• Обратная связь/выделение — покажите пользователю, какой элемент обрабатывает его касание и что произойдет при отпускании жеста.
• Отмена — при выполнении действия пользователь должен иметь возможность прервать его во время касания, убрав палец.

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

TouchableHighlight и Touchable*

Система обработки жестов может быть сложной в использовании. Поэтому мы предоставили абстрактную Touchable реализацию для элементов, которые должны быть «нажимаемыми». Она использует систему обработки жестов и позволяет настраивать взаимодействия с нажатиями декларативно. Используйте TouchableHighlight везде, где вы бы использовали кнопку или ссылку в веб-приложении.

Жизненный цикл обработчика

Элемент может стать обработчиком касаний, реализуя соответствующие методы согласования. Существует два метода для запроса у элемента, хочет ли он стать обработчиком:

• View.props.onStartShouldSetResponder: (evt) => true, — Хочет ли этот элемент стать обработчиком в начале касания?
• View.props.onMoveShouldSetResponder: (evt) => true, — Вызывается при каждом перемещении касания по элементу, когда он не является обработчиком: хочет ли этот элемент «захватить» обработку касания?

Если элемент возвращает true и пытается стать обработчиком, произойдет одно из следующих:

• View.props.onResponderGrant: (evt) => {} — Элемент теперь обрабатывает события касания. Это время, чтобы выделить элемент и показать пользователю, что происходит.
• View.props.onResponderReject: (evt) => {} — В данный момент обработчиком является другой элемент и он не будет его отпускать.

Если элемент является обработчиком, могут быть вызваны следующие обработчики:

• View.props.onResponderMove: (evt) => {} — Пользователь перемещает палец.
• View.props.onResponderRelease: (evt) => {} — Вызывается в конце касания, т.е. «touchUp».
• View.props.onResponderTerminationRequest: (evt) => true — Другой элемент хочет стать обработчиком. Должен ли текущий элемент отпустить обработку? Возврат true разрешает отпустить.
• View.props.onResponderTerminate: (evt) => {} — Обработка была взята у элемента. Может быть взята другими элементами после вызова onResponderTerminationRequest, или может быть взята ОС без запроса (происходит с центром управления/центром уведомлений в iOS).

evt — это синтетическое событие касания со следующим форматом:

• nativeEvent
  • changedTouches — Массив всех событий касания, которые изменились с момента последнего события.
  • identifier — Идентификатор касания.
  • locationX — Положение касания по оси X относительно элемента.
  • locationY — Положение касания по оси Y относительно элемента.
  • pageX — Положение касания по оси X относительно корневого элемента.
  • pageY — Положение касания по оси Y относительно корневого элемента.
  • target — Идентификатор узла элемента, получившего событие касания.
  • timestamp — Идентификатор времени для касания, полезный для расчета скорости.
  • touches — Массив всех текущих касаний на экране.

Обработчики захвата ShouldSet

onStartShouldSetResponder и onMoveShouldSetResponder вызываются с использованием шаблона всплытия, где самый глубокий узел вызывается первым. Это означает, что самый глубокий компонент станет обработчиком, когда несколько элементов вернут true для обработчиков *ShouldSetResponder. Это желательно в большинстве случаев, так как гарантирует, что все элементы управления и кнопки доступны для использования.

Однако иногда родительский элемент хочет убедиться, что он становится обработчиком. Это можно сделать, используя фазу захвата. Перед тем, как система обработки жестов всплывет от самого глубокого компонента, она выполнит фазу захвата, вызвав on*ShouldSetResponderCapture. Поэтому, если родительский элемент хочет предотвратить, чтобы дочерний элемент стал обработчиком при начале касания, у него должен быть обработчик onStartShouldSetResponderCapture, который возвращает true.

• View.props.onStartShouldSetResponderCapture: (evt) => true,
• View.props.onMoveShouldSetResponderCapture: (evt) => true,

PanResponder

Для более сложной интерпретации жестов ознакомьтесь с PanResponder.