Radio buttony w React Native zbudowane z Pressable
Poradnik radio buttonów w React Native
React Native radio button: dostępna grupa bez biblioteki | We.Inc
React Native nie ma komponentu radio. Zbuduj dostępną grupę radio z Pressable z accessibilityRole radio i accessibilityState checked. Podgląd na żywo i kod.
Rdzeń React Native nie ma komponentu radio button, a jego lista kontrolek interfejsu zawiera tylko Button i Switch. Zbuduj go z Pressable: narysuj zewnętrzne kółko i wewnętrzną kropkę, trzymaj wybraną wartość w rodzicu i nadaj każdej opcji accessibilityRole="radio" oraz accessibilityState={{ checked }}. Owiń zestaw w View z accessibilityRole="radiogroup".
Propsy dostępności dla grupy radio
Element
Props
Wartość
Owijający View
accessibilityRole
"radiogroup"
Każda opcja
accessibilityRole
"radio"
Każda opcja
accessibilityState
{ checked: true lub false }
Wyłączona opcja
accessibilityState
{ disabled: true }, plus props disabled komponentu Pressable
Nowsza alternatywa
role / aria-checked
role="radio" z aria-checked, role wygrywa z accessibilityRole
Poniżej jest webowa wersja tej samej grupy: używa odpowiadających ról ARIA, więc klawisze strzałek zmieniają wybór tak, jak w zestawie radio w przeglądarce. Pod nią panel wypisuje propsy, które każda opcja miałaby w React Native przy bieżącym wyborze, abyś widział, co słyszy czytnik ekranu.
Rodzic trzyma w stanie jedną wartość, a każda opcja porównuje się z nią.
Naciśnięcie opcji wywołuje onChange z jej własną wartością, co automatycznie odznacza pozostałe.
Każdy Pressable przedstawia się jako radio i zgłasza zaznaczenie przez accessibilityState.
Owijający View jest oznaczony jako radiogroup i opisany treścią pytania.
Niech cały wiersz da się nacisnąć, łącznie z etykietą, a nie tylko małe kółko.
Dodaj hitSlop lub padding, aby każdy cel był wygodny dla kciuka.
Użyj flagi pressed z funkcji style, aby dać natychmiastową informację zwrotną, zanim zaktualizuje się stan.
Zaznaczaj rozsądną wartość domyślną tylko wtedy, gdy jedna odpowiedź jest naprawdę bezpieczna. W przeciwnym razie zostaw grupę pustą i waliduj.
Gdy wyborów jest więcej niż mniej więcej siedem, dropdown zwykle czyta się lepiej niż kolumnę kółek.
Najczęściej zadawane pytania
Czy w React Native jest komponent RadioButton?
Nie. Oficjalna strona komponentów wymienia Button i Switch jako jedyne kontrolki interfejsu, więc radio pochodzą z Twojego własnego kodu z Pressable albo z instalowanego zestawu UI.
Skąd czytnik ekranu wie, że moje kółko to radio button?
Ustaw accessibilityRole="radio" na Pressable oraz accessibilityState={{ checked: isSelected }}. Dokumentacja opisuje rolę radio jako przycisk radio, a radiogroup jako ich grupę.
Czy zamiast tego używać role i aria-checked?
Działa jedno i drugie. React Native przyjmuje też role="radio" i aria-checked, a dokumentacja mówi, że role ma pierwszeństwo przed accessibilityRole, gdy ustawione są oba. Wybierz jeden styl i stosuj go w całej aplikacji.
Radio buttony czy Switch?
Switch służy do jednego ustawienia włącz i wyłącz, które działa od razu. Radio służą do wyboru dokładnie jednej z kilku nazwanych opcji.
Dlaczego budować go samemu
Grupa radio to niewiele kodu: wiersz, dwa kółka i porównanie. Napisanie jej samemu oznacza, że pasuje do Twojego projektu, nic nie dodaje do bundla i ma dokładnie te propsy dostępności, które wybierzesz.
Trzymanie wybranej wartości w rodzicu zamienia grupę w komponent kontrolowany, więc pasuje do obiektu wartości formularza tak samo jak TextInput.
Rysowanie kółka
Na pierścień użyj View o równej szerokości i wysokości, z obramowaniem i borderRadius równym połowie rozmiaru. W środku renderuj mniejszy, wypełniony View tylko wtedy, gdy opcja jest wybrana.
Zostaw pierścień widoczny w obu stanach i zmieniaj tylko kropkę. Wybór pokazany wyłącznie kolorem jest trudny do zauważenia dla osób z daltonizmem.
Kod grupy radio
Komponent RadioGroup
Tylko podstawowe komponenty. Rodzic przekazuje value i onChange, dokładnie jak w kontrolowanym TextInput.
Użycie na ekranie
Stan żyje na ekranie, więc wybór można zwalidować i wysłać razem z resztą formularza.
Wysyłka standardowa
Wysyłka ekspresowa
Odbiór w sklepie
Podgląd grupy radio
Sposób dostawy
Kliknij opcję albo użyj klawiszy strzałek, gdy grupa ma fokus.