Collapsible e accordion in React Native, senza librerie | We.Inc
Comprimi ed espandi sezioni in React Native con LayoutAnimation, ruota la freccia con Animated e indica accessibilityState expanded. Anteprima di un accordion dal vivo.
Per comprimere una sezione in React Native, tieni un flag open nello stato e renderizza il corpo solo finché è true. Chiama LayoutAnimation.configureNext prima di cambiare il flag e le view circostanti scivolano nelle nuove posizioni. Dai al Pressable dell'intestazione accessibilityRole="button" e accessibilityState={{ expanded }} così gli screen reader annunciano se è aperta.
Due modi per animare un collapsible
Metodo
Anima
Ideale per
LayoutAnimation.configureNext
Il prossimo cambio di layout di ogni view
Corpi di altezza sconosciuta, liste di sezioni
Animated.timing con useNativeDriver
Proprietà non di layout come transform e opacity
La rotazione della freccia e le dissolvenze
Animated con height
L'altezza, sul thread JS
Pannelli ad altezza fissa quando serve un controllo preciso
L'accordion qui sotto è il gemello web del codice React Native di questa pagina: stessa forma dello stato, stesso flag expanded su ogni intestazione. Passa dal lasciare aperte più sezioni al consentirne solo una, poi copia la versione adatta alla tua schermata.
Lo stato contiene gli id delle sezioni aperte, oppure un singolo id quando ne può essere aperta solo una.
Premere un'intestazione chiama LayoutAnimation.configureNext con un preset, poi aggiorna lo stato.
Al passaggio di layout successivo il corpo viene montato o smontato e le view vicine si animano in posizione.
Un valore Animated ruota la freccia con il native driver, dato che la rotazione è un transform.
accessibilityState expanded sull'intestazione dice alle tecnologie assistive quali sezioni sono aperte.
Su Android la documentazione chiede di chiamare UIManager.setLayoutAnimationEnabledExperimental(true) quando esiste; proteggi la chiamata con un controllo di esistenza.
Rendi premibile l'intera riga dell'intestazione, non solo l'icona della freccia.
Smontare il corpo è più semplice che animarne l'altezza, e tiene il contenuto nascosto fuori dall'albero di accessibilità.
Non animare l'altezza con useNativeDriver: la documentazione React Native dice che il native driver anima solo proprietà non di layout, come transform e opacity.
Se il contenuto interno deve mantenere il proprio stato quando è chiuso, nascondilo con display: "none" invece di smontarlo.
Domande frequenti
Come animo una view collapsible in React Native?
Chiama LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) subito prima del cambio di stato che mostra o nasconde il corpo. Il preset easeInEaseOut dura 300 millisecondi.
Perché LayoutAnimation non fa nulla su Android?
La pagina di LayoutAnimation dice che Android richiede UIManager.setLayoutAnimationEnabledExperimental(true), chiamato solo se quella funzione esiste. Eseguilo una volta all'avvio dell'app, prima della prima modifica animata.
Posso animare l'altezza con Animated e il native driver?
No. La documentazione React Native limita il native driver alle proprietà non di layout come transform e opacity, quindi valori di layout come height sono esclusi. Anima l'altezza senza il native driver, oppure usa LayoutAnimation.
Come fanno gli screen reader a sapere che una sezione è aperta?
Imposta accessibilityState={{ expanded: isOpen }} sull'intestazione, oppure la prop aria-expanded. La documentazione descrive expanded come l'indicazione se un elemento espandibile è attualmente espanso o compresso.
Accordion o sezioni indipendenti
Un accordion tiene aperta una sola sezione, adatto a schermate di impostazioni e brevi FAQ in cui il lettore vuole una risposta. Le sezioni indipendenti sono adatte a filtri o dettagli di un ordine, dove confrontare due pannelli aperti è utile.
Entrambi usano lo stesso componente; cambia solo la funzione di toggle. Memorizza un Set di id per le sezioni indipendenti, oppure un singolo id che diventa null quando si preme di nuovo quella aperta.
Mantenere la fluidità
LayoutAnimation configura solo il layout immediatamente successivo, quindi chiamalo nel gestore della pressione, subito prima di setState, ogni volta. Chiamarlo una sola volta al mount non ha effetto sulle pressioni successive.
Corpi molto lunghi possono comunque scattare sui telefoni di fascia bassa. Tieni lazy le liste pesanti dentro una sezione, oppure mostra un'anteprima breve con un link a una schermata completa.
Codice del collapsible
Sezione collapsible con LayoutAnimation e una freccia che ruota
Il corpo viene montato solo quando è aperto. La freccia gira con il native driver perché la rotazione è un transform.
Accordion: una sola sezione aperta alla volta
Un singolo id nello stato. Premere di nuovo la sezione aperta lo imposta a null e la chiude.
Quando verrà spedito il mio ordine?
Gli ordini effettuati prima di mezzogiorno partono in giornata. Ricevi un link di tracciamento via email non appena il pacco viene scansionato.
Posso restituire un articolo?
Gli articoli non usati possono essere resi entro 30 giorni. Avvia il reso dalla schermata dell'ordine e stampa l'etichetta.
Come cambio il mio indirizzo?
Apri Account, poi Indirizzi. Le modifiche valgono per gli ordini non ancora spediti.
Anteprima dell'accordion
Domande di assistenza d'esempio di un negozio inventato, per mostrare il comportamento.