Collapsible e accordion no React Native, sem biblioteca | We.Inc
Recolha e expanda seções no React Native com LayoutAnimation, gire a seta com Animated e informe accessibilityState expanded. Com prévia de accordion ao vivo.
Para recolher uma seção no React Native, mantenha um indicador open no estado e renderize o conteúdo só enquanto ele for verdadeiro. Chame LayoutAnimation.configureNext antes de mudar o indicador e as views ao redor deslizam para as novas posições. Dê ao Pressable do cabeçalho accessibilityRole="button" e accessibilityState={{ expanded }} para que os leitores de tela anunciem se ele está aberto.
Duas formas de animar um collapsible
Método
Anima
Bom para
LayoutAnimation.configureNext
A próxima mudança de layout de todas as views
Conteúdos de altura desconhecida, listas de seções
Animated.timing with useNativeDriver
Propriedades que não são de layout, como transform e opacity
A rotação da seta e os fades
Animated com height
A altura, na thread do JS
Painéis de altura fixa quando você precisa de controle fino
O accordion abaixo é o gêmeo web do código React Native desta página: o mesmo formato de estado, o mesmo indicador expanded em cada cabeçalho. Alterne entre deixar várias seções abertas e permitir só uma, e copie a versão que combina com a sua tela.
O estado guarda os ids das seções abertas, ou um único id quando só uma pode ficar aberta.
Tocar em um cabeçalho chama LayoutAnimation.configureNext com um preset e depois atualiza o estado.
Na próxima passada de layout, o conteúdo é montado ou desmontado e os vizinhos se animam até a nova posição.
Um valor Animated gira a seta com o native driver, já que a rotação é um transform.
O accessibilityState expanded no cabeçalho informa às tecnologias assistivas quais seções estão abertas.
No Android, a documentação pede que você chame UIManager.setLayoutAnimationEnabledExperimental(true) quando ele existir; proteja a chamada com uma verificação de existência.
Faça a linha inteira do cabeçalho ser a área de toque, não só o ícone da seta.
Desmontar o conteúdo é mais simples que animar a altura, e mantém o conteúdo escondido fora da árvore de acessibilidade.
Não anime height com useNativeDriver: a documentação do React Native diz que o native driver só anima propriedades que não são de layout, como transform e opacity.
Se o conteúdo interno precisa manter o estado enquanto está fechado, esconda-o com display: "none" em vez de desmontá-lo.
Perguntas frequentes
Como animo uma view recolhível no React Native?
Chame LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) logo antes da mudança de estado que mostra ou esconde o conteúdo. O preset easeInEaseOut dura 300 milissegundos.
Por que o LayoutAnimation não faz nada no Android?
A página do LayoutAnimation diz que o Android precisa de UIManager.setLayoutAnimationEnabledExperimental(true), chamado só se essa função existir. Rode-o uma vez quando o app iniciar, antes da primeira mudança animada.
Posso animar a altura com Animated e o native driver?
Não. A documentação do React Native limita o native driver a propriedades que não são de layout, como transform e opacity, então valores de layout como height ficam de fora. Anime a altura sem o native driver ou use o LayoutAnimation.
Como os leitores de tela sabem que uma seção está aberta?
Defina accessibilityState={{ expanded: isOpen }} no cabeçalho, ou a prop aria-expanded. A documentação descreve expanded como a indicação de se um elemento expansível está expandido ou recolhido no momento.
Accordion ou seções independentes
Um accordion mantém uma seção aberta, o que combina com telas de configurações e FAQs curtas em que o leitor quer uma resposta. Seções independentes combinam com filtros ou detalhes de pedido, em que comparar dois painéis abertos é útil.
Os dois usam o mesmo componente; só a função de alternância muda. Guarde um Set de ids para seções independentes, ou um único id que vira null quando a seção aberta é tocada de novo.
Mantendo tudo fluido
O LayoutAnimation configura só o próximo layout, então chame-o no handler de toque, logo antes do setState, todas as vezes. Chamá-lo uma vez na montagem não tem efeito nos toques seguintes.
Conteúdos muito longos ainda podem travar em celulares mais fracos. Mantenha listas pesadas dentro de uma seção com carregamento preguiçoso, ou mostre uma prévia curta com um link para uma tela completa.
Código do collapsible
Seção recolhível com LayoutAnimation e uma seta que gira
O conteúdo só é montado enquanto está aberto. A seta gira com o native driver porque a rotação é um transform.
Accordion: uma seção aberta por vez
Um único id no estado. Tocar de novo na seção aberta o define como null e a fecha.
Quando o meu pedido será enviado?
Pedidos feitos antes do meio-dia saem no mesmo dia. Você recebe um link de rastreio por e-mail assim que o pacote é escaneado.
Posso devolver um item?
Itens sem uso podem ser devolvidos em até 30 dias. Inicie a devolução na tela do pedido e imprima a etiqueta.
Como mudo o meu endereço?
Abra Conta e depois Endereços. As alterações valem para pedidos que ainda não foram enviados.
Prévia do accordion
Perguntas de ajuda de exemplo de uma loja fictícia, para mostrar o comportamento.