Przejdź do treści głównej
Wersja: 0.80

Poprawa doświadczeń użytkownika

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 →

Konfigurowanie pól tekstowych​

Wprowadzanie tekstu na ekranie dotykowym to wyzwanie - mały ekran, wirtualna klawiatura. Ale w zależności od rodzaju potrzebnych danych, możesz to ułatwić odpowiednio konfigurując pola tekstowe:

  • Automatyczne ustawianie fokusu na pierwszym polu

  • Użyj tekstu zastępczego jako przykładu oczekiwanego formatu danych

  • Włącz lub wyłącz automatyczne kapitalizowanie i poprawianie błędów

  • Wybierz typ klawiatury (np. email, numeryczna)

  • Upewnij się, że przycisk Return przenosi fokus do następnego pola lub wysyła formularz

Więcej opcji konfiguracyjnych znajdziesz w dokumentacji TextInput.

Zarządzanie układem przy widocznej klawiaturze​

Wirtualna klawiatura zajmuje prawie połowę ekranu. Jeśli masz interaktywne elementy, które mogą zostać zasłonięte przez klawiaturę, upewnij się, że pozostaną dostępne dzięki użyciu komponentu KeyboardAvoidingView.

Powiększanie obszarów dotykowych​

Na telefonach trudno jest precyzyjnie trafiać w przyciski. Upewnij się, że wszystkie interaktywne elementy mają rozmiar co najmniej 44x44 pikseli. Możesz to osiągnąć pozostawiając odpowiednią przestrzeń wokół elementu - przydatne będą style padding, minWidth i minHeight. Alternatywnie możesz użyć właściwości hitSlop aby powiększyć obszar interakcji bez wpływu na układ. Oto przykład:

Korzystanie z efektu Ripple na Androida​

Android w wersji API 21+ wykorzystuje efekt fali (ripple) z Material Design, aby zapewnić użytkownikowi informację zwrotną przy dotknięciu interaktywnego obszaru. React Native udostępnia tę funkcję poprzez komponent TouchableNativeFeedback. Użycie tego efektu dotykowego zamiast zmiany przezroczystości lub podświetlenia często sprawia, że twoja aplikacja lepiej pasuje do platformy. Pamiętaj jednak, że efekt nie działa na iOS ani na Androidzie w wersjach < API 21, więc na iOS będziesz musiał użyć innych komponentów Touchable. Możesz użyć biblioteki takiej jak react-native-platform-touchable aby automatycznie obsłużyć różnice między platformami.

Blokada orientacji ekranu​

Wiele orientacji ekranu powinno działać poprawnie domyślnie, chyba że używasz API Dimensions bez obsługi zmian orientacji. Jeśli nie chcesz obsługiwać wielu orientacji ekranu, możesz zablokować orientację na pionową (portrait) lub poziomą (landscape).

W iOS: w zakładce General i sekcji Deployment Info w Xcode włącz obsługiwane orientacje urządzenia (upewnij się, że wybrałeś iPhone z menu Devices przed wprowadzeniem zmian). W Androidzie otwórz plik AndroidManifest.xml i wewnątrz elementu activity dodaj 'android:screenOrientation="portrait"' aby zablokować orientację pionową lub 'android:screenOrientation="landscape"' aby zablokować poziomą.

Dowiedz się więcej

Material Design i Human Interface Guidelines to doskonałe źródła wiedzy o projektowaniu na platformy mobilne.