1 00:00:02,230 --> 00:00:08,380 Por isso, analisamos detalhadamente as dimensões, orientações e renderização de diferentes estilos e layouts com base na largura 2 00:00:08,380 --> 00:00:14,030 e altura disponíveis e também como reagir a alterações na largura e altura quando você gira 3 00:00:14,080 --> 00:00:17,010 o dispositivo, por exemplo, coisas muito importantes. 4 00:00:17,680 --> 00:00:22,900 Vamos agora ver como você pode renderizar diferentes estilos ou layouts ou o que quiser com 5 00:00:23,080 --> 00:00:25,660 base na plataforma em que está executando. 6 00:00:25,660 --> 00:00:31,120 No momento, temos basicamente um aplicativo idêntico no iOS e no Android, com uma exceção e esse é o 7 00:00:31,120 --> 00:00:32,240 nosso botão aqui. 8 00:00:32,320 --> 00:00:38,320 Os botões parecem diferentes porque o componente de botão que estamos usando é um componente incorporado ao React Native 9 00:00:38,320 --> 00:00:46,060 e é um dos muito raros, na verdade o único componente que o React Native oferece que se ajusta automaticamente com base na plataforma em 10 00:00:46,060 --> 00:00:49,310 que o aplicativo está sendo executado, nenhum outro O componente 11 00:00:49,390 --> 00:00:56,290 realmente faz isso, mas é claro, você pode escrever um código para ajustar seus estilos, lógica de layout, o que quiser, com 12 00:00:56,320 --> 00:01:01,000 base na plataforma em que está executando. Para ver um exemplo, vamos ao nosso 13 00:01:01,000 --> 00:01:04,170 componente de cabeçalho e lá, vamos trabalhar na maneira 14 00:01:04,180 --> 00:01:08,020 como apresentamos esse cabeçalho. No Android, podemos ter essa 15 00:01:08,020 --> 00:01:12,810 cor de plano de fundo e, em seguida, o texto na frente, no iOS, 16 00:01:12,820 --> 00:01:19,240 podemos ter uma cor de plano de fundo branco e ter apenas uma borda fina na parte inferior. Em 17 00:01:19,240 --> 00:01:21,750 vez disso, ter o texto em nossa 18 00:01:21,760 --> 00:01:25,270 cor principal, isso seria Afinal, o iOS é mais típico. 19 00:01:25,360 --> 00:01:31,810 Agora, para descobrir em qual plataforma você está executando, o React Native já cobriu, o objeto da plataforma em 20 00:01:32,110 --> 00:01:37,630 que as dimensões ajudam a descobrir as dimensões do dispositivo em que você está executando, a 21 00:01:37,630 --> 00:01:41,750 plataforma ajuda a descobrir a plataforma do dispositivo você está correndo. 22 00:01:41,910 --> 00:01:45,270 Portanto, agora nos estilos que você estava criando, 23 00:01:45,270 --> 00:01:48,660 podemos renderizar uma cor de fundo diferente com base nisso. 24 00:01:48,810 --> 00:01:53,310 Podemos usar a plataforma e agora existem algumas propriedades que você 25 00:01:53,310 --> 00:02:01,170 pode usar e, por exemplo, você possui a propriedade OS e o SO é basicamente o sistema operacional e é um 26 00:02:01,170 --> 00:02:02,220 dos valores 27 00:02:02,220 --> 00:02:05,670 que você vê aqui, principalmente o iOS ou Android. 28 00:02:05,700 --> 00:02:12,000 Portanto, aqui podemos verificar se isso é igual a, digamos, Android e, neste caso, defino minha cor 29 00:02:12,000 --> 00:02:13,570 de plano de fundo 30 00:02:13,770 --> 00:02:20,130 como cores primárias, mas se não for Android e, portanto, se for iOS, defino como digamos branco. 31 00:02:20,130 --> 00:02:28,800 Agora, se fizermos isso e salvarmos isso, vemos um cabeçalho branco aqui no dispositivo iOS e um cabeçalho 32 00:02:28,980 --> 00:02:31,090 colorido no dispositivo Android. 33 00:02:31,260 --> 00:02:36,960 Agora, é claro que você não precisa configurar nenhum ouvinte na plataforma e também não oferece essa funcionalidade 34 00:02:37,140 --> 00:02:42,090 porque a plataforma não pode mudar enquanto o aplicativo está em execução, é o mesmo 35 00:02:42,090 --> 00:02:43,800 sistema operacional o tempo todo. 36 00:02:43,830 --> 00:02:46,240 Agora vamos terminar o estilo para iOS. 37 00:02:46,650 --> 00:02:53,340 Eu disse que quero ter uma borda fina na parte inferior, para que possamos 38 00:02:53,340 --> 00:03:01,410 adicionar uma cor inferior à borda e verificar a plataforma e, se o sistema operacional for igual ao 39 00:03:01,410 --> 00:03:07,950 iOS, desejo definir a cor inferior da borda para que digamos esta acinzentada 40 00:03:07,980 --> 00:03:16,350 cor, caso contrário, enviarei para branco ou transparente, para que não possamos vê-lo no Android e adicione uma 41 00:03:16,770 --> 00:03:25,590 borda inferior com, digamos, e também fazemos a verificação do iOS, digamos, um pixel no iOS e zero no Android. 42 00:03:25,590 --> 00:03:31,410 Portanto, agora não devemos ver nada no Android, mas temos essa borda fina aqui no iOS. 43 00:03:31,530 --> 00:03:39,530 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 44 00:03:39,590 --> 00:03:42,400 definido no suporte de estilo; portanto, no texto do 45 00:03:42,770 --> 00:03:48,950 título, podemos adicionar um suporte de estilo e apontar para estilos. título aqui ou o que você quiser 46 00:03:48,960 --> 00:03:55,440 nomear e adicione um objeto de estilo de título aqui em nossa folha de estilo, onde 47 00:03:55,860 --> 00:04:01,380 definimos a cor que é a cor do texto também com base na plataforma. 48 00:04:01,770 --> 00:04:08,970 Se for iOS, digamos que definimos isso para cores. primário e caso contrário, vamos configurá-lo para branco, era preto 49 00:04:08,970 --> 00:04:09,830 antes, 50 00:04:09,840 --> 00:04:11,700 agora vamos configurá-lo para branco. 51 00:04:11,700 --> 00:04:18,990 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 52 00:04:18,990 --> 00:04:22,600 estilos diferentes com base na plataforma em que está executando, como 53 00:04:22,620 --> 00:04:23,400 pode ver.