Por isso, analisamos detalhadamente as dimensões, orientações e renderização de diferentes estilos e layouts com base na largura
e altura disponíveis e também como reagir a alterações na largura e altura quando você gira
o dispositivo, por exemplo, coisas muito importantes.
Vamos agora ver como você pode renderizar diferentes estilos ou layouts ou o que quiser com
base na plataforma em que está executando.
No momento, temos basicamente um aplicativo idêntico no iOS e no Android, com uma exceção e esse é o
nosso botão aqui.
Os botões parecem diferentes porque o componente de botão que estamos usando é um componente incorporado ao React Native
e é um dos muito raros, na verdade o único componente que o React Native oferece que se ajusta automaticamente com base na plataforma em
que o aplicativo está sendo executado, nenhum outro O componente
realmente faz isso, mas é claro, você pode escrever um código para ajustar seus estilos, lógica de layout, o que quiser, com
base na plataforma em que está executando. Para ver um exemplo, vamos ao nosso
componente de cabeçalho e lá, vamos trabalhar na maneira
como apresentamos esse cabeçalho. No Android, podemos ter essa
cor de plano de fundo e, em seguida, o texto na frente, no iOS,
podemos ter uma cor de plano de fundo branco e ter apenas uma borda fina na parte inferior. Em
vez disso, ter o texto em nossa
cor principal, isso seria Afinal, o iOS é mais típico.
Agora, para descobrir em qual plataforma você está executando, o React Native já cobriu, o objeto da plataforma em
que as dimensões ajudam a descobrir as dimensões do dispositivo em que você está executando, a
plataforma ajuda a descobrir a plataforma do dispositivo você está correndo.
Portanto, agora nos estilos que você estava criando,
podemos renderizar uma cor de fundo diferente com base nisso.
Podemos usar a plataforma e agora existem algumas propriedades que você
pode usar e, por exemplo, você possui a propriedade OS e o SO é basicamente o sistema operacional e é um
dos valores
que você vê aqui, principalmente o iOS ou Android.
Portanto, aqui podemos verificar se isso é igual a, digamos, Android e, neste caso, defino minha cor
de plano de fundo
como cores primárias, mas se não for Android e, portanto, se for iOS, defino como digamos branco.
Agora, se fizermos isso e salvarmos isso, vemos um cabeçalho branco aqui no dispositivo iOS e um cabeçalho
colorido no dispositivo Android.
Agora, é claro que você não precisa configurar nenhum ouvinte na plataforma e também não oferece essa funcionalidade
porque a plataforma não pode mudar enquanto o aplicativo está em execução, é o mesmo
sistema operacional o tempo todo.
Agora vamos terminar o estilo para iOS.
Eu disse que quero ter uma borda fina na parte inferior, para que possamos
adicionar uma cor inferior à borda e verificar a plataforma e, se o sistema operacional for igual ao
iOS, desejo definir a cor inferior da borda para que digamos esta acinzentada
cor, caso contrário, enviarei para branco ou transparente, para que não possamos vê-lo no Android e adicione uma
borda inferior com, digamos, e também fazemos a verificação do iOS, digamos, um pixel no iOS e zero no Android.
Portanto, agora não devemos ver nada no Android, mas temos essa borda fina aqui no iOS.
Por fim, mas não menos importante, vamos colorir o texto indo para o texto do título aqui e o texto do título realmente se mescla em qualquer estilo
definido no suporte de estilo; portanto, no texto do
título, podemos adicionar um suporte de estilo e apontar para estilos. título aqui ou o que você quiser
nomear e adicione um objeto de estilo de título aqui em nossa folha de estilo, onde
definimos a cor que é a cor do texto também com base na plataforma.
Se for iOS, digamos que definimos isso para cores. primário e caso contrário, vamos configurá-lo para branco, era preto
antes,
agora vamos configurá-lo para branco.
Agora, temos um título em branco aqui no Android, mas um título colorido aqui no iOS e é assim que fácil você pode definir
estilos diferentes com base na plataforma em que está executando, como
pode ver.