Quando se trata de estilo, o React Native está em uma posição muito boa. A abordagem integrada StyleSheet permite que você desacople facilmente os estilos fora do JSX.
Manter o React Native geralmente é uma boa ideia, no entanto, tem suas próprias falhas. Por um lado, pode ser difícil manter estilos em alguns locais externos para reutilizá-los. Outro problema é gerenciar as convenções de nomenclatura adequadas em toda a base de código. Esses problemas podem ser resolvidos usando o Tailwind no React Native.
Tailwind CSS muda completamente a abordagem comum para estruturar CSS. Enquanto aprendem boas práticas de código, os desenvolvedores entendem rapidamente a importância da separação de interesses e da divisão de HTML e CSS entre dois arquivos. O CSS primeiro do utilitário parece completamente diferente.
Embora haja alguma insatisfação com o CSS que prioriza o utilitário vindo da comunidade de desenvolvedores, é difícil não notar que o CSS do Tailwind está crescendo em popularidade. Como prova de suas capacidades, o Tailwind ganhou um prêmio por ser a tecnologia mais adotada em The State of CSS 2020 pesquisa.
Então, por que tanto barulho?
A abordagem do utilitário de primeira classe
No React Native, as classes utilitárias aplicam propriedades CSS específicas a um elemento por meio de sua classe ou propriedade de estilo. A abordagem anterior era aplicar o objeto de estilo ao elemento embutido ou fazer referência às chaves do objeto StyleSheet com nomes personalizados aplicados.
A abordagem do utilitário de primeira classe permite que você simplesmente adicione um nome de classe ao elemento sem a necessidade de escrever estilos personalizados. A decisão de implementar cores, tipografia e estrutura, bem como fornecer um nome significativo para cada elemento estilizado, já foi tomada.
O Tailwind oferece valores padrão com base em um sistema de design sólido, o que resulta em consistência em toda a base de código. A curva de aprendizado pode parecer íngreme no início, mas um desenvolvedor que é proficiente com esse tipo de estilo é capaz de trabalhar mais rápido e de forma mais unificada. Além disso, quando uma equipe usa um conjunto selecionado de opções limitadas, é mais fácil integrar um novo desenvolvedor e manter a consistência em sua abordagem de estilo.
Por último, como as folhas de estilo são reutilizadas, a base de código irá parar de crescer e, portanto, será mais fácil de manter.
Comparando a abordagem de componentes estilizados
Usar componentes estilizados é uma ótima abordagem para estilizar por muitos motivos. No entanto, não saber à primeira vista se um determinado componente é React ou um estilo burro pode realmente tornar as coisas mais lentas. Também há um caso de abstração prematura quando criamos componentes que nunca são reutilizados.
Considerando estilos embutidos
Quando se trata de misturar código com classes do Tailwind, uma desvantagem é que nosso código pode rapidamente se tornar prolixo. Normalmente, evitamos estilos inline a todo custo porque eles afetam negativamente a legibilidade do código e podem prejudicar o desempenho geral. Houve algumas sugestões da comunidade de desenvolvedores de que a abordagem StyleSheet tem mais desempenho do que os estilos embutidos, porque envia o objeto inteiro pela ponte de uma vez. Isso é mais esclarecido no Código-fonte nativo do React .
Usando Tailwind no React Native
Embora existam alguns pacotes Tailwind adequados para React Native, optei por usar tailwind-react-native-classnames em tailwind-rn . tailwind-react-native-classnames é baseado em Classnames , um utilitário JavaScript usado para melhorar o código do Tailwind na Web e, portanto, deve ser mais familiar para os desenvolvedores que usam o CSS do Tailwind.
Você pode se sentir à vontade para usar diferentes bibliotecas como quiser, mas para mim, a abordagem da função de modelo com tag é mais atraente visualmente do que estilos passados para a matriz como em react-native-tailwindcss . Você também pode optar por simplesmente importar os componentes do React Native do react-native-tailwind library e passe classes para a propriedade className .
Existem duas abordagens para aplicar classes Tailwind ao elemento usando a biblioteca tailwind-react-native-classnames . O básico usa a função de modelo com tag ES6, que simplesmente envolve os nomes das classes em crases como no elemento Exibir abaixo. A segunda abordagem, que usa o pacote Classnames, permite combinar classes e lidar com casos mais complexos. Observe no elemento Texto abaixo:
import tw from'tailwind-react-native-classnames'; const MyComponent=()=> (Olá );
Classes específicas do React Native
Temos duas classes React Native para usar estilos específicos da plataforma, que podem ser usados com segurança com a função de modelo marcada:
tw`ios: pt-4 android: pt-2`;
Nomes de classes do Tailwind
Se você olhar o menu do lado esquerdo da página inicial do Tailwind , verá várias seções. Apenas alguns deles são relevantes para o React Native, mas se você já sabe como estilizar componentes no React Native, você entenderá rapidamente o que pode usar. As seções mais interessantes para você ler são:
- Layout : lida com itens como tamanho e posição
- Flexbox : elementos de posicionamento com Flexbox
- Espaçamento : classes para preenchimentos e margens
- Dimensionamento : classes de largura e tamanho
- Tipografia : tudo relacionado a fontes, espaçamentos entre letras e texto
- Planos de fundo : classes como cor de fundo, imagem e opacidade de fundo
- Bordas : classes de raio, largura e cor
Há também a seção Efeitos onde você pode encontrar opacidade, mas também é possível usar classes. Use shadow em tailwind-react-native-classnames , que está localizado na parte Box Shadow desta seção.
Também achei esta folha de dicas muito útil. Ao tentar especificar valores, você pode verificar o código adequado para os atributos do elemento. Por exemplo, ao definir a largura do elemento, você pode usar o nome da classe w- e definir o número w-40 para obter 160px.
Comparando a abordagem CSS StyleSheet e Tailwind
Agora, vamos construir um layout simples usando ambas as abordagens para comparar o código Tailwind ao código React Native. Para este exemplo, decidi criar ScrollView com cartões. Uma variável selecionada é passada para o componente, que determina diferentes planos de fundo e cores do conjunto de títulos.
Todo o exemplo de código deste artigo está localizado no repositório Git TailwindCssReactNative . Você também pode executar o exemplo da Expo . Para começar, construiremos o componente acima usando a abordagem de StyleSheet:
const ListItem=({ uri, selecionado=falso, text=""
})=> { Retorna ( {text} Detalhes )
}
Como você pode ver, três objetos foram passados: uri para a imagem, texto para o título do cartão e informações sobre se o componente está selecionado ou não. Com base no fato de selecionado ser verdadeiro ou falso, existem estilos adicionais adicionados como backgroundColor na visualização principal e color em Texto componente.
StyleSheet é usado para estilizar este componente:
const styles2=StyleSheet.create ({ container: { altura: 256, largura: 160, backgroundColor:'rgba (59,130,246,1)', borderRadius: 12, preenchimento: 15, margem: 5, alignItems:'center', justifyContent:'center', shadowColor:"# 000", shadowOffset: { largura: 0, altura: 3, }, shadowOpacity: 0,27, shadowRadius: 4,65, elevação: 6, }, logoBackground: { largura: 112, altura: 112, borderRadius: 55, backgroundColor:'# E4F0FE' }, logo: { largura: 110, altura: 110, borderRadius: 55 }, texto: { cor branca', fontSize: 18, intensidade da fonte: Negrito', marginVertical: 10 }, botão: { altura: 40, largura:'100%', backgroundColor:'branco', borderRadius: 20, alignItems:'center', justifyContent:'center', borderWidth: 1, borderColor:'rgba (59,130,246,1)' }, botão de texto: { cor:'rgba (59,130,246,1)', fontSize: 17, intensidade da fonte: Negrito' }
});
Agora, podemos construir o mesmo componente com a abordagem CSS do Tailwind e a biblioteca tailwind-react-native-classnames .
import React from'react';
import {Text, View, TouchableOpacity, Image} de'react-native';
importar tw de'tailwind-react-native-classnames'; export const ListItemTW=({ uri, selecionado=falso, text=""
})=> ( { texto } Detalhes
)
Então, qual é a diferença? Observe que o componente Tailwind tem 36 linhas em comparação ao componente normal com StyleSheet que tem 76 linhas. A maior desvantagem é que existem várias linhas de código longas. Dois deles são até mesmo multilinhas por causa do uso do tw.style de Classname para juntar classes com estilos adicionados condicionalmente.
Usar estilos predefinidos tem seus prós e contras. Conforme mencionado, os benefícios incluem tempo de desenvolvimento mais rápido e facilidade de manutenção. A maior desvantagem é que se você usar algum valor incomum, como um tamanho ou cor que não está incluído nos valores padrão, terá que personalizar seus estilos. Acho que a abordagem mais simples seria passar o objeto de estilo para o tw.style , que deve ser reconhecido sem nenhum problema.
Resumo
Usar Tailwind CSS em seu projeto fornece unificação de toda a base de código. Em vez de dar nomes personalizados aos estilos em StyleSheet, você pode aplicar nomes de classes da lista predefinida que é bem conhecida por muitos desenvolvedores.
Além disso, a velocidade de desenvolvimento deve ser melhorada porque é mais fácil estilizar componentes e avaliar quais estilos são aplicados a elementos específicos. Essa abordagem também tem suas desvantagens, como tornar alguns componentes muito prolixos. Acredito que esses problemas podem ser resolvidos exportando algumas das peças mais longas e reutilizáveis como componentes estilizados ou exportando-as para o arquivo externo, mas cabe a você decidir a melhor abordagem para seu projeto.
A postagem Por que você deve usar o Tailwind CSS com React Native apareceu primeiro no LogRocket Blog .
