В React Native есть множество способов обнаружить касание, но как определить двойное касание? Обнаружение двойного касания имеет множество применений - например, лайкание изображения, переход к началу прокрутки вкладки и т. Д. Давайте настроим обнаружение двойного касания.

Мы начнем с простого приложения, которое позволяет нам ставить лайки по картинкам.

Сначала создайте приложение

create-react-native-app IGStyleDoubleTap

Затем настройте структуру нашего приложения.

cd IGStyleDoubleTap
mkdir src
mkdir src/images
touch src/index.js

Затем вам нужно загрузить эти значки-сердечки и поместить их в src/images каталог.

Затем вставьте следующее в src/index.js.

Наконец, замените App.js следующим

При этом вы можете yarn run ios или yarn run android, и вы можете лайкнуть картинку, нажав на значок сердца под картинкой.

После завершения настройки мы можем приступить к реализации.

Обнаружение двойного касания

Этот код вдохновлен сутью пользователя Github brunotavares.

Сначала мы обернем наш Image компонент в TouchableWithoutFeedback, что позволит нам обнаруживать касания.

В нашем компоненте мы будем отслеживать последнее нажатие в переменной с именем lastTap. Мы не используем указанный здесь компонент, так как он никоим образом не влияет на рендеринг. По умолчанию может быть установлено значение null.

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

Мы будем использовать Date.now() для сравнения значений. Date.now() возвращает миллисекунды, прошедшие с 1 января 1970 года, 00:00:00 UTC, что будет работать идеально, поскольку наша задержка будет основываться на миллисекундах.

После успешного двойного нажатия мы вызовем функцию this.toggleLike(), в противном случае мы обновим значение this.lastTap, чтобы оно стало результатом Date.now().

Затем нам нужно обернуть наш Image компонент в TouchableWithoutFeedback (не забудьте импортировать его из React Native!), Чтобы обнаружить касания.

Это приводит к следующему

Реорганизация функциональности двойного нажатия на собственный компонент

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

Сначала создайте новый файл для компонента.

touch src/DoubleTap.js

И вставьте следующее, чтобы начать

Затем мы можем продолжить и начать перенос логики с src/index.js. Первый render.

Единственное отличие от предыдущего в том, что теперь мы рендерим this.props.children внутри TouchableWithoutFeedback, поэтому мы можем передать ему любой компонент.

Теперь давайте настроим handleDoubleTap.

Здесь вы можете заметить два отличия. Во-первых, вместо того, чтобы устанавливать переменную состояния для нашей задержки, мы получаем к ней доступ через this.props.delay. Таким образом, потребитель компонента может переопределить его. Во-вторых, мы вызываем this.props.onDoubleTap(), чтобы потребитель мог передать свою функцию компоненту.

Наконец, мы установим некоторые свойства по умолчанию, чтобы наш компонент работал независимо от того, передает ли пользователь свойства.

Теперь давайте продолжим и воспользуемся новым компонентом. В src/index.js.

И вот оно! Как создать двойное нажатие в стиле Instagram, которое понравится, а также как преобразовать код в повторно используемые компоненты.

Полный исходный код доступен на Github.

Вам понравился этот урок? Ознакомьтесь с другими руководствами по React Native здесь!