Pressable

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Pressable to podstawowy komponent opakowujący, który wykrywa różne etapy interakcji naciskania na dowolne zdefiniowane elementy potomne.

tsx

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

Jak to działa

Na elemencie opakowanym przez Pressable:

• onPressIn wywoływany jest po aktywacji nacisku.

• onPressOut wywoływany jest po dezaktywacji gestu naciskania.

Po naciśnięciu onPressIn nastąpi jedna z dwóch sytuacji:

1. Użytkownik oderwie palec, wywołując onPressOut a następnie onPress.

2. Jeśli użytkownik przytrzyma palec dłużej niż 500 milisekund przed oderwaniem, wywołany zostanie onLongPress. (onPressOut nadal wystąpi po oderwaniu palca.)

Palce nie są precyzyjnymi instrumentami - użytkownicy często przypadkowo aktywują niewłaściwy element lub nie trafiają w obszar aktywacji. Aby temu zaradzić, Pressable oferuje opcjonalny HitRect, który określa zasięg rejestracji dotyku poza opakowanym elementem. Naciśnięcia mogą rozpoczynać się w dowolnym miejscu wewnątrz HitRect.

PressRect pozwala na przesuwanie nacisku poza element i jego HitRect przy utrzymaniu aktywacji - jak w przypadku powolnego odsuwania palca od przycisku, który się trzyma.

uwaga

Obszar dotyku nigdy nie wykracza poza granice widoku nadrzędnego, a widoki rodzeństwa z wyższym Z-index zawsze mają pierwszeństwo przy dotknięciu dwóch nakładających się elementów.

You can set HitRect with hitSlop and set PressRect with pressRetentionOffset.

informacja

Pressable wykorzystuje API Pressability React Native. Szczegóły dotyczące przepływu maszyny stanów i działania znajdziesz w implementacji Pressability.

Przykład

Właściwości

android_disableSound

Android

Gdy true, wyłącza dźwięk systemowy Androida przy naciskaniu.

Type	Default
boolean	false

android_ripple

Android

Włącza efekt fali na Androidzie i konfiguruje jego właściwości.

Type
RippleConfig

children

Elementy potomne lub funkcja przyjmująca wartość logiczną odzwierciedlającą aktualny stan naciśnięcia komponentu.

Type
React Node

unstable_pressDelay

Czas (w milisekundach) oczekiwania po naciśnięciu przed wywołaniem onPressIn.

Type
number

delayLongPress

Czas (w milisekundach) od onPressIn do wywołania onLongPress.

Type	Default
number	500

disabled

Określa, czy zachowanie naciskania jest wyłączone.

Type	Default
boolean	false

hitSlop

Ustawia dodatkowy obszar poza elementem, w którym można wykryć naciśnięcie.

Type
Rect or number

onHoverIn

Wywoływany przy aktywacji najechania, zapewniając wizualną informację zwrotną.

Type
({ nativeEvent: MouseEvent }) => void

onHoverOut

Wywoływany przy dezaktywacji najechania, cofający wizualną informację zwrotną.

Type
({ nativeEvent: MouseEvent }) => void

onLongPress

Wywoływany, jeśli czas po onPressIn przekroczy 500 milisekund. Ten okres można dostosować za pomocą delayLongPress.

Type
({nativeEvent: PressEvent}) => void

onPress

Wywoływany po onPressOut.

Type
({nativeEvent: PressEvent}) => void

onPressIn

Wywoływany natychmiast po rozpoczęciu dotyku, przed onPressOut i onPress.

Type
({nativeEvent: PressEvent}) => void

onPressMove

Wywoływany przy przesuwaniu miejsca nacisku.

Type
({nativeEvent: PressEvent}) => void

onPressOut

Wywoływany po zwolnieniu dotyku.

Type
({nativeEvent: PressEvent}) => void

pressRetentionOffset

Dodatkowa odległość poza tym widokiem, w której dotknięcie jest uznawane za naciśnięcie przed wyzwoleniem onPressOut.

Type	Default
Rect or number	{bottom: 30, left: 20, right: 20, top: 20}

style

Albo style widoku, albo funkcja przyjmująca wartość logiczną określającą czy komponent jest aktualnie wciśnięty i zwracająca style widoku.

Type
View Style or ({ pressed: boolean }) => View Style

testOnly_pressed

Używane wyłącznie do celów dokumentacyjnych lub testowych (np. testy migawkowe).

Type	Default
boolean	false

Definicje Typów

RippleConfig

Konfiguracja efektu falowania dla właściwości android_ripple.

Type
object

Właściwości:

Name	Type	Required	Description
color	color	No	Defines the color of the ripple effect.
borderless	boolean	No	Defines if ripple effect should not include border.
radius	number	No	Defines the radius of the ripple effect.
foreground	boolean	No	Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.