1 00:00:02,830 --> 00:00:08,740 Agora, tivemos outro problema neste aplicativo aqui, porque uma vez que tudo foi resolvido aqui, 2 00:00:08,740 --> 00:00:12,200 se formos rapidamente para lá, certifique-se de resolver 3 00:00:12,220 --> 00:00:16,120 isso, teremos essa tela e essa tela também estará quebrada. 4 00:00:16,120 --> 00:00:17,670 Temos dois problemas 5 00:00:17,680 --> 00:00:23,190 aqui, na verdade, um é que a tela não pode ser rolada, o que 6 00:00:23,200 --> 00:00:29,050 não foi um problema em dispositivos maiores, onde temos mais altura, mas aqui, não podemos 7 00:00:29,050 --> 00:00:36,640 espremer todo o conteúdo da tela, portanto, podemos querer torná-lo rolável apenas para ser seguro e / ou, alternativamente, garantimos 8 00:00:36,640 --> 00:00:43,270 que encaixamos tudo na tela e garantimos que esse é o caso, precisamos ir ao game over screen 9 00:00:43,270 --> 00:00:50,230 e calcular nossas alturas aqui dinamicamente, especialmente a altura da imagem aqui, que agora estamos codificando para 300 pixels, 10 00:00:50,230 --> 00:00:52,810 que é muito grande no dispositivo pequeno. 11 00:00:52,810 --> 00:00:55,950 Agora que você já aprendeu sobre a solução 12 00:00:56,050 --> 00:01:02,880 para isso, podemos novamente usar a API de dimensões importando-a do React Native e com as dimensões importadas, 13 00:01:02,890 --> 00:01:11,430 podemos ir para a nossa folha de estilo e no contêiner de imagens, agora podemos dizer que as dimensões obtêm a largura da 14 00:01:12,150 --> 00:01:21,590 janela e Agora, digamos que para o contêiner de imagem, para a imagem aqui, queremos ter uma largura de talvez 70% da largura disponível e queremos 15 00:01:21,590 --> 00:01:24,860 ter o mesmo valor que uma altura, então copiarei 16 00:01:24,860 --> 00:01:25,920 isso lá. 17 00:01:25,920 --> 00:01:32,180 Importante aqui, não usamos altura, porque a imagem não deve ter 70% da altura disponível, mas 18 00:01:32,480 --> 00:01:32,960 deve 19 00:01:33,200 --> 00:01:38,390 ter a mesma altura que a largura e é calculada na largura do 20 00:01:38,420 --> 00:01:45,260 dispositivo; portanto, usamos a largura lá embaixo também. Agora, o raio da borda deve ser metade disso, para que 21 00:01:45,380 --> 00:01:50,840 possamos usá-lo aqui também e depois dividi-lo por dois, e teremos o raio da borda perfeito para 22 00:01:50,900 --> 00:01:54,170 essa largura calculada dinamicamente. Então isso é uma coisa importante. 23 00:01:54,200 --> 00:01:59,030 Agora, também temos alguns outros tamanhos que estamos configurando, como a margem vertical aqui que codificamos 24 00:01:59,030 --> 00:02:07,600 para 30, a mesma para o contêiner de resultados e também podemos mudar isso. Então aqui também podemos dizer que as dimensões obtêm 25 00:02:07,600 --> 00:02:11,380 janela, neste caso, altura e talvez dividir isso 26 00:02:11,380 --> 00:02:21,010 por, digamos 20, e ver se isso parece bom e também lá embaixo na margem vertical, talvez dividir isso por 40 27 00:02:21,040 --> 00:02:26,720 porque eram 15, eram 30, então vamos dividir isso por 40, se 28 00:02:26,740 --> 00:02:31,960 dividirmos por 20 para ter a mesma relação entre essas duas 29 00:02:31,960 --> 00:02:34,370 verticais de margem novamente. 30 00:02:34,510 --> 00:02:35,980 Então, vamos resolver 31 00:02:36,010 --> 00:02:41,150 isso novamente e vamos ver qual é o resultado, melhor, agora pelo menos podemos 32 00:02:41,180 --> 00:02:44,100 ver o botão, mas ainda não é perfeito. 33 00:02:44,240 --> 00:02:50,150 Essa margem aqui certamente ainda é muito grande e também o tamanho da fonte, também podemos diminuir isso. 34 00:02:50,330 --> 00:02:56,570 Então, imagem mais redonda, certamente podemos dividir a altura por 30 aqui para esta margem 35 00:02:56,570 --> 00:03:03,970 que estamos configurando e depois passar para 60 para a margem vertical do contêiner de resultado e para 36 00:03:04,130 --> 00:03:13,860 o tamanho da fonte aqui, aqui podemos usar um if check se quisermos e, por exemplo, verifique nossa altura disponível aqui e, se 37 00:03:13,860 --> 00:03:25,210 for menor que 400, usamos 16 aqui e, caso contrário, usamos 20. Agora, por último, mas não menos importante, também para garantir que possamos 38 00:03:25,210 --> 00:03:31,310 rolar porque, às vezes, com todos os ajustes, ainda não seremos capazes 39 00:03:31,310 --> 00:03:35,400 de ajustá-lo na tela, pelo menos não sem 40 00:03:35,510 --> 00:03:42,990 deixar tudo super pequeno, podemos importar esse rolo veja aqui e envolva nossa visualização com 41 00:03:42,990 --> 00:03:50,730 isso, então adicione rolagem aqui ao redor de nossa visualização para torná-la rolável e agora vamos 42 00:03:50,850 --> 00:03:52,860 dar uma olhada nisso 43 00:03:52,880 --> 00:03:53,860 novamente, 44 00:04:03,670 --> 00:04:10,700 vamos resolver isso, agora isso parece melhor. Ele se encaixa na tela e, se precisássemos, também poderíamos 45 00:04:10,700 --> 00:04:14,090 rolar, podemos ver que no iPhone, aliás, se resolvermos isso, 46 00:04:19,360 --> 00:04:22,390 no iPhone sempre podemos rolar um pouco 47 00:04:22,390 --> 00:04:27,010 e ele salta de volta, temos a rolagem ativada e, portanto, agora isso 48 00:04:27,040 --> 00:04:32,920 parece bom no iPhone, mas também neste dispositivo, onde reduzimos um pouco o tamanho da fonte, trabalhamos 49 00:04:33,070 --> 00:04:36,420 um pouco no espaçamento aqui e, se isso ultrapassasse 50 00:04:36,520 --> 00:04:45,760 nossos limites, poderíamos role-o para que sempre possamos interagir com o nosso jogo. Essa é a API de dimensões aqui e a API de dimensões realmente nos 51 00:04:45,760 --> 00:04:52,250 ajuda a criar interfaces de usuário com boa aparência em diferentes tamanhos de dispositivo e, como você aprendeu, existem diferentes 52 00:04:52,250 --> 00:04:59,230 maneiras de usá-la - para calcular dinamicamente tamanhos, seja para largura ou altura ou margens e também é claro que, se 53 00:04:59,440 --> 00:05:05,710 as instruções simplesmente renderizarem conteúdo diferente, anexe estilos ou objetos de estilo diferentes com base nas condições de largura 54 00:05:05,710 --> 00:05:10,750 ou altura que você está configurando aqui, mas isso não é tudo porque os usuários 55 00:05:10,750 --> 00:05:16,180 também podem alterar a orientação do dispositivo enquanto o aplicativo é executado e que às vezes 56 00:05:16,180 --> 00:05:20,440 também significa que precisamos alterar o estilo e / ou o layout.