Radio buttons in React Native, gebouwd met Pressable
Gids voor radio buttons in React Native
Radio button in React Native: toegankelijke groep, geen library | We.Inc
React Native heeft geen radiocomponent. Bouw een toegankelijke radiogroep met Pressable, accessibilityRole radio en accessibilityState checked. Met live voorbeeld en code.
De kern van React Native heeft geen radio button-component; de lijst met interface-elementen bevat alleen Button en Switch. Bouw er zelf een met Pressable: teken een buitenste cirkel en een binnenste stip, bewaar de gekozen waarde in de parent en geef elke optie accessibilityRole="radio" plus accessibilityState={{ checked }}. Wikkel de set in een View met accessibilityRole="radiogroup".
Toegankelijkheidsprops voor een radiogroep
Element
Prop
Waarde
Omhullende View
accessibilityRole
"radiogroup"
Elke optie
accessibilityRole
"radio"
Elke optie
accessibilityState
{ checked: true of false }
Uitgeschakelde optie
accessibilityState
{ disabled: true }, plus de disabled-prop van Pressable
Nieuwer alternatief
role / aria-checked
role="radio" met aria-checked; role gaat voor accessibilityRole
Hieronder staat een webversie van dezelfde groep: die gebruikt de bijbehorende ARIA-rollen, zodat de pijltjestoetsen de keuze verplaatsen zoals bij een radioset in de browser. Daaronder toont het paneel de props die elke optie in React Native zou krijgen voor de huidige selectie, zodat u ziet wat een schermlezer te horen krijgt.
De parent bewaart één waarde in state; elke optie vergelijkt zichzelf daarmee.
Een druk op een optie roept onChange aan met de eigen waarde, waardoor de andere vanzelf worden gedeselecteerd.
Elke Pressable meldt zich als radio en geeft checked door via accessibilityState.
De omhullende View is gemarkeerd als radiogroup en krijgt de vraag als label.
Maak de hele rij aanklikbaar, inclusief het label, niet alleen het kleine cirkeltje.
Voeg hitSlop of padding toe zodat elk doel prettig is voor een duim.
Gebruik de pressed-vlag van de stijlfunctie voor directe feedback voordat de state wordt bijgewerkt.
Kies alleen vooraf een standaardwaarde als één antwoord echt veilig is; laat de groep anders leeg en valideer.
Bij meer dan ongeveer zeven keuzes leest een dropdown meestal beter dan een kolom cirkels.
Veelgestelde vragen
Bestaat er een RadioButton-component in React Native?
Nee. De officiële componentenpagina noemt Button en Switch als de enige interface-elementen, dus radio's komen uit uw eigen Pressable-code of uit een UI-kit die u installeert.
Hoe weet een schermlezer dat mijn cirkel een radio button is?
Zet accessibilityRole="radio" op de Pressable en accessibilityState={{ checked: isSelected }}. Volgens de documentatie staat de rol radio voor een radio button en radiogroup voor een groep daarvan.
Moet ik in plaats daarvan role en aria-checked gebruiken?
Beide werken. React Native accepteert ook role="radio" en aria-checked, en volgens de documentatie gaat role voor accessibilityRole als beide zijn ingesteld. Kies één stijl en gebruik die in de hele app.
Radio buttons of een Switch?
Een Switch is voor één aan/uit-instelling die meteen ingaat. Radio's zijn om precies één van meerdere benoemde opties te kiezen.
Waarom zelf bouwen
Een radiogroep is weinig code: een rij, twee cirkels en een vergelijking. Als u die zelf schrijft, past hij bij uw ontwerp, voegt hij niets toe aan de bundle en heeft hij precies de toegankelijkheidsprops die u kiest.
Door de gekozen waarde in de parent te bewaren wordt de groep een controlled component, zodat hij net als een TextInput in het values-object van een formulier past.
De cirkel tekenen
Gebruik voor de ring een View met gelijke breedte en hoogte, een border en een borderRadius van de helft van de grootte. Render daarbinnen alleen een kleinere gevulde View als de optie geselecteerd is.
Houd de ring in beide toestanden zichtbaar en verander alleen de stip. Een selectie die alleen met kleur wordt getoond, is slecht te zien voor mensen met kleurenblindheid.
Code voor de radiogroep
RadioGroup-component
Alleen kerncomponenten. De parent geeft value en onChange door, precies zoals bij een controlled TextInput.
Gebruik in een scherm
De state staat in het scherm, zodat de keuze samen met de rest van een formulier kan worden gevalideerd en verzonden.
Standaardverzending
Expresverzending
Ophalen in de winkel
Voorbeeld van de radiogroep
Bezorgmethode
Klik op een optie of gebruik de pijltjestoetsen zodra de groep focus heeft.