Agora, tivemos outro problema neste aplicativo aqui, porque uma vez que tudo foi resolvido aqui,
se formos rapidamente para lá, certifique-se de resolver
isso, teremos essa tela e essa tela também estará quebrada.
Temos dois problemas
aqui, na verdade, um é que a tela não pode ser rolada, o que
não foi um problema em dispositivos maiores, onde temos mais altura, mas aqui, não podemos
espremer todo o conteúdo da tela, portanto, podemos querer torná-lo rolável apenas para ser seguro e / ou, alternativamente, garantimos
que encaixamos tudo na tela e garantimos que esse é o caso, precisamos ir ao game over screen
e calcular nossas alturas aqui dinamicamente, especialmente a altura da imagem aqui, que agora estamos codificando para 300 pixels,
que é muito grande no dispositivo pequeno.
Agora que você já aprendeu sobre a solução
para isso, podemos novamente usar a API de dimensões importando-a do React Native e com as dimensões importadas,
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
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
ter o mesmo valor que uma altura, então copiarei
isso lá.
Importante aqui, não usamos altura, porque a imagem não deve ter 70% da altura disponível, mas
deve
ter a mesma altura que a largura e é calculada na largura do
dispositivo; portanto, usamos a largura lá embaixo também. Agora, o raio da borda deve ser metade disso, para que
possamos usá-lo aqui também e depois dividi-lo por dois, e teremos o raio da borda perfeito para
essa largura calculada dinamicamente. Então isso é uma coisa importante.
Agora, também temos alguns outros tamanhos que estamos configurando, como a margem vertical aqui que codificamos
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
janela, neste caso, altura e talvez dividir isso
por, digamos 20, e ver se isso parece bom e também lá embaixo na margem vertical, talvez dividir isso por 40
porque eram 15, eram 30, então vamos dividir isso por 40, se
dividirmos por 20 para ter a mesma relação entre essas duas
verticais de margem novamente.
Então, vamos resolver
isso novamente e vamos ver qual é o resultado, melhor, agora pelo menos podemos
ver o botão, mas ainda não é perfeito.
Essa margem aqui certamente ainda é muito grande e também o tamanho da fonte, também podemos diminuir isso.
Então, imagem mais redonda, certamente podemos dividir a altura por 30 aqui para esta margem
que estamos configurando e depois passar para 60 para a margem vertical do contêiner de resultado e para
o tamanho da fonte aqui, aqui podemos usar um if check se quisermos e, por exemplo, verifique nossa altura disponível aqui e, se
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
rolar porque, às vezes, com todos os ajustes, ainda não seremos capazes
de ajustá-lo na tela, pelo menos não sem
deixar tudo super pequeno, podemos importar esse rolo veja aqui e envolva nossa visualização com
isso, então adicione rolagem aqui ao redor de nossa visualização para torná-la rolável e agora vamos
dar uma olhada nisso
novamente,
vamos resolver isso, agora isso parece melhor. Ele se encaixa na tela e, se precisássemos, também poderíamos
rolar, podemos ver que no iPhone, aliás, se resolvermos isso,
no iPhone sempre podemos rolar um pouco
e ele salta de volta, temos a rolagem ativada e, portanto, agora isso
parece bom no iPhone, mas também neste dispositivo, onde reduzimos um pouco o tamanho da fonte, trabalhamos
um pouco no espaçamento aqui e, se isso ultrapassasse
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
ajuda a criar interfaces de usuário com boa aparência em diferentes tamanhos de dispositivo e, como você aprendeu, existem diferentes
maneiras de usá-la - para calcular dinamicamente tamanhos, seja para largura ou altura ou margens e também é claro que, se
as instruções simplesmente renderizarem conteúdo diferente, anexe estilos ou objetos de estilo diferentes com base nas condições de largura
ou altura que você está configurando aqui, mas isso não é tudo porque os usuários
também podem alterar a orientação do dispositivo enquanto o aplicativo é executado e que às vezes
também significa que precisamos alterar o estilo e / ou o layout.