Radio button in React Native, creati con Pressable
Guida ai radio button in React Native
Radio button in React Native: gruppo accessibile, senza librerie | We.Inc
React Native non ha un componente radio. Crea un radio group accessibile con Pressable usando accessibilityRole radio e accessibilityState checked. Anteprima dal vivo e codice.
Il core di React Native non ha un componente radio button; il suo elenco di controlli dell'interfaccia contiene solo Button e Switch. Creane uno con Pressable: disegna un cerchio esterno e un punto interno, tieni il valore selezionato nel genitore e dai a ogni opzione accessibilityRole="radio" più accessibilityState={{ checked }}. Racchiudi l'insieme in una View con accessibilityRole="radiogroup".
Props di accessibilità per un radio group
Elemento
Prop
Valore
View contenitore
accessibilityRole
"radiogroup"
Ogni opzione
accessibilityRole
"radio"
Ogni opzione
accessibilityState
{ checked: true o false }
Opzione disattivata
accessibilityState
{ disabled: true }, più la prop disabled di Pressable
Alternativa più recente
role / aria-checked
role="radio" con aria-checked; role prevale su accessibilityRole
Qui sotto c'è una versione web dello stesso gruppo: usa i ruoli ARIA corrispondenti, quindi i tasti freccia spostano la scelta come in un gruppo radio del browser. Sotto, il pannello mostra le props che ogni opzione avrebbe in React Native per la selezione attuale, così vedi cosa viene comunicato a uno screen reader.
Il genitore tiene un valore nello state; ogni opzione si confronta con esso.
Premere un'opzione chiama onChange con il suo valore, il che deseleziona automaticamente le altre.
Ogni Pressable si presenta come radio e comunica checked tramite accessibilityState.
La View contenitore è marcata come radiogroup ed etichettata con la domanda.
Rendi premibile l'intera riga, etichetta compresa, non solo il piccolo cerchio.
Aggiungi hitSlop o padding così ogni area di tocco è comoda per il pollice.
Usa il flag pressed della funzione style per dare un feedback immediato prima che lo state si aggiorni.
Preseleziona un valore predefinito sensato solo quando una risposta è davvero sicura; altrimenti lascia il gruppo vuoto e valida.
Quando le scelte sono più di sette circa, un dropdown di solito si legge meglio di una colonna di cerchi.
Domande frequenti
Esiste un componente RadioButton in React Native?
No. La pagina ufficiale dei componenti elenca Button e Switch come unici controlli dell'interfaccia, quindi i radio arrivano dal tuo codice con Pressable o da un UI kit che installi.
Come fa uno screen reader a sapere che il mio cerchio è un radio button?
Imposta accessibilityRole="radio" sul Pressable e accessibilityState={{ checked: isSelected }}. La documentazione descrive il ruolo radio come la rappresentazione di un radio button e radiogroup come un gruppo di questi.
Dovrei usare invece role e aria-checked?
Funzionano entrambi. React Native accetta anche role="radio" e aria-checked, e la documentazione dice che role ha la precedenza su accessibilityRole quando sono impostati entrambi. Scegli uno stile e usalo in tutta l'app.
Radio button o Switch?
Uno Switch serve per una singola impostazione acceso/spento che ha effetto subito. I radio servono per scegliere esattamente una tra più opzioni con nome.
Perché costruirlo da te
Un radio group è poco codice: una riga, due cerchi e un confronto. Scriverlo da te significa che corrisponde al tuo design, non aggiunge nulla al bundle e porta esattamente le props di accessibilità che scegli.
Tenere il valore selezionato nel genitore trasforma il gruppo in un componente controllato, così si inserisce nell'oggetto dei valori di un form proprio come un TextInput.
Disegnare il cerchio
Usa una View con larghezza e altezza uguali, un bordo e un borderRadius pari a metà della dimensione per l'anello. Dentro, disegna una View piena più piccola solo quando l'opzione è selezionata.
Mantieni l'anello visibile in entrambi gli stati e cambia solo il punto. Una selezione indicata solo dal colore è difficile da vedere per chi ha il daltonismo.
Codice del radio group
Componente RadioGroup
Solo componenti core. Il genitore passa value e onChange, esattamente come un TextInput controllato.
Usarlo in una schermata
Lo state vive nella schermata, così la scelta può essere validata e inviata con il resto del form.
Spedizione standard
Spedizione express
Ritiro in negozio
Anteprima del radio group
Metodo di consegna
Fai clic su un'opzione o usa i tasti freccia quando il gruppo ha il focus.