1
00:00:02,200 --> 00:00:04,720
Há algumas coisas em que poderíamos continuar,

2
00:00:04,740 --> 00:00:08,950
mas quero continuar com o contêiner de entrada, que é o contêiner em

3
00:00:08,980 --> 00:00:15,340
torno dessas entradas; portanto, ao redor de selecionar um texto numérico, ao redor da entrada de texto aqui e ao redor

4
00:00:15,340 --> 00:00:18,970
dos botões e esse contêiner possui um largura e alinha os itens,

5
00:00:18,970 --> 00:00:21,820
mas como eu descrevi anteriormente, seria bom ter

6
00:00:21,820 --> 00:00:27,410
esse cartão para olhar lá e, para isso, precisamos de alguns estilos mais exóticos que pareçam realmente chiques,

7
00:00:27,410 --> 00:00:30,450
mas simplesmente algumas regras de estilo que não usamos antes.

8
00:00:30,470 --> 00:00:34,080
Por exemplo, quero adicionar uma sombra, uma leve sombra

9
00:00:34,110 --> 00:00:43,310
projetada e você faz isso com quatro propriedades principais que você pode usar. Uma cor, um deslocamento, uma opacidade e um raio.

10
00:00:43,310 --> 00:00:46,760
Agora uma cor da sombra deve estar clara, é a cor da sua sombra.

11
00:00:46,760 --> 00:00:50,210
O deslocamento da sombra é o quanto ele é deslocado do seu contêiner

12
00:00:50,210 --> 00:00:54,290
e, na verdade, leva o objeto que, por sua vez, ocupa uma largura e uma altura,

13
00:00:54,290 --> 00:00:59,390
então você pode dizer que eu quero deslocar a sombra em dois pixels em relação à largura e em dois

14
00:00:59,390 --> 00:01:07,220
pixels em relação à altura , que influencia o efeito tridimensional que você está criando. A opacidade descreve como essa sombra é transparente, se você

15
00:01:07,280 --> 00:01:08,990
definir a opacidade como

16
00:01:08,990 --> 00:01:15,950
1, terá uma sombra forte totalmente transparente e, portanto, muito visível e se você aumentar ou diminuir o

17
00:01:15,950 --> 00:01:21,800
que devo dizer, se você definir 0. 1, por exemplo, você tem

18
00:01:21,950 --> 00:01:28,910
uma sombra que mal consegue ver. O raio da sombra basicamente descreve o quão nítida

19
00:01:28,910 --> 00:01:35,290
é essa sombra, se ela tem arestas ou se é um pouco mais embaçada, mais suave, coisas assim.

20
00:01:35,330 --> 00:01:40,610
Então, aqui vou com uma cor de sombra preta, pelo jeito que você também pode usar

21
00:01:40,610 --> 00:01:47,720
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

22
00:01:47,870 --> 00:01:53,270
alfa canal para descrever a transparência aqui. Embora a transparência aqui não tenha influência direta, para

23
00:01:53,270 --> 00:01:59,030
a sombra, será necessário definir isso com opacidade da sombra. Para outras cores, isso teria influência, mas

24
00:01:59,030 --> 00:02:04,100
isso é apenas uma nota lateral. Em anexo, você encontrará um link com mais

25
00:02:04,100 --> 00:02:09,260
detalhes sobre como configurar cores e quais valores de cores o React Native aceita porque, obviamente, é muito

26
00:02:09,260 --> 00:02:14,030
mais exaustivo do que o que eu posso mostrar aqui. Vou apenas usar o nome porque

27
00:02:14,030 --> 00:02:20,420
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

28
00:02:20,510 --> 00:02:23,990
deslocamento e, como eu disse, o deslocamento aqui leva um objeto.

29
00:02:23,990 --> 00:02:31,040
Agora, caso você se pergunte como eu sei disso, por exemplo, meu IDE me diz que, se eu começar a digitar o deslocamento

30
00:02:31,040 --> 00:02:36,530
da sombra aqui, você verá a dica de que eu entendi direito, você normalmente deveria estar entendendo

31
00:02:36,530 --> 00:02:42,830
isso também, mas, caso não o faça obtenha isso, é claro que os documentos oficiais são o local a seguir,

32
00:02:42,830 --> 00:02:49,100
sempre em guias, componentes e APIs, você pode clicar no componente de visualização lá ou simplesmente clicar nos documentos de

33
00:02:49,100 --> 00:02:57,800
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

34
00:02:57,860 --> 00:03:03,890
os estilos de exibição suportados e, claro, também como configurá-los; por exemplo, você aprendeu que o deslocamento da sombra

35
00:03:03,890 --> 00:03:10,040
é um objeto com um número e uma altura. Para a cor, você aprendeu que isso leva uma

36
00:03:10,040 --> 00:03:14,630
cor e esse é exatamente o link que você encontra anexado aqui, onde descreveu que

37
00:03:14,630 --> 00:03:16,740
tipo de cores você pode usar.

38
00:03:17,030 --> 00:03:24,020
Então, isso é apenas uma pequena nota lateral, aqui vou usar um deslocamento de sombra com largura zero, mas

39
00:03:24,020 --> 00:03:32,030
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

40
00:03:32,030 --> 00:03:40,310
à direita, na verdade, e também adicionarei um raio de sombra, que é um número de algumas, vamos tentar seis e ver o que

41
00:03:40,310 --> 00:03:41,870
isso faz e, por

42
00:03:42,650 --> 00:03:49,970
último, mas não menos importante, uma opacidade de sombra 0. 26, que é relativamente transparente, mas que

43
00:03:49,970 --> 00:03:51,610
parece bem legal.

44
00:03:51,850 --> 00:03:58,480
Além disso, darei ao meu contêiner de entrada uma cor de fundo branca, para garantir que ele seja sempre branco

45
00:03:58,480 --> 00:04:03,370
e não transparente, o que é o padrão, de modo que, se tivermos outra

46
00:04:03,370 --> 00:04:08,890
cor de fundo atrás do contêiner, digamos como a cor base de a tela inteira, o contêiner

47
00:04:08,920 --> 00:04:11,100
aqui sempre teria um fundo branco.

48
00:04:11,140 --> 00:04:16,180
Agora, com isso, se você salvar isso, deverá ver uma sombra parecida com isso no

49
00:04:16,180 --> 00:04:20,190
iOS, mas não vê nenhuma sombra no Android e isso não é

50
00:04:20,410 --> 00:04:28,120
um bug. Em vez disso, as propriedades da sombra aqui funcionam apenas no iOS e isso deixa um importante pergunta, como você pode

51
00:04:28,120 --> 00:04:32,820
definir uma sombra no Android então? Isso não é possível?

52
00:04:33,070 --> 00:04:39,610
É mas lá você tem um suporte de estilo especial, o suporte de elevação. Isso funciona apenas no Android, pois a dica de ferramenta

53
00:04:39,610 --> 00:04:48,280
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,

54
00:04:48,280 --> 00:04:55,090
usa a elevação padrão do design do material Android, para que você tenha menos controle, mas

55
00:04:55,090 --> 00:05:00,130
por outro lado, obtém a aparência padrão do design do material com

56
00:05:00,130 --> 00:05:06,070
a qual seus usuários podem estar acostumados, o bom disso e agora também temos

57
00:05:06,340 --> 00:05:13,590
uma sombra aqui no Android e no iOS. No iOS, você também notará que a sombra é visível à

58
00:05:13,590 --> 00:05:19,840
esquerda e à direita da caixa, mesmo que eu tenha atribuído um deslocamento de sombra de 0 para a largura,

59
00:05:19,840 --> 00:05:25,480
que pode ser controlado com o raio da sombra, se você definir a sombra raio a zero, você

60
00:05:25,480 --> 00:05:30,970
verá que só tem a sombra onde definiu seu deslocamento aqui, para ter certeza de que a

61
00:05:30,970 --> 00:05:37,060
sombra realmente está apenas lá onde você deseja. Se você definir um raio de sombra e, por padrão, também

62
00:05:37,060 --> 00:05:41,350
houver um raio de sombra padrão, você obtém esse efeito de derramamento, que é uma sombra

63
00:05:41,350 --> 00:05:47,860
mais natural, afinal, então aqui é realmente o efeito que eu quero. Agora, adicionei uma sombra no Android usando a sombra

64
00:05:47,920 --> 00:05:53,500
padrão do Android e no iOS. A propósito, no Android, é claro que você

65
00:05:53,500 --> 00:05:59,950
pode alterar o nível de elevação para brincar com diferentes níveis de elevação até ter a aparência desejada

66
00:05:59,950 --> 00:06:05,530
para o seu aplicativo, basicamente sombra suficiente. Agora, além de ter a sombra

67
00:06:05,530 --> 00:06:11,680
aqui, acho que seria bom ter um preenchimento nessa caixa agora, porque os itens ficam

68
00:06:11,680 --> 00:06:20,350
muito próximos às bordas, afinal, eles ficam diretamente nas bordas. Então, para mudar isso, também adicionarei um pouco de preenchimento

69
00:06:20,350 --> 00:06:26,440
aqui e será 20 e, novamente, esse é um valor que você pode experimentar, encontre o

70
00:06:26,440 --> 00:06:33,910
preenchimento que você prefere pessoalmente e acha que fica bem e se tentamos isso, agora isso parece muito melhor.

71
00:06:33,970 --> 00:06:36,700
Além disso, cantos arredondados seriam

72
00:06:37,120 --> 00:06:45,870
uma coisa agradável, então adicionarei um raio de borda aqui, digamos 10, para ter bordas ligeiramente arredondadas.

73
00:06:45,870 --> 00:06:52,940
Se agora salvarmos isso, isso me parece muito agradável nas duas plataformas, nos dois dispositivos.

74
00:06:52,940 --> 00:06:54,740
Portanto, agora é o contêiner de entrada,

75
00:06:54,770 --> 00:06:58,570
não podemos ver a entrada e os botões provavelmente devem ter o mesmo tamanho também, mas

76
00:06:58,820 --> 00:07:00,950
pelo menos, o contêiner agora está com boa aparência.