Agora, às vezes, pode ser complicado adicionar várias verificações e
aqui já temos três verificações no cabeçalho, por exemplo,
certamente algo que podemos adicionar, mas talvez não seja o ideal.
Em vez de manter nossos objetos de estilo mais limpos, podemos configurar um cabeçalho base aqui, por
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
do estilo base, adicione-os aqui
ao headerIOS e headerAndroid e no headerIOS, apenas mantemos
a aparência do iOS aqui, tão branca, então essa cor para a
borda na parte inferior e uma largura de pixel de uma para essa borda e aqui
no Android, removemos essa verificação e mantenha a cor primária como cor de fundo e, por outro lado,
nos livramos de nossa borda usando esses valores ou removendo-os completamente e sem
defini-los.
Agora só precisamos garantir que adicionamos headerIOS ou headerAndroid e, para isso, podemos subir aqui e configurar nosso
objeto de estilos, onde nos fundimos em todos os nossos estilos de base de
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
pega um objeto em que precisamos especificar uma chave iOS e apontar para o valor ou, nesse caso, o objeto que queremos
usar se estivermos no iOS, que é estilos. headerIOS e adicione uma chave Android e aponte para
os estilos que headerAndroid e com
isso estamos dizendo ao React Native, mescle nas propriedades do valor, neste caso, um objeto
que estamos selecionando para iOS e Android.
Portanto, você sempre terá que passar um objeto para a seleção de plataforma e, em seguida, terá valores diferentes para
iOS e Android, e o valor aqui também poderá ser um número, mas não funcionaria aqui, porque
aqui esperamos um objeto para que possamos retire todos os pares de valores de propriedades e passe-os para o nosso estilo circundante.
Então, aqui, um número não faz sentido, mas você pode usar select com qualquer tipo de valor;
aqui, apenas precisamos de
um objeto; portanto, estamos apontando para os objetos headerIOS e headerAndroid. E com isso, temos um código mais enxuto, temos estilos
mais enxutos lá em baixo e depois temos um código com um estilo base, em que usamos a
seleção de plataforma para escolher dinamicamente diferentes estilos com base na plataforma em que estamos rodando e, portanto, agora, temos
a mesma aparência de antes, mas agora de uma maneira mais elegante. Outro lugar em nosso aplicativo onde poderíamos tirar vantagem
disso é o nosso botão principal aqui. Nosso botão principal parece e parece o mesmo nas duas plataformas, o
que não é horrível, mas também pode não ser o que queremos.
Se formos ao nosso MainButton. No arquivo js, vemos que sempre usamos opacidade palpável aqui, mas na
verdade no Android, podemos usar o efeito cascata.
Agora, felizmente, o React Native tem o componente de feedback nativo palpável incorporado, que na verdade nos fornece
um objeto palpável que possui um efeito
cascata interno, por isso, queremos usá-lo no Android e opacidade palpável no iOS.
Agora, é claro, podemos usar a API da plataforma que, portanto, também precisamos importar do React Native
para usar um componente diferente aqui com base na plataforma
e, para isso, podemos usar um recurso realmente interessante. O React não possui o React
Native específico, mas podemos
usar no React em geral, podemos configurar uma variável que começa com um caractere maiúsculo, para que possamos
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
botão, o nome depende totalmente de você e, por padrão, é uma opacidade palpável.
Então, aponto o objeto de opacidade palpável aqui, sem colchetes angulares, apenas apontando para ele assim.
Agora, podemos adicionar um if check e verificar se o sistema operacional da plataforma é igual ao Android e importante,
também verificar outra coisa
na plataforma, também verificar se a versão da plataforma é maior ou igual a 21 porque apenas a versão da API
Android 21 ou superior suporta o efeito cascata.
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
que possui o efeito cascata; caso contrário, usaremos o que possui o efeito da opacidade.
Portanto, se estamos no Android e a versão do Android é alta o suficiente, é
21 ou superior, usamos feedback nativo tocável. Agora, porque eu nomeio isso com um caractere inicial maiúsculo, podemos usá-lo
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
reiniciar, você verá agora aqui o efeito cascata, poderá ver se mantivermos pressionado, o
efeito cascata no botão. Ainda não parece perfeito, porque na verdade é retangular
e não respeita o raio da borda, e nós vamos consertar isso,
mas funciona e, por outro lado, aqui no iOS, temos o efeito de opacidade, como você pode dizer se pressionar isso.
Então agora vamos corrigir o raio da borda e podemos fazer isso agrupando-o em outra visualização e isso é apenas um
pequeno truque, uma solução alternativa que você precisa conhecer.
Embrulhámos isso com outra visualização em que eu defino um estilo, digamos,
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
está envolvido
em tudo, defino o mesmo raio de borda que defini no botão , então 25, neste caso, aqui e adiciono estouro oculto,
o que significa que qualquer componente filho que ultrapassasse os limites desses componentes, portanto o componente com esse
estilo é basicamente cortado e isso garantirá que o efeito cascata que agora é
um O componente filho dessa exibição será cortado nas bordas arredondadas desse botão.
Portanto, agora, se salvarmos e tentarmos novamente, você verá que o efeito cascata apenas preenche o botão, o que
obviamente parece muito melhor e, no iOS, é claro, ainda temos o mesmo comportamento de antes.
Portanto, usar a plataforma aqui em um if check também é algo que podemos fazer,
mas também podemos usar esse truque para renderizar componentes totalmente diferentes com base na plataforma em que estamos
rodando.