Guide des sections repliables et accordéons React Native
Section repliable et accordéon React Native, sans librairie | We.Inc
Repliez et dépliez des sections en React Native avec LayoutAnimation, faites tourner le chevron avec Animated et exposez accessibilityState expanded. Aperçu d'accordéon en direct.
Pour replier une section en React Native, gardez un indicateur d'ouverture dans le state et n'affichez le contenu que lorsqu'il vaut true. Appelez LayoutAnimation.configureNext avant de modifier l'indicateur et les vues voisines glissent vers leur nouvelle position. Donnez au Pressable de l'en-tête accessibilityRole="button" et accessibilityState={{ expanded }} pour que les lecteurs d'écran annoncent s'il est ouvert.
Deux façons d'animer une section repliable
Méthode
Anime
Idéal pour
LayoutAnimation.configureNext
Le prochain changement de mise en page de toutes les vues
Contenus de hauteur inconnue, listes de sections
Animated.timing avec useNativeDriver
Les propriétés hors mise en page comme transform et opacity
La rotation du chevron et les fondus
Animated avec height
La hauteur, sur le thread JS
Panneaux à hauteur fixe quand vous avez besoin d'un contrôle fin
L'accordéon ci-dessous est le jumeau web du code React Native de cette page : même forme de state, même indicateur expanded sur chaque en-tête. Basculez entre plusieurs sections ouvertes à la fois et une seule autorisée, puis copiez la version adaptée à votre écran.
Le state contient les ids des sections ouvertes, ou un seul id quand une seule peut être ouverte.
Un appui sur un en-tête appelle LayoutAnimation.configureNext avec un preset, puis met à jour le state.
Au passage de mise en page suivant, le contenu est monté ou démonté et ses voisins s'animent jusqu'à leur place.
Une valeur Animated fait tourner le chevron avec le native driver, puisque la rotation est un transform.
accessibilityState expanded sur l'en-tête indique aux technologies d'assistance quelles sections sont ouvertes.
Sur Android, la documentation demande d'appeler UIManager.setLayoutAnimationEnabledExperimental(true) quand elle existe ; protégez l'appel par une vérification d'existence.
Faites de toute la ligne d'en-tête la zone d'appui, pas seulement l'icône de flèche.
Démonter le contenu est plus simple qu'animer la hauteur, et cela garde le contenu masqué hors de l'arbre d'accessibilité.
N'animez pas la hauteur avec useNativeDriver : la documentation React Native indique que le native driver n'anime que les propriétés hors mise en page, comme transform et opacity.
Si le contenu doit conserver son état une fois replié, masquez-le avec display: "none" au lieu de le démonter.
Questions fréquentes
Comment animer une vue repliable en React Native ?
Appelez LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) juste avant le changement de state qui affiche ou masque le contenu. Le preset easeInEaseOut dure 300 millisecondes.
Pourquoi LayoutAnimation ne fait-il rien sur Android ?
La page LayoutAnimation indique qu'Android a besoin de UIManager.setLayoutAnimationEnabledExperimental(true), appelée seulement si cette fonction existe. Exécutez-la une fois au démarrage de l'app, avant le premier changement animé.
Puis-je animer la hauteur avec Animated et le native driver ?
Non. La documentation React Native limite le native driver aux propriétés hors mise en page comme transform et opacity, donc les valeurs de mise en page comme height sont exclues. Animez la hauteur sans le native driver, ou utilisez plutôt LayoutAnimation.
Comment les lecteurs d'écran savent-ils qu'une section est ouverte ?
Définissez accessibilityState={{ expanded: isOpen }} sur l'en-tête, ou la prop aria-expanded. La documentation décrit expanded comme l'indication qu'un élément dépliable est actuellement déplié ou replié.
Accordéon ou sections indépendantes
Un accordéon garde une seule section ouverte, ce qui convient aux écrans de réglages et aux FAQ courtes où le lecteur cherche une seule réponse. Les sections indépendantes conviennent aux filtres ou aux détails de commande, où comparer deux panneaux ouverts est utile.
Les deux utilisent le même composant ; seule la fonction de bascule change. Stockez un Set d'ids pour des sections indépendantes, ou un seul id qui passe à null quand on appuie à nouveau sur la section ouverte.
Garder une animation fluide
LayoutAnimation ne configure que la toute prochaine mise en page : appelez-le donc dans le gestionnaire d'appui, juste avant setState, à chaque fois. L'appeler une seule fois au montage n'a aucun effet sur les appuis suivants.
Des contenus très longs peuvent encore saccader sur les téléphones d'entrée de gamme. Chargez à la demande les listes lourdes d'une section, ou affichez un court aperçu avec un lien vers un écran complet.
Code de section repliable
Section repliable avec LayoutAnimation et un chevron qui tourne
Le contenu n'est monté que lorsqu'il est ouvert. Le chevron tourne avec le native driver, car la rotation est un transform.
Accordéon : une seule section ouverte à la fois
Un seul id dans le state. Appuyer à nouveau sur la section ouverte le remet à null et la ferme.
Quand ma commande sera-t-elle expédiée ?
Les commandes passées avant midi partent le jour même. Vous recevez un lien de suivi par e-mail dès que le colis est scanné.
Puis-je retourner un article ?
Les articles non utilisés peuvent être retournés sous 30 jours. Lancez le retour depuis l'écran de la commande et imprimez l'étiquette.
Comment modifier mon adresse ?
Ouvrez Compte, puis Adresses. Les modifications s'appliquent aux commandes qui ne sont pas encore expédiées.
Aperçu de l'accordéon
Questions d'aide fictives d'une boutique inventée, pour montrer le comportement.