Plegables y acordeones en React Native, sin bibliotecas | We.Inc
Pliega y despliega secciones en React Native con LayoutAnimation, gira el chevron con Animated e informa de accessibilityState expanded. Vista previa del acordeón en vivo.
Para plegar una sección en React Native, guarda un indicador open en el estado y renderiza el cuerpo solo mientras sea true. Invoca LayoutAnimation.configureNext antes de cambiar el indicador y las vistas de alrededor se deslizarán a sus nuevas posiciones. Da al Pressable de la cabecera accessibilityRole="button" y accessibilityState={{ expanded }} para que los lectores de pantalla anuncien si está abierta.
Dos formas de animar un plegable
Método
Anima
Ideal para
LayoutAnimation.configureNext
El siguiente cambio de layout de todas las vistas
Cuerpos de altura desconocida, listas de secciones
Animated.timing con useNativeDriver
Propiedades que no son de layout, como transform y opacity
La rotación del chevron y los fundidos
Animated con height
La altura, en el hilo de JS
Paneles de altura fija cuando necesitas un control fino
El acordeón de abajo es el gemelo web del código React Native de esta página: la misma forma de estado y el mismo indicador expanded en cada cabecera. Alterna entre permitir que varias secciones sigan abiertas y permitir solo una, y luego copia la versión que encaje con tu pantalla.
El estado guarda los ids de las secciones abiertas, o un único id cuando solo puede haber una abierta.
Pulsar una cabecera invoca LayoutAnimation.configureNext con un preset y después actualiza el estado.
En la siguiente pasada de layout, el cuerpo se monta o desmonta y sus vecinos se animan hasta su sitio.
Un valor Animated gira el chevron con el native driver, ya que la rotación es un transform.
accessibilityState expanded en la cabecera indica a las tecnologías de asistencia qué secciones están abiertas.
En Android, la documentación pide invocar UIManager.setLayoutAnimationEnabledExperimental(true) cuando exista; protege la invocación comprobando antes que existe.
Haz que toda la fila de la cabecera sea el área pulsable, no solo el icono de la flecha.
Desmontar el cuerpo es más sencillo que animar la altura, y mantiene el contenido oculto fuera del árbol de accesibilidad.
No animes height con useNativeDriver: la documentación de React Native dice que el native driver solo anima propiedades que no son de layout, como transform y opacity.
Si el contenido interior debe conservar su estado mientras está cerrado, ocúltalo con display: "none" en lugar de desmontarlo.
Preguntas frecuentes
¿Cómo animo una vista plegable en React Native?
Invoca LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) justo antes del cambio de estado que muestra u oculta el cuerpo. El preset easeInEaseOut dura 300 milisegundos.
¿Por qué LayoutAnimation no hace nada en Android?
La página de LayoutAnimation indica que Android necesita UIManager.setLayoutAnimationEnabledExperimental(true), invocado solo si esa función existe. Ejecútalo una vez al arrancar la app, antes del primer cambio animado.
¿Puedo animar la altura con Animated y el native driver?
No. La documentación de React Native limita el native driver a propiedades que no son de layout, como transform y opacity, así que valores de layout como height quedan fuera. Anima la altura sin el native driver, o usa LayoutAnimation.
¿Cómo saben los lectores de pantalla que una sección está abierta?
Define accessibilityState={{ expanded: isOpen }} en la cabecera, o la prop aria-expanded. La documentación describe expanded como si un elemento desplegable está actualmente desplegado o plegado.
Acordeón o secciones independientes
Un acordeón mantiene abierta una sola sección, lo que encaja con pantallas de ajustes y preguntas frecuentes cortas en las que el lector busca una respuesta. Las secciones independientes encajan con filtros o detalles de pedido, donde comparar dos paneles abiertos resulta útil.
Ambos usan el mismo componente; solo cambia la función de alternancia. Guarda un Set de ids para las secciones independientes, o un único id que pasa a null cuando se vuelve a pulsar la sección abierta.
Mantenerlo fluido
LayoutAnimation solo configura el layout inmediatamente siguiente, así que invócalo en el manejador de pulsación, justo antes de setState, cada vez. Invocarlo una vez al montar no afecta a las pulsaciones posteriores.
Los cuerpos muy largos aún pueden ir a tirones en teléfonos de gama baja. Carga de forma diferida las listas pesadas dentro de una sección, o muestra un resumen breve con un enlace a una pantalla completa.
Código del plegable
Sección plegable con LayoutAnimation y un chevron que gira
El cuerpo solo se monta mientras está abierto. El chevron gira con el native driver porque la rotación es un transform.
Acordeón: una sección abierta cada vez
Un único id en el estado. Pulsar de nuevo la sección abierta lo pone en null y la cierra.
¿Cuándo se enviará mi pedido?
Los pedidos realizados antes del mediodía salen el mismo día. Recibes un enlace de seguimiento por correo en cuanto se escanea el paquete.
¿Puedo devolver un artículo?
Los artículos sin usar se pueden devolver en un plazo de 30 días. Inicia la devolución desde la pantalla del pedido e imprime la etiqueta.
¿Cómo cambio mi dirección?
Abre Cuenta y luego Direcciones. Los cambios se aplican a los pedidos que aún no se han enviado.
Vista previa del acordeón
Preguntas de ayuda de ejemplo de una tienda inventada, para mostrar el comportamiento.