Aplicar sombras de caixa em um aplicativo React Native nem sempre é simples. Como os desenvolvedores devem construir para as plataformas Android e iOS, aplicar sombras de caixa consistentes com diferentes processos de implementação específicos da plataforma pode ser entediante.
Neste artigo, aprenderemos como implementar sombras de caixa em um aplicativo React Native nas plataformas Android e iOS.
Usando acessórios de sombra React Native para sombras de caixa iOS
Para criar caixas de sombra para dispositivos iOS, podemos usar quatro adereços de sombra React Native .
O primeiro é shadowColor, que determina a cor da sombra da caixa. Observe que este é o único suporte sombra que funciona para dispositivos Android.
O segundo suporte, shadowOffset, aceita objetos contendo propriedades de largura e altura com um valor numérico:
{largura: número; height: number}
Como é descrito pelos deslocamentos X e Y em relação ao elemento ao qual a sombra da caixa é aplicada, a propriedade width determina o deslocamento X da sombra, enquanto a propriedade height determina o deslocamento Y.
Ambos os suportes de largura e altura podem aceitar valores positivos e negativos.
O terceiro suporte é shadowOpacity, que define a transparência da sombra da caixa. O valor do prop varia de 0 a 1, com 0 representando a transparência completa e 1 representando a opacidade completa.
O quarto prop é shadowRadius, que aceita um número como seu valor para definir o raio de desfoque do componente. Quanto maior o valor, maior o desfoque, marcando a sombra maior e mais clara. Este adereço não aceita valores negativos.
Vamos usar esses adereços aplicando uma sombra de caixa a um componente de cartão com o seguinte:
//onde quer que sua declaração de retorno seja
Em seguida, importe StyleSheet para aplicar vários estilos ao componente do cartão:
//lembre-se de importar StyleSheet de react-native const styles=StyleSheet.create ({ header: {fontSize: 18, fontWeight:’600′, marginBottom: 13,}, card: {backgroundColor:’white’, borderRadius: 8, paddingVertical: 45, paddingHorizontal: 25, largura:’100%’, marginVertical: 10 ,}, shadowProp: {shadowColor:’# 171717′, shadowOffset: {largura:-2, altura: 4}, shadowOpa cidade: 0,2, shadowRadius: 3,},});
Com o código adicionado, o aplicativo renderiza um cartão com uma sombra de caixa.
Adicionando a prop styles.elevation para Android
Para adicionar sombras de caixa no Android , podemos usar o prop de elevação, que usa o Android Elevation API .
Para aprender como usar uma sombra de caixa com este método, vamos aplicar uma sombra de caixa a um componente de cartão. Observe que a prop styles.elevation só funciona quando é aplicada a um componente
//onde quer que sua instrução de retorno seja
Em seguida, importe o StyleSheet novamente para estilizar o cartão:
//lembre-se de importar o StyleSheet de react-native const styles=StyleSheet.create ({header: {fontSize: 18, fontWeight:’600′, marginBottom: 13,}, cartão: {backgroundColor:’white’, borderRadius: 8, paddingVertical: 45, paddingHorizontal: 25, largura:’100%’, marginVertical: 10,}, elevação: {elevation: 20, shadowColor:’# 52006A’,},});
Ao definir a elevação para 20 com shadowColor, podemos aplicar uma sombra de caixa ao nosso componente de cartão Android.
Observe que não há controle sobre o raio de desfoque, opacidade e deslocamento da sombra da caixa; só temos controle sobre a cor da sombra.
Reagir sombra de caixa de plataforma cruzada nativa
Nesta seção, combinaremos os adereços de estilo de elevação e os adereços de sombra para implementar sombras de caixa para dispositivos Android e iOS em vez de usar dois processos separados.
Usando a API da plataforma do React Native, vamos criar uma função que possamos invocar mais tarde para renderizar condicionalmente uma sombra de caixa para nosso componente de cartão com base no dispositivo de um usuário.
Começaremos configurando o cartão:
A seguir, em nosso objeto de estilos, vamos criar a função generateBoxShadowStyle que aplica a sombra da caixa com base no sistema operacional de um usuário:
const genera teBoxShadowStyle=(xOffset, yOffset, shadowColorIos, shadowOpacity, shadowRadius, elevation, shadowColorAndroid,)=> {if (Platform.OS===’ios’) {styles.boxShadow={shadowColor: shadowColorIos, shadowOffset: {width: xOffset, height: yOffset}, shadowOpacity, shadowRadius,}; } else if (Platform.OS===’android’) {styles.boxShadow={elevation, shadowColor: shadowColorAndroid,}; }};
Com o código que acabamos de implementar, nosso aplicativo pode agora verificar a plataforma do dispositivo do usuário e aplicar os adereços de sombra de caixa apropriados.
Vamos agora invocar a função generateBoxShadowStyle e passar o valor de nossa sombra e elevação adereços como argumentos:
generateBoxShadowStyle (-2, 4,’# 171717′, 0.2, 3, 4,’# 171717′);
Em seguida, ele renderiza o seguinte para ambas as plataformas:
Para simplificar nosso fluxo de trabalho, use a ferramenta React Native Shadow Generator para gerar o código para uma sombra da caixa e ver uma prévia da sombra da caixa no Android e no iOS.
Plataforma cruzada limitações da sombra da caixa
Embora tenhamos aplicado uma sombra da caixa padrão, há casos de uso em que podemos precisar de controle total do deslocamento, opacidade e raio de desfoque da sombra da caixa. Isso pode incluir:
Aplicar uma sombra de caixa a um
Com a implementação atual, essa flexibilidade de design não é possível. No entanto, podemos superar essas limitações com react-native-drop-shadow .
Aplicando uma caixa de sombra com react-native-drop-shadow
O pacote react-native-drop-shadow é um componente View que pega seu componente aninhado, cria uma representação de bitmap, então desfoca e colore aos valores de sombra do estilo, semelhante à aplicação de sombras no iOS com os adereços de sombra.
Para começar, instale o pacote react-native-drop-shadow usando um dos seguintes comandos:
yarn add react-native-drop-shadow #ou npm i react-native-drop-shadow
Assim que a instalação for concluída, sincronize novamente o kit de ferramentas de compilação do Android Gradle ou reinicie o servidor de desenvolvimento.
Próximo , podemos importar o pacote:
importar DropShadow de”react-native-drop-shadow”;
Agora, vamos criar um botão personalizado usando o componente
A sombra da caixa no botão na captura de tela abaixo é o que queremos criar. Observe a consistência nas plataformas Android e iOS:
O componente DropShadow é o componente pai de nosso componente
//onde quer que sua instrução de retorno esteja//Não se esqueça de importar o componente Pressable do react-nativo
Para fazer nosso componente
const styles=StyleSheet.create ({shadowProp: {shadowColor:’# 171717′, shadowOffset: {width: 0, height: 3}, shadowOpacity: 0.4, shadowRadius: 2,}, botão: {backgroundColor:’# 4830D3′, alignItems:’center’, justifyContent:’center’, height: 42, borderRadius: 4, marginTop: 30,}, buttonText: {color:’#fff’,}, texto: {fontSize: 16, lineHeight: 21, fontWeight:’negrito’, letterSpacing: 0,25,},});
Usando react-native-shadow-2
O react-native-shadow-2 o pacote é uma versão aprimorada do react-native-shadow que fornece mais funcionalidades, suporte para texto de tipo e escrito do zero para reduzir as dependências que afetam o desempenho.
Ao contrário da implementação de uma sombra projetada com sombra projetada react-nativa, que cria uma representação de bitmap de seus componentes filhos, o react-native-shadow-2 usa o react-native-svg plug-in shadow para implementação consistente nas plataformas Android e iOS.
Para começar, instale ambos os pacotes na raiz do diretório do projeto:
yarn add react-native-svg react-native-shadow-2 #ou npm i react-native-svg react-native-shadow-2
Para garantir que funcione no iOS, CD no diretório ios e r un pod install para sincronizar os pacotes que acabamos de instalar:
//importe o pacote diretamente no topo import {Shadow} de’react-native-shadow-2′;//onde quer que sua declaração de retorno seja
O código produz o seguinte:
Conclusão
O principal problema com os adereços de sombra no React Native é que eles não podem ser usados em aplicativos Android.
No entanto, usando react-native-drop-shadow e react-native-shadow-2, podemos implementar facilmente sombras de caixa consistentes em nossos aplicativos React Native para plataformas Android e iOS.
O código completo usado neste tutorial está disponível em GitHub . Sinta-se à vontade para deixar um comentário para me dizer o que você achou deste artigo. Você também pode me encontrar no Twitter e no GitHub . Obrigado por ler!
