Saltar al contenido principal

События нажатия - Кнопки

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

Button​

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

Если эта кнопка не подходит для вашего приложения, вы можете создать свою собственную кнопку с помощью TouchableOpacity или TouchableWithoutFeedback. Для вдохновения посмотрите исходный код этого компонента кнопки. Или взгляните на широкий спектр компонентов кнопок, созданных сообществом.

Props​

onPress​

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

Type
function(PressEvent)

title​

Текст для отображения внутри кнопки. На Android данный заголовок будет преобразован в верхний регистр.

Type
string

Остальные не обязательные свойства смотри здесь

Pressable​

С версии React Native 0.63 представил новый компонент Pressable. Основной компонент, который обнаруживает различные шаги взаимодействия пресса на любом из своих дочерних компонентов. Компонент, который реагирует на касание любого из своих дочерних компонентов.

<Pressable onPress={onPressFunction}>
  <Text>I'm pressable!</Text>
</Pressable>

Touchable компоненты: Button,TouchableWithoutFeedback, TouchableHighlight, TouchableOpacity,TouchableWithoutFeedback

Компоненты Pressable и Touchable очень похожи. Их основные функции одинаковы для создания интерактивного текста / изображения и взаимодействия с пользователем. Давайте сравним их!

Touchable компонент:​

  1. Он включает стили и эффекты, которые не соответствуют взаимодействиям платформы.
  2. Он не поддерживает качественное взаимодействие на разных платформах.

Pressable компонент:​

  1. Он обнаруживает различные типы взаимодействий.
  2. Его API обеспечивает прямой доступ к текущему состоянию взаимодействия.
  3. Его возможности могут быть расширены, включая hover, размытие, фокусировку и многое другое.

Pressable содержит много нового реквизита props и интересных функций, таких как:

  1. delayLongPress: продолжительность в миллисекундах от onPressIn к моменту вызова onLongPress.
  2. Hitlop: устанавливает дополнительное расстояние за пределами элемента, на котором может быть обнаружен пресс.
  3. onLongPress: вызывается, если время после onPressIn длится более 370 миллисекунд.
  4. pressRetentionOffset: Дополнительное расстояние за пределами области просмотра, на котором прикосновение считается нажатием, до срабатывания onPressOut.
  5. android_disableSound (Android): если true, звук системы Android не воспроизводится при нажатии.
  6. android_ripple (Android): включает эффект пульсации Android и настраивает его свойства.

Согласно официальной документации React Native, Pressable предпочтительнее компонентов Touchable. Pressable компонент предлагает более обширный и перспективный способ обработки сенсорного ввода. Компонент Pressable предназначен для замены компонентов Touchable. Пришло время начать использовать компонент Pressable для будущих приложений.

На элементе, обернутом Pressable:

  • onPressIn вызывается при активации пресса.
  • onPressOut вызывается, когда жест нажатия деактивирован.

После нажатия onPressIn произойдет одно из двух:

Человек уберет палец, запустив onPressOut, а затем onPress. Если человек оставляет палец дольше 500 миллисекунд до его удаления, срабатывает onLongPress. onPressOut все равно сработает, когда они уберут палец.

Pressable

Пальцы не самые точные инструменты, и пользователи часто случайно активируют не тот элемент или пропускают область активации. Чтобы помочь, у Pressable есть дополнительный HitRect, который вы можете использовать, чтобы определить, как далеко касание может регистрироваться от обернутого элемента. Прессы могут запускаться в любом месте HitRect.

PressRect позволяет нажатию перемещаться за пределы элемента и его HitRect, сохраняя при этом активацию и имея право на «нажатие» - представьте, как медленно отводите палец от кнопки, на которую вы нажимаете.

Сенсорная область никогда не выходит за границы родительского представления, и Z-индекс родственных представлений всегда имеет приоритет, если касание касается двух перекрывающихся представлений.

Pressable

Пример​

Согласно официальной документации React Native, Pressable предпочтительнее компонентов Touchable. Сжимаемый компонент предлагает более обширный и перспективный способ обработки сенсорного ввода. Компонент Pressable предназначен для замены компонентов Touchable. Пришло время начать использовать компонент Pressable для будущих приложений.

EnglishMoji!

Проблемы?​

Problem

Пишите в Telegram или ВКонтакте, а также подписывайтесь на наши новости

Вопросы​

Как называется базовый компонент кнопки, который должен хорошо отображаться на любой платформе?

  1. Pressable
  2. Touchable
  3. Button

Какой компонент предпочтительнее согласно официальной документации React Native?

  1. Pressable
  2. Touchable
  3. Button

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

  1. Touchable
  2. onPress
  3. press

Done​

Чтобы узнать, насколько хорошо вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в боте Telegram.

EnglishMoji!

Ссылки​

  1. React Native
  2. Pressable vs. Touchable in React Native