Introdução
As animações são importantes para tornar um aplicativo interativo. Eles fazem o usuário se sentir mais conectado com o aplicativo.
Com o React Native ganhando impulso, muitos produtos são construídos com o React Native ou migraram para ele. No entanto, embora o código para páginas da web possa ser reutilizado em aplicativos móveis em alguns casos, um grande problema é que as animações muitas vezes não podem ser transportadas, pois as APIs são completamente diferentes.
Neste artigo, aprenderemos como aproveitar a resolução de arquivo React Native e react-spring (uma biblioteca de animação) para escrever uma única base de código que executa animações no React e no React Native.
Começaremos aprendendo sobre a resolução de arquivos React Native e react-spring, e continuaremos construindo um aplicativo de amostra muito básico. Neste aplicativo de amostra, escreveremos um código que funcionará tanto no React na web quanto no React Native em aplicativos móveis.
Reagir resolução de arquivo nativo
O React Native tem um sistema de resolução de arquivos eficiente que nos permite escrever códigos específicos para plataformas ou nativos. Ele detectará quando um arquivo tem uma extensão .ios.js ou .android.js e carregará o arquivo de plataforma relevante (Android/iOS) quando exigido de outros componentes. Dessa forma, podemos escrever duas partes diferentes de código ou componentes para duas plataformas diferentes.
Da mesma forma, quando criamos arquivos com uma extensão .js ou .native.js , o arquivo .js é selecionado pelo Node.js e web, enquanto o arquivo .native.js é obtido pelo React Native Bundler Metro .
Isso nos dá o poder de criar aplicativos de fácil manutenção e reutilizar muitos códigos em plataformas.
Considere uma pasta com a estrutura abaixo:
|-TestComponent |-index.js |-index.native.js
Suponhamos que estejamos usando o componente TestComponent no componente App da seguinte maneira:
const App=()=> ()
Quando o código é empacotado para o navegador, uma importação de TestComponent importará o componente do arquivo index.js . Se o código for empacotado para React Native, entretanto, ele pega index.native.js .
Vamos aproveitar esse aspecto da resolução do arquivo para escrever um único código de animação para ambas as plataformas.
React-spring
React-spring é uma biblioteca de animação primaveril baseada na física que deve abranger a maior parte suas necessidades de animação relacionadas à IU. Ele oferece ferramentas flexíveis o suficiente para transmitir com segurança suas ideias em interfaces móveis.
React-spring é uma ponte entre as duas bibliotecas de animação React existentes: React Motion e Animado . Ele herda as poderosas interpolações e desempenho do Animated, bem como a facilidade de uso do React Motion.
A principal vantagem do react-spring sobre outras bibliotecas de animação é sua capacidade de aplicar animações sem depender do React para renderizar as atualizações quadro a quadro. As animações são baseadas na física.
Não há necessidade (a menos que você faça isso intencionalmente) para personalizar a duração ou atenuação. Isso significa que suas animações podem lidar com interrupções e alterações perfeitamente. O resultado são animações suaves, suaves e de aparência natural.
React-spring também é uma biblioteca de animação de plataforma cruzada. Ele tem implementações semelhantes para web, React Native e outras plataformas, mas como pacotes diferentes. Podemos escolher o módulo certo com base em nossos requisitos. No entanto, eles compartilham as mesmas APIs para todas as plataformas. Isso nos ajuda a usar o react-spring para atingir nosso objetivo de um código para todas as plataformas.
Usaremos o gancho useSpring para o aplicativo de amostra que iremos construir neste artigo. useSpring transforma valores em valores animados, substituindo-os para alterar a animação ou atualizando os valores dinamicamente, passando uma função de retorno de chamada usando a API.
Construindo um aplicativo de amostra
Vamos usar os conceitos acima que acabamos de aprender e construir um aplicativo de amostra. Este aplicativo de amostra usará React para a web, React Native para aplicativos móveis e react-spring para animação. Funcionalmente, será um aplicativo muito simples em que um texto aparecerá e aumentará o zoom no carregamento do aplicativo, tanto em aplicativos móveis quanto na web.
No entanto, primeiro teremos que criar os blocos de construção básicos para que este aplicativo funcione. Você pode configurar manualmente o bundler Metro e o webpack ou usar os kits iniciais existentes.
Usei expo e create-react-app mesclados em um único projeto. A versão funcional completa do aplicativo pode ser encontrada aqui .
Vamos ver alguns códigos agora. Considere o seguinte projeto:
|-src |-Box |-index.js |-Box.js |-Box.native.js |-Texto |-index.js |-Text.js |-Text.native.js |-App.js
Temos dois componentes aqui: Box e Text . Ambos os componentes aproveitam a resolução de arquivo no React Native, o que nos permite escrever um único componente que funciona para ambas as plataformas.
Box
Box é um componente de contêiner. Usaremos Box como um recipiente para todos os outros componentes ou textos.
Na web, usamos div ou section como contêineres. No entanto, o React Native não oferece suporte a esses elementos e usa o componente View como um contêiner. Nosso objetivo é escrever um código para todas as plataformas, portanto, criaremos este componente Box para traduzir para div ou View com base na plataforma.
Considerando a resolução do arquivo do React Native, criaremos dois arquivos para os componentes do Box :
Box.jsBox.native.js
O arquivo Box.js será usado pela plataforma web e é apenas um apelido para um div . Isso exportará o elemento div assim:
//Box.js exportação padrão'div';
O arquivo Box.native.js será usado pela plataforma React Native. Importamos o componente View do React Native e o exportamos do arquivo da seguinte forma:
//Box.native.js
importar {View} de'react-native'
exportar visualização padrão
Criamos um arquivo index.js comum, por isso é fácil e mais legível importar e usar o componente Box em outros arquivos. Se você vir aqui, não mencionamos explicitamente se Box é importado do arquivo .js ou .native.js .
Deixamos os empacotadores decidirem e apenas exportamos o componente no arquivo index.js , para que possa ser usado por outros componentes:
//index.js importar caixa de'./Box'; exportar caixa padrão
Text
O componente Texto será usado para adicionar texto a aplicativos da web e móveis. Na web, usamos elementos como h1 , h2 ou p para exibir o texto, enquanto no React Native usamos o Text componente. Este componente Texto agora será traduzido para p ou Texto com base na plataforma.
Criaremos dois arquivos para o componente Texto :
Text.jsText.native.js
O arquivo Text.js será usado pela plataforma web e é apenas um apelido para p . Isso exportará o elemento p assim:
//Text.js exportação padrão'p';
O arquivo Text.native.js será usado pela plataforma React Native. Importamos o componente Texto do React Native e o exportamos do arquivo aqui:
//Text.native.js
importar {Text} de'react-native'
exportar texto padrão
Assim como o componente Box , criamos um arquivo index.js comum aqui também. Isso torna mais fácil e legível importar e usar o componente Texto em outros arquivos:
//index.js importar texto de'./Texto'; exportar texto padrão
Agora que temos os blocos de construção básicos dos componentes Box e Text , podemos prosseguir e construir o aplicativo de amostra.
Vamos criar um novo componente, App.js , que usará Box como contêiner e Text para exibir nosso título: React Spring Animation . Também podemos adicionar algum estilo ao componente.
Deve ser semelhante a:
//App.js import React from'react';
importar caixa de'./Box';
importar texto de'./Texto'; function App () { Retorna ( React Spring Animation );
}
exportar aplicativo padrão;
O código acima cria o mesmo texto para celular e web, que você pode ver na captura de tela abaixo. Nos bastidores, o código é empacotado antes de ser executado em qualquer plataforma.
Quando o webpack agrupa o código para a web, ele usa os arquivos Box.js e Text.js , adiciona um elemento div e p elemento com o texto React Spring Animation para o componente App e o executa no navegador.
No entanto, o Metro agrupa os arquivos Box.native.js e Text.native.js e adiciona View e Text componentes do React Native para o componente App . Isso também dá o resultado pretendido em aplicativos móveis.
Até agora, é assim que nosso aplicativo se parece no celular e na web: 
Adicionando animação
É hora de adicionar animação ao aplicativo acima. Vamos adicionar uma animação de”zoom in”ao texto, aumentando o tamanho da fonte.
Primeiro, instale react-spring como dependência do projeto:
npm i react-spring fio adicionar reagir-mola
A seguir, construa um componente Animated semelhante aos componentes Box e Text . Este componente Animated será nossa única fonte para todos os ganchos, APIs e utilitários da biblioteca react-spring .
Iremos estruturá-lo de forma semelhante aos nossos componentes Box e Text , usando assim os ganchos de direita e APIs com base em cada plataforma.
O React-spring tem dois módulos que usaremos: react-spring para web e react-spring/native para React Native. Neste exemplo, usaremos o gancho useSpring de react-spring para implementar a animação.
No entanto, devemos importar useSpring de react-spring para a web e useSpring de react-spring/native para React Native. Portanto, não podemos usar diretamente react-spring .
Considerando os fatos, construiremos um componente Animated que nos ajudará a escrever uma única animação para várias plataformas.
Vamos adicionar uma nova pasta de componentes conforme abaixo:
|-src |-Animado |-index.js |-Animated.js |-Animated.native.js
Animado
O componente Animated fornecerá todos os ganchos e utilitários necessários do react-spring . Na web, usamos elementos como useSpring e useTransition de react-spring para animações, enquanto no React Native usamos os mesmos ganchos de react-spring/nativo .
Este componente Animated importará useSpring de react-spring ou react-spring/native com base em a plataforma.
Criaremos dois arquivos para o componente Animated :
Animated.jsAnimated.native.js
O arquivo Animated.js será usado pela plataforma web e importará useSpring e animated de react-spring e exporte-o:
//Animated.js
exportar {useSpring, animated} de'react-spring'
O arquivo Animated.native.js será usado pela plataforma React Native e importará useSpring e animated de react-spring/native e exportá-lo:
//Animated.native.js
exportar {useSpring, animated} de'react-spring/nativo'
Podemos criar um arquivo index.js comum agora, que importará e exportará os componentes Animated como Box e Text . Isso tornará mais fácil e legível importar e usar o componente Animated em outros arquivos:
//index.js
exportar {useSpring, animated} de'./Animated'
Agora, vamos usar o componente Animated no App.js para animar o texto.
Importe useSpring e animated do componente Animated :
import {useSpring, animated} de'./Animated';
Em seguida, crie um componente habilitado para animação usando a função Animated . Um componente pode ser animado usando react-spring apenas se for estendido pela função Animated :
const AnimatedText=animado (Texto);
Crie a animação, que é muito semelhante à animação de quadro-chave CSS, usando a função useSpring .
Os quadros-chave em CSS controlam as etapas intermediárias em uma sequência de animação CSS, definindo estilos para os quadros-chave (ou pontos de referência) ao longo da sequência de animação. Portanto, podemos determinar o estilo de um elemento durante as diferentes fases de uma animação.
useSpring funciona exatamente da mesma forma. Você pode definir a aparência de certos estilos durante o início e o final das animações usando as propriedades from e to , respectivamente:
const styles=useSpring ({ a partir de: { fontSize: 10, }, para: { fontSize: 50, }, })
Finalmente, passe os estilos para o atributo style do componente AnimatedText :
React Spring Animation
Juntando tudo, App.js deve ser parecido com o seguinte:
import React from'react';
import {useSpring, animated} de'./Animated';
importar caixa de'./Box';
importar texto de'./Text'; const AnimatedText=animated (Texto) function App () { estilos const=useSpring ({ a partir de: { fontSize: 10, }, para: { fontSize: 50, } }) Retorna ( React Spring Animation );
}
O código acima adiciona uma animação de”zoom in”ao texto para web e celular (via React Native).
Você pode ver como fica nos gifs abaixo:
Conclusão
Usando a técnica acima, podemos criar quase qualquer animação apenas uma vez e reutilizá-la na web e em plataformas móveis. Isso permite uma prototipagem rápida e fácil manutenção. Ele também facilita o comportamento consistente de recursos em todas as plataformas.
Infelizmente, essa técnica vem com uma pequena advertência: somente as propriedades CSS que são suportadas pelo React e pelo React Native podem ser animadas dessa forma. Qualquer coisa que envolva outras propriedades CSS ainda deve manter duas versões de código para ambas as plataformas.
A postagem Executar animações no React e React Native a partir de um codebase apareceu primeiro no LogRocket Blog .
