Перейти к содержанию

Pressable

Pressable - это обертка компонента Core Component, которая может обнаруживать различные стадии взаимодействия с нажатием на любой из своих определенных дочерних компонентов.

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

Как это работает

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

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

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

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

Diagram of the onPress events in sequence.

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

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

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

Diagram of HitRect and PressRect and how they work.

Pressable использует API Pressability от React Native. Для получения дополнительной информации о том, как работает машина состояний Pressability, ознакомьтесь с реализацией для Pressability.

Пример

Пропсы

android_disableSound

Если значение true, то при нажатии не воспроизводится системный звук Android.

Type Default
boolean false

android_ripple

Включает эффект пульсации Android и настраивает его свойства.

Type
RippleConfig

children

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

Type
React Node

unstable_pressDelay

Длительность (в миллисекундах) ожидания после нажатия кнопки вниз перед вызовом onPressIn.

Type
number

delayLongPress

Длительность (в миллисекундах) с момента onPressIn до вызова onLongPress.

Type Default
number 500

disabled

Отключено ли поведение нажатия.

Тип По умолчанию
boolean false

hitSlop

Устанавливает дополнительное расстояние за пределами элемента, на котором может быть обнаружено нажатие.

Type
Rect или число

onHoverIn

Вызывается при активации hover для обеспечения визуальной обратной связи.

Type
({ nativeEvent: MouseEvent }) => void

onHoverOut

Вызывается при отключении наведения для отмены визуальной обратной связи.

Type
( { nativeEvent: MouseEvent }) => void

onLongPress

Вызывается, если время после onPressIn длится более 500 миллисекунд. Этот период времени может быть настроен с помощью параметра delayLongPress.

Type
({nativeEvent: PressEvent}) => void

onPress

Вызывается после onPressOut.

Type
({nativeEvent: PressEvent}) => void

onPressIn

Вызывается непосредственно при нажатии, перед onPressOut и onPress.

Type
({nativeEvent: PressEvent}) => void

onPressOut

Вызывается, когда нажатие отпускается.

Type
({nativeEvent: PressEvent}) => void

pressRetentionOffset

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

Type Default
Rect или число {bottom: 30, left: 20, right: 20, top: 20}

style

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

Type
View Style

testOnly_pressed

Используется только для документации или тестирования (например, тестирования моментальных снимков).

Type Default
boolean false

Определения типа

RippleConfig

Конфигурация Ripple-эффекта для свойства android_ripple.

Type
object

Свойства:

Name Type Required Description
color color No Определяет цвет эффекта пульсации.
borderless boolean No Определяет, должен ли эффект пульсации не включать границы.
radius number No Определяет радиус эффекта пульсации.
foreground boolean No Установите значение true, чтобы добавить эффект пульсации на передний план представления, а не на фон. Это полезно, если одно из дочерних представлений имеет собственный фон или, например, отображает изображения, и вы не хотите, чтобы рябь была закрыта ими.

Комментарии