Há algumas coisas em que poderíamos continuar,
mas quero continuar com o contêiner de entrada, que é o contêiner em
torno dessas entradas; portanto, ao redor de selecionar um texto numérico, ao redor da entrada de texto aqui e ao redor
dos botões e esse contêiner possui um largura e alinha os itens,
mas como eu descrevi anteriormente, seria bom ter
esse cartão para olhar lá e, para isso, precisamos de alguns estilos mais exóticos que pareçam realmente chiques,
mas simplesmente algumas regras de estilo que não usamos antes.
Por exemplo, quero adicionar uma sombra, uma leve sombra
projetada e você faz isso com quatro propriedades principais que você pode usar. Uma cor, um deslocamento, uma opacidade e um raio.
Agora uma cor da sombra deve estar clara, é a cor da sua sombra.
O deslocamento da sombra é o quanto ele é deslocado do seu contêiner
e, na verdade, leva o objeto que, por sua vez, ocupa uma largura e uma altura,
então você pode dizer que eu quero deslocar a sombra em dois pixels em relação à largura e em dois
pixels em relação à altura , que influencia o efeito tridimensional que você está criando. A opacidade descreve como essa sombra é transparente, se você
definir a opacidade como
1, terá uma sombra forte totalmente transparente e, portanto, muito visível e se você aumentar ou diminuir o
que devo dizer, se você definir 0. 1, por exemplo, você tem
uma sombra que mal consegue ver. O raio da sombra basicamente descreve o quão nítida
é essa sombra, se ela tem arestas ou se é um pouco mais embaçada, mais suave, coisas assim.
Então, aqui vou com uma cor de sombra preta, pelo jeito que você também pode usar
códigos hexadecimais aqui, se quiser, e também pode usar códigos RGBA, se preferir, códigos RGB normais na verdade ou também com um
alfa canal para descrever a transparência aqui. Embora a transparência aqui não tenha influência direta, para
a sombra, será necessário definir isso com opacidade da sombra. Para outras cores, isso teria influência, mas
isso é apenas uma nota lateral. Em anexo, você encontrará um link com mais
detalhes sobre como configurar cores e quais valores de cores o React Native aceita porque, obviamente, é muito
mais exaustivo do que o que eu posso mostrar aqui. Vou apenas usar o nome porque
quero um preto cor, então por que não usar esse atalho? Agora, além da cor, a sombra aqui também receberá um
deslocamento e, como eu disse, o deslocamento aqui leva um objeto.
Agora, caso você se pergunte como eu sei disso, por exemplo, meu IDE me diz que, se eu começar a digitar o deslocamento
da sombra aqui, você verá a dica de que eu entendi direito, você normalmente deveria estar entendendo
isso também, mas, caso não o faça obtenha isso, é claro que os documentos oficiais são o local a seguir,
sempre em guias, componentes e APIs, você pode clicar no componente de visualização lá ou simplesmente clicar nos documentos de
API aqui no canto superior direito e escolher sua visualização lá e ali, você encontrará alguns adereços de estilo e, em seguida, poderá encontrar uma lista de todos
os estilos de exibição suportados e, claro, também como configurá-los; por exemplo, você aprendeu que o deslocamento da sombra
é um objeto com um número e uma altura. Para a cor, você aprendeu que isso leva uma
cor e esse é exatamente o link que você encontra anexado aqui, onde descreveu que
tipo de cores você pode usar.
Então, isso é apenas uma pequena nota lateral, aqui vou usar um deslocamento de sombra com largura zero, mas
altura 2, para que minha sombra seja deslocada um pouco para o fundo, por assim dizer, não tanto para a direita, então não
à direita, na verdade, e também adicionarei um raio de sombra, que é um número de algumas, vamos tentar seis e ver o que
isso faz e, por
último, mas não menos importante, uma opacidade de sombra 0. 26, que é relativamente transparente, mas que
parece bem legal.
Além disso, darei ao meu contêiner de entrada uma cor de fundo branca, para garantir que ele seja sempre branco
e não transparente, o que é o padrão, de modo que, se tivermos outra
cor de fundo atrás do contêiner, digamos como a cor base de a tela inteira, o contêiner
aqui sempre teria um fundo branco.
Agora, com isso, se você salvar isso, deverá ver uma sombra parecida com isso no
iOS, mas não vê nenhuma sombra no Android e isso não é
um bug. Em vez disso, as propriedades da sombra aqui funcionam apenas no iOS e isso deixa um importante pergunta, como você pode
definir uma sombra no Android então? Isso não é possível?
É mas lá você tem um suporte de estilo especial, o suporte de elevação. Isso funciona apenas no Android, pois a dica de ferramenta
também mostra aqui, a plataforma Android, enquanto as propriedades de sombra funcionam apenas no iOS. Agora, a elevação requer apenas digamos 5 e, em seguida,
usa a elevação padrão do design do material Android, para que você tenha menos controle, mas
por outro lado, obtém a aparência padrão do design do material com
a qual seus usuários podem estar acostumados, o bom disso e agora também temos
uma sombra aqui no Android e no iOS. No iOS, você também notará que a sombra é visível à
esquerda e à direita da caixa, mesmo que eu tenha atribuído um deslocamento de sombra de 0 para a largura,
que pode ser controlado com o raio da sombra, se você definir a sombra raio a zero, você
verá que só tem a sombra onde definiu seu deslocamento aqui, para ter certeza de que a
sombra realmente está apenas lá onde você deseja. Se você definir um raio de sombra e, por padrão, também
houver um raio de sombra padrão, você obtém esse efeito de derramamento, que é uma sombra
mais natural, afinal, então aqui é realmente o efeito que eu quero. Agora, adicionei uma sombra no Android usando a sombra
padrão do Android e no iOS. A propósito, no Android, é claro que você
pode alterar o nível de elevação para brincar com diferentes níveis de elevação até ter a aparência desejada
para o seu aplicativo, basicamente sombra suficiente. Agora, além de ter a sombra
aqui, acho que seria bom ter um preenchimento nessa caixa agora, porque os itens ficam
muito próximos às bordas, afinal, eles ficam diretamente nas bordas. Então, para mudar isso, também adicionarei um pouco de preenchimento
aqui e será 20 e, novamente, esse é um valor que você pode experimentar, encontre o
preenchimento que você prefere pessoalmente e acha que fica bem e se tentamos isso, agora isso parece muito melhor.
Além disso, cantos arredondados seriam
uma coisa agradável, então adicionarei um raio de borda aqui, digamos 10, para ter bordas ligeiramente arredondadas.
Se agora salvarmos isso, isso me parece muito agradável nas duas plataformas, nos dois dispositivos.
Portanto, agora é o contêiner de entrada,
não podemos ver a entrada e os botões provavelmente devem ter o mesmo tamanho também, mas
pelo menos, o contêiner agora está com boa aparência.