В 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 здесь!