Criar uma folha de ação inferior animada personalizada sem medir em reagir nativo

Jason Brown Blocked Unblock Seguir Seguindo 21 de dezembro de 2018

Ao criar uma folha de ação inferior personalizada, muitas técnicas implementadas pelas bibliotecas exigem que você meça o conteúdo inferior. Existe uma técnica diferente na qual iremos mergulhar. O básico está posicionando uma visão fora da tela. Então, com o nosso outro conteúdo (no nosso caso, um cartão inferior que desliza para cima), podemos traduzir a altura negativa da tela para trazer a visão interna para a área visível.

Esta técnica está mostrando como ela poderia ser usada com uma folha de baixo, mas você poderia fazer uma técnica semelhante para um modal centralizado, etc.

Botão aberto

Vamos precisar de um botão aberto. Isso provavelmente será um lindo botão em algum lugar do seu aplicativo, mas um simples botão de texto é tudo o que precisamos.

Para o nosso estilo, vamos ter o nosso botão apenas centrado bem no meio da tela.

Pano de fundo

Estamos montando um cenário que cobrirá o conteúdo do aplicativo. Não é necessário adicionar uma cor de fundo, mas vamos adicionar um. Usamos o StyleSheet.absoluteFill que é um auxiliar do React Native. É o equivalente a apenas definir a visão absolutamente e configurar top/left/right/bottom para 0 para cobrir tudo.

A folha de ação

Agora vem a técnica para configurar nossa folha de ação inferior. Nosso estilo de sheet é posicionado de forma absoluta. Nós definimos a 100% altura para que seja toda a altura da tela e, em seguida, definimos o top para a altura da janela.

Isso aumenta a altura da tela e move a nossa vista de quebra para fora da tela.

A peça chave aqui para o conteúdo aparecer na parte inferior é definir justifyContent para flex-end .

Isso definirá toda a nossa renderização de conteúdo na parte inferior da exibição. Isso significa que, independentemente do tamanho do conteúdo da nossa folha de ação, ela sempre estará no final.

Finalmente adicionamos o nosso botão de fechar. Seu conteúdo real iria para aqui. Para dar um pouco de altura à vista, configurei o pop-up inferior como uma altura mínima de 80 mas não é necessário que essa técnica funcione.

Configurar animação

Agora chegamos à nossa animação. Tudo será conduzido a partir de um único valor animado para que nossa animação seja 100% reversível. Nós não precisamos gerenciar animações separadas, tudo isso é retirado de um único 0 para fechar ou 1 para abrir e todos os estados animados são interpolados.

Para nossa abertura / fechamento, usaremos Animated.timing com duração. Estamos a animar opacidade e tradução, o que significa que podemos aplicar useNativeDriver: true e todas as nossas animações serão executadas no lado nativo, em vez de serem conduzidas no mundo JS. Isso nos prepara para animações de muito desempenho.

Vá encontrar nossos botões e aplique o método onPress com o manipulador apropriado.

Pano de Fundo Animado

Se traduzirmos apenas o pop-up, o nosso cenário nunca cobrirá o conteúdo do aplicativo. Significando que o conteúdo será interativo e palpável. Nós não queremos isso.

Um truque para fazê-lo aparecer é usar a interpolation com um precipício. Nós definimos um 0 a .01 penhasco para uma animação praticamente instantânea. Precisamos ter certeza e clamp nossa interpolação ou, à medida que nossa animação progride por 0 todo o caminho até 1 nosso translateY em nosso cenário continuará em movimento e não será interrompido em 0 .

Agora, com o nosso pano de fundo instantaneamente mudou-se para cobrir tudo o que podemos animar a opacity . Podemos iniciá-lo em .01 e terminar em .5 que está no meio da animação. Comece em .01 e .01 que o pano de fundo está no lugar antes de começar a desvanecê-lo. Dessa forma, o usuário não verá um flash de escuridão enquanto o cenário se move no lugar.

Agora vamos aplicar o estilo de animação de pano de fundo à nossa exibição animada de fundo.

Animate Action Sheet

Agora nosso conteúdo de ação está sendo renderizado dentro do nosso popup e dentro do nosso pano de fundo. Nós o posicionamos bem no final, o que significa que ele precisa superar a altura total da tela para exibição.

Nós configuramos nossa interpolação em nossa animação para começar em 0.01 para garantir que o nosso cenário esteja pronto no momento em que ele tenta se animar. Além disso, a posição de descanso de nossa visão será no flex-end . Em seguida, animamos toda a altura da tela (negativamente) para que ela se mova do fundo até o topo.

Agora aplique a nossa animação de slide para a nossa vista animada de folha de fundo pop-up.

Add Something Fun

Apenas como um exemplo, podemos renderizar um ScrollView horizontal que renderiza cores aleatórias para passar. Você pode substituí-lo facilmente por qualquer outra ação rolável desejada.

Importe-o e renderize dentro do nosso popup. É isso aí.

Final

Essa técnica é um conceito simples que pode ser estendido a outras coisas, como modais, notificações suspensas / pop-up ou qualquer outra coisa acessível por baixo.