Obsługa dotyków

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 →

Użytkownicy wchodzą w interakcję z aplikacjami mobilnymi głównie za pomocą dotyku. Mogą wykorzystywać kombinacje gestów takich jak stuknięcie w przycisk, przewijanie listy czy powiększanie mapy. React Native dostarcza komponenty do obsługi wszystkich typowych gestów oraz kompleksowy system obsługi gestów umożliwiający rozpoznawanie zaawansowanych gestów, ale podstawowym komponentem, który prawdopodobnie najbardziej cię zainteresuje, jest podstawowy przycisk (Button).

Wyświetlanie podstawowego przycisku

Komponent Button zapewnia podstawowy przycisk renderowany poprawnie na wszystkich platformach. Minimalny przykład wyświetlenia przycisku wygląda następująco:

tsx

<Button
  onPress={() => {
    console.log('You tapped the button!');
  }}
  title="Press Me"
/>

Spowoduje to wyrenderowanie niebieskiej etykiety na iOS oraz niebieskiego zaokrąglonego prostokąta z jasnym tekstem na Androidzie. Naciśnięcie przycisku wywoła funkcję "onPress", która w tym przypadku wyświetla okno alertu. Jeśli chcesz, możesz określić właściwość "color", aby zmienić kolor przycisku.

Poeksperymentuj z komponentem Button korzystając z poniższego przykładu. Możesz wybrać platformę, na której podglądasz aplikację, klikając przełącznik w prawym dolnym rogu, a następnie "Tap to Play", aby zobaczyć podgląd aplikacji.

Komponenty dotykowe (Touchables)

Jeśli podstawowy przycisk nie pasuje do twojej aplikacji, możesz zbudować własny przycisk używając dowolnego z komponentów "Touchable" dostarczonych przez React Native. Te komponenty umożliwiają przechwytywanie gestów dotykowych i wyświetlanie informacji zwrotnej po rozpoznaniu gestu. Jednak nie zapewniają one domyślnego stylowania, więc będziesz musiał trochę popracować, aby dobrze wyglądały w twojej aplikacji.

Wybór komponentu "Touchable" zależy od rodzaju informacji zwrotnej, jaką chcesz zapewnić:

• Ogólnie rzecz biorąc, TouchableHighlight możesz używać wszędzie tam, gdzie na stronie internetowej użyłbyś przycisku lub linku. Tło widoku zostanie przyciemnione, gdy użytkownik przytrzyma przycisk.

• Na platformie Android możesz rozważyć użycie TouchableNativeFeedback do wyświetlania falistych efektów reakcji na dotyk.

• TouchableOpacity może być używany do zmniejszenia krycia przycisku, pozwalając widzieć tło podczas przytrzymywania.

• Jeśli potrzebujesz obsłużyć gest dotknięcia bez wyświetlania informacji zwrotnej, użyj TouchableWithoutFeedback.

W niektórych przypadkach możesz chcieć wykryć, gdy użytkownik przytrzyma widok przez określony czas. Takie długie naciśnięcia można obsłużyć, przekazując funkcję do właściwości onLongPress dowolnego komponentu "Touchable".

Zobaczmy je wszystkie w akcji:

Przewijanie i przesuwanie

Do powszechnych gestów na urządzeniach z ekranem dotykowym należą przesunięcia (swipes) i przeciągnięcia (pans). Umożliwiają one użytkownikowi przewijanie listy elementów lub przemieszczanie się między stronami treści. W tym celu sprawdź podstawowy komponent ScrollView.

Znane problemy

• react-native#29308: Obszar dotyku nigdy nie wykracza poza granice widoku nadrzędnego, a na Androidzie nie jest obsługiwany ujemny margines.