1
00:00:02,330 --> 00:00:06,200
Agora, às vezes, pode ser complicado adicionar várias verificações e

2
00:00:06,200 --> 00:00:09,920
aqui já temos três verificações no cabeçalho, por exemplo,

3
00:00:09,920 --> 00:00:14,070
certamente algo que podemos adicionar, mas talvez não seja o ideal.

4
00:00:14,480 --> 00:00:22,970
Em vez de manter nossos objetos de estilo mais limpos, podemos configurar um cabeçalho base aqui, por

5
00:00:23,360 --> 00:00:37,110
exemplo, cabeçalho base e, em seguida, adicionar headerIOS e headerAndroid, e agora o que fazemos é pegar todos esses estilos que mudam com base na plataforma para fora

6
00:00:37,110 --> 00:00:39,600
do estilo base, adicione-os aqui

7
00:00:39,860 --> 00:00:44,830
ao headerIOS e headerAndroid e no headerIOS, apenas mantemos

8
00:00:44,970 --> 00:00:51,020
a aparência do iOS aqui, tão branca, então essa cor para a

9
00:00:56,160 --> 00:01:04,100
borda na parte inferior e uma largura de pixel de uma para essa borda e aqui

10
00:01:04,200 --> 00:01:13,200
no Android, removemos essa verificação e mantenha a cor primária como cor de fundo e, por outro lado,

11
00:01:13,200 --> 00:01:19,800
nos livramos de nossa borda usando esses valores ou removendo-os completamente e sem

12
00:01:19,800 --> 00:01:20,970
defini-los.

13
00:01:20,970 --> 00:01:28,590
Agora só precisamos garantir que adicionamos headerIOS ou headerAndroid e, para isso, podemos subir aqui e configurar nosso

14
00:01:28,690 --> 00:01:35,050
objeto de estilos, onde nos fundimos em todos os nossos estilos de base de

15
00:01:35,070 --> 00:01:45,500
cabeçalho agora, para que eles estejam sempre definidos, mas agora também. pode mesclar no resultado da seleção de plataforma, que agora é um método que

16
00:01:45,500 --> 00:01:54,770
pega um objeto em que precisamos especificar uma chave iOS e apontar para o valor ou, nesse caso, o objeto que queremos

17
00:01:54,770 --> 00:02:02,270
usar se estivermos no iOS, que é estilos. headerIOS e adicione uma chave Android e aponte para

18
00:02:02,270 --> 00:02:05,310
os estilos que headerAndroid e com

19
00:02:05,540 --> 00:02:12,380
isso estamos dizendo ao React Native, mescle nas propriedades do valor, neste caso, um objeto

20
00:02:12,380 --> 00:02:15,680
que estamos selecionando para iOS e Android.

21
00:02:15,680 --> 00:02:21,410
Portanto, você sempre terá que passar um objeto para a seleção de plataforma e, em seguida, terá valores diferentes para

22
00:02:21,410 --> 00:02:26,390
iOS e Android, e o valor aqui também poderá ser um número, mas não funcionaria aqui, porque

23
00:02:26,390 --> 00:02:32,350
aqui esperamos um objeto para que possamos retire todos os pares de valores de propriedades e passe-os para o nosso estilo circundante.

24
00:02:32,360 --> 00:02:37,310
Então, aqui, um número não faz sentido, mas você pode usar select com qualquer tipo de valor;

25
00:02:37,370 --> 00:02:38,960
aqui, apenas precisamos de

26
00:02:39,020 --> 00:02:45,410
um objeto; portanto, estamos apontando para os objetos headerIOS e headerAndroid. E com isso, temos um código mais enxuto, temos estilos

27
00:02:45,680 --> 00:02:51,110
mais enxutos lá em baixo e depois temos um código com um estilo base, em que usamos a

28
00:02:51,110 --> 00:02:57,230
seleção de plataforma para escolher dinamicamente diferentes estilos com base na plataforma em que estamos rodando e, portanto, agora, temos

29
00:02:57,230 --> 00:03:04,760
a mesma aparência de antes, mas agora de uma maneira mais elegante. Outro lugar em nosso aplicativo onde poderíamos tirar vantagem

30
00:03:04,760 --> 00:03:11,360
disso é o nosso botão principal aqui. Nosso botão principal parece e parece o mesmo nas duas plataformas, o

31
00:03:11,480 --> 00:03:14,780
que não é horrível, mas também pode não ser o que queremos.

32
00:03:15,590 --> 00:03:21,590
Se formos ao nosso MainButton. No arquivo js, vemos que sempre usamos opacidade palpável aqui, mas na

33
00:03:21,590 --> 00:03:23,940
verdade no Android, podemos usar o efeito cascata.

34
00:03:23,990 --> 00:03:30,740
Agora, felizmente, o React Native tem o componente de feedback nativo palpável incorporado, que na verdade nos fornece

35
00:03:30,740 --> 00:03:33,830
um objeto palpável que possui um efeito

36
00:03:33,920 --> 00:03:38,730
cascata interno, por isso, queremos usá-lo no Android e opacidade palpável no iOS.

37
00:03:38,810 --> 00:03:44,300
Agora, é claro, podemos usar a API da plataforma que, portanto, também precisamos importar do React Native

38
00:03:44,330 --> 00:03:47,510
para usar um componente diferente aqui com base na plataforma

39
00:03:47,630 --> 00:03:52,520
e, para isso, podemos usar um recurso realmente interessante. O React não possui o React

40
00:03:52,520 --> 00:03:54,200
Native específico, mas podemos

41
00:03:54,290 --> 00:04:00,200
usar no React em geral, podemos configurar uma variável que começa com um caractere maiúsculo, para que possamos

42
00:04:00,230 --> 00:04:07,430
usá-la como um elemento jsx, porque apenas variáveis de caracteres maiúsculos podem ser usados como elementos jsx e denominamos isso, digamos, componente do

43
00:04:07,490 --> 00:04:12,170
botão, o nome depende totalmente de você e, por padrão, é uma opacidade palpável.

44
00:04:12,170 --> 00:04:19,730
Então, aponto o objeto de opacidade palpável aqui, sem colchetes angulares, apenas apontando para ele assim.

45
00:04:19,730 --> 00:04:27,350
Agora, podemos adicionar um if check e verificar se o sistema operacional da plataforma é igual ao Android e importante,

46
00:04:27,350 --> 00:04:29,230
também verificar outra coisa

47
00:04:29,240 --> 00:04:37,210
na plataforma, também verificar se a versão da plataforma é maior ou igual a 21 porque apenas a versão da API

48
00:04:37,230 --> 00:04:40,040
Android 21 ou superior suporta o efeito cascata.

49
00:04:40,100 --> 00:04:46,130
Portanto, se as duas opções forem verdadeiras, definiremos o componente do botão para feedback nativo tocável, para que então usemos o

50
00:04:46,130 --> 00:04:50,480
que possui o efeito cascata; caso contrário, usaremos o que possui o efeito da opacidade.

51
00:04:50,600 --> 00:04:56,930
Portanto, se estamos no Android e a versão do Android é alta o suficiente, é

52
00:04:56,930 --> 00:05:03,350
21 ou superior, usamos feedback nativo tocável. Agora, porque eu nomeio isso com um caractere inicial maiúsculo, podemos usá-lo

53
00:05:03,350 --> 00:05:12,260
aqui em vez da opacidade palpável em nosso código jsx, parece estranho a princípio, mas funcionará perfeitamente. Se agora salvarmos isso e isso

54
00:05:12,500 --> 00:05:22,640
reiniciar, você verá agora aqui o efeito cascata, poderá ver se mantivermos pressionado, o

55
00:05:22,640 --> 00:05:29,450
efeito cascata no botão. Ainda não parece perfeito, porque na verdade é retangular

56
00:05:29,450 --> 00:05:33,350
e não respeita o raio da borda, e nós vamos consertar isso,

57
00:05:33,350 --> 00:05:40,340
mas funciona e, por outro lado, aqui no iOS, temos o efeito de opacidade, como você pode dizer se pressionar isso.

58
00:05:40,340 --> 00:05:47,990
Então agora vamos corrigir o raio da borda e podemos fazer isso agrupando-o em outra visualização e isso é apenas um

59
00:05:47,990 --> 00:05:51,780
pequeno truque, uma solução alternativa que você precisa conhecer.

60
00:05:52,010 --> 00:05:57,490
Embrulhámos isso com outra visualização em que eu defino um estilo, digamos,

61
00:05:58,480 --> 00:06:07,430
contêiner de botão, adiciono esse estilo lá em baixo em nossa folha de estilo e nesse contêiner de botão aqui, que agora

62
00:06:07,430 --> 00:06:08,640
está envolvido

63
00:06:08,780 --> 00:06:17,910
em tudo, defino o mesmo raio de borda que defini no botão , então 25, neste caso, aqui e adiciono estouro oculto,

64
00:06:18,000 --> 00:06:25,320
o que significa que qualquer componente filho que ultrapassasse os limites desses componentes, portanto o componente com esse

65
00:06:25,320 --> 00:06:31,170
estilo é basicamente cortado e isso garantirá que o efeito cascata que agora é

66
00:06:31,170 --> 00:06:36,670
um O componente filho dessa exibição será cortado nas bordas arredondadas desse botão.

67
00:06:37,210 --> 00:06:44,070
Portanto, agora, se salvarmos e tentarmos novamente, você verá que o efeito cascata apenas preenche o botão, o que

68
00:06:44,070 --> 00:06:50,200
obviamente parece muito melhor e, no iOS, é claro, ainda temos o mesmo comportamento de antes.

69
00:06:51,070 --> 00:06:55,750
Portanto, usar a plataforma aqui em um if check também é algo que podemos fazer,

70
00:06:55,780 --> 00:07:01,180
mas também podemos usar esse truque para renderizar componentes totalmente diferentes com base na plataforma em que estamos

71
00:07:01,180 --> 00:07:01,780
rodando.