Gids voor collapsibles en accordions in React Native
Collapsible en accordion in React Native, zonder library | We.Inc
Klap secties in en uit in React Native met LayoutAnimation, draai de chevron met Animated en meld accessibilityState expanded. Met een live voorbeeld van een accordion.
Om een sectie in React Native in te klappen, houdt u een open-vlag in state bij en rendert u de inhoud alleen zolang die true is. Roep LayoutAnimation.configureNext aan voordat u de vlag wijzigt, en de omliggende views schuiven naar hun nieuwe positie. Geef de Pressable van de kop accessibilityRole="button" en accessibilityState={{ expanded }}, zodat schermlezers melden of hij open is.
Twee manieren om een collapsible te animeren
Methode
Animeert
Geschikt voor
LayoutAnimation.configureNext
De volgende layoutwijziging van elke view
Inhoud met onbekende hoogte, lijsten van secties
Animated.timing with useNativeDriver
Eigenschappen buiten de layout, zoals transform en opacity
De rotatie van de chevron en fades
Animated met height
Hoogte, op de JS-thread
Panelen met vaste hoogte als u fijne controle nodig hebt
De accordion hieronder is de webtegenhanger van de React Native-code op deze pagina: dezelfde vorm van state, dezelfde expanded-vlag op elke kop. Wissel tussen meerdere secties tegelijk open laten en maar één toestaan, en kopieer dan de versie die bij uw scherm past.
State bevat de id's van de open secties, of één id als er maar één open mag zijn.
Drukken op een kop roept LayoutAnimation.configureNext aan met een preset en werkt daarna de state bij.
Bij de volgende layoutronde wordt de inhoud gemount of ge-unmount en animeren de buren naar hun plek.
Een Animated-waarde draait de chevron met de native driver, omdat rotatie een transform is.
accessibilityState expanded op de kop vertelt hulptechnologie welke secties open zijn.
Op Android vraagt de documentatie u UIManager.setLayoutAnimationEnabledExperimental(true) aan te roepen als die bestaat; bescherm de aanroep met een controle of hij bestaat.
Maak de hele koprij aanklikbaar, niet alleen het pijlicoon.
De inhoud unmounten is eenvoudiger dan hoogte animeren, en het houdt verborgen inhoud buiten de accessibility tree.
Animeer hoogte niet met useNativeDriver: de React Native-documentatie zegt dat de native driver alleen eigenschappen buiten de layout animeert, zoals transform en opacity.
Moet inhoud binnenin zijn state behouden terwijl hij dicht is, verberg hem dan met display: "none" in plaats van hem te unmounten.
Veelgestelde vragen
Hoe animeer ik een inklapbare view in React Native?
Roep LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) aan vlak vóór de state-wijziging die de inhoud toont of verbergt. De preset easeInEaseOut duurt 300 milliseconden.
Waarom doet LayoutAnimation niets op Android?
Volgens de pagina over LayoutAnimation heeft Android UIManager.setLayoutAnimationEnabledExperimental(true) nodig, alleen aangeroepen als die functie bestaat. Voer het één keer uit bij het starten van de app, vóór de eerste geanimeerde wijziging.
Kan ik hoogte animeren met Animated en de native driver?
Nee. De React Native-documentatie beperkt de native driver tot eigenschappen buiten de layout, zoals transform en opacity, dus layoutwaarden zoals height vallen af. Animeer hoogte zonder de native driver, of gebruik in plaats daarvan LayoutAnimation.
Hoe weten schermlezers dat een sectie open is?
Zet accessibilityState={{ expanded: isOpen }} op de kop, of de prop aria-expanded. De documentatie beschrijft expanded als of een uitklapbaar element op dit moment uitgeklapt of ingeklapt is.
Accordion of losse secties
Een accordion houdt één sectie open, wat past bij instellingenschermen en korte FAQ's waarin de lezer één antwoord zoekt. Losse secties passen bij filters of bestelgegevens, waar het nuttig is twee open panelen te vergelijken.
Beide gebruiken hetzelfde component; alleen de toggle-functie verandert. Bewaar een Set met id's voor losse secties, of één id die null wordt als de open sectie nogmaals wordt ingedrukt.
Het soepel houden
LayoutAnimation configureert alleen de eerstvolgende layout, dus roep het elke keer aan in de press-handler, direct vóór setState. Eén keer aanroepen bij het mounten heeft geen effect op latere drukken.
Heel lange inhoud kan op eenvoudige telefoons nog steeds haperen. Laad zware lijsten in een sectie lazy, of render een korte preview met een link naar een volledig scherm.
Code voor een collapsible
Inklapbare sectie met LayoutAnimation en een draaiende chevron
De inhoud wordt alleen gemount zolang hij open is. De chevron draait met de native driver, omdat rotatie een transform is.
Accordion: één sectie tegelijk open
Eén id in state. Nogmaals drukken op de open sectie zet hem op null en klapt hem dicht.
Wanneer wordt mijn bestelling verzonden?
Bestellingen die vóór 12 uur 's middags zijn geplaatst, gaan dezelfde dag de deur uit. U krijgt per e-mail een trackinglink zodra het pakket is gescand.
Kan ik een artikel retourneren?
Ongebruikte artikelen kunnen binnen 30 dagen terug. Start de retour vanuit het bestelscherm en print het label.
Hoe wijzig ik mijn adres?
Open Account en dan Adressen. Wijzigingen gelden voor bestellingen die nog niet zijn verzonden.
Voorbeeld van een accordion
Voorbeeldvragen uit de helpsectie van een verzonnen winkel, om het gedrag te laten zien.