Então, agora, com essas primeiras etapas básicas, se eu agora preencher um número aqui e continuarmos, tudo parece
bom para mim aqui, tudo funciona,
se iniciarmos agora um jogo, também quero
reduzir esse espaçamento que temos aqui e eu também quero ter certeza de que minha caixa está lá embaixo,
então
esse registro de suposições que temos é que isso
também parece melhor.
Agora isso é algo que podemos fazer na tela do jogo, é claro, porque é a
tela que estamos vendo atualmente.
Agora, claro, é o espaçamento, essa margem superior em nosso contêiner inferior, que é esse contêiner, margem superior é essa distância entre o
número aqui e o contêiner, e eu quero mudar isso. Agora, para mudar isso, podemos
novamente usar
a API de dimensões.
Então, aqui, importo novamente as dimensões do React Native e agora lá
em baixo, podemos calcular essa margem dinamicamente. O que podemos fazer aqui é que podemos obter novamente as dimensões da nossa
janela e, em seguida, aqui, a largura ou, neste caso, provavelmente a altura e depois dividir isso por
algo, mas isso seria muito complicado, poderíamos dividir isso por 20, por exemplo , por 20 anos e veja se isso parece bom, mas esse
é realmente um jogo de adivinhação, talvez não seja o que realmente queremos.
Em vez disso, poderíamos verificar quanta altura temos disponíveis e, em seguida, usar
um espaçamento diferente com base nisso. Poderíamos verificar se nossa altura é, digamos, maior que 600, se for esse o
caso, queremos ter um espaçamento de 20, caso contrário, temos um de 10. Portanto, também podemos usar as dimensões que estamos
calculando em uma condição if, neste caso em uma expressão ternária aqui, mas você também
pode usá-la em uma verificação if normal.
Então agora podemos voltar aqui e o que vemos agora é que, quando começamos o jogo, não temos uma lacuna
enorme aqui na tela menor, no iPhone, que é uma tela maior, no entanto, definitivamente temos um
maior espaço e para ver isso mais claro, é claro que você pode
brincar com isso e, por exemplo, usar 30 para telas menores e 30 para telas maiores e 5 para telas menores,
e agora você definitivamente deve ver isso.
Aqui temos uma pequena lacuna
e aqui temos uma lacuna maior.
Portanto, também podemos usar isso em condições if.
Agora, com isso, voltarei a 20 e 5 aqui, mas agora espero que também mostre outra maneira
de usar isso.
Você pode usar isso em condições que, naturalmente, oferecem muita flexibilidade nos casos em que
você não deseja usar a largura em um cálculo dinâmico, mas possui valores codificados diferentes que deseja usar com base
nos diferentes pontos de interrupção que deseja definido, um pouco como você o conhece em CSS, onde também possui consultas de
mídia e, em seguida, é possível renderizar coisas diferentes com base em consultas de
mídia diferentes.
Você também não está restrito a usar a API de dimensões lá em baixo na sua folha de estilo, é claro, você pode usá-la em qualquer
lugar em que possa usar Javascript, em todos os lugares basicamente em seus componentes. Você também pode anexar estilos totalmente diferentes com
base na largura ou altura disponível. Também poderíamos usar a janela de
obtenção de dimensões aqui, onde atribuo meu estilo e, por exemplo, verifique minha altura aqui, verifique se é maior que
600 e, nesse caso, use o contêiner de botões de estilos e, caso contrário, use o contêiner de
botões de estilos pequeno, se tivermos esse classe. Eu não tenho aqui, então vou me livrar disso, mas essa é outra maneira de
usar isso, você pode usá-lo em qualquer lugar onde o Javascript seja executado. Claro que você também pode usá-lo aqui, você
pode ter um if check aqui antes de retornar seu código jsx e obter a altura da janela, se for maior que 600 e se for
esse o caso, digamos, você retorne um código jsx totalmente diferente e, portanto,
esse código nunca funcionará se você voltar aqui e somente se você não fizer isso se verificar, por isso,
se você tiver
um dispositivo que não seja tão alto quanto este, então você o fará lá em baixo.
Então você é realmente flexível aqui e usa essa flexibilidade para criar os layouts que deseja, porque é
disso que se trata e que oferece muita flexibilidade para seus aplicativos.
Então esse é o
espaçamento aqui, agora eu também queria alterar meus itens de log lá em baixo, isso
também é algo que podemos fazer facilmente, é claro.
Temos nossos itens de lista lá e, nos itens da lista, definimos uma largura de 100% porque definimos a largura da nossa lista
aqui com o contêiner da lista e isso é definido como 60%.
Agora, 60% parece muito bom em dispositivos maiores, mas
em dispositivos menores, poderíamos ir além disso.
Agora, é claro que podemos tentar novamente resolver isso com regras diferentes aqui, onde definimos uma largura máxima e uma largura mínima
e talvez também possamos usar a API de dimensões para calcular isso dinamicamente ou usar novamente uma verificação if.
Aqui poderíamos novamente dizer que as dimensões obtêm a janela, obtêm a largura disponível neste caso
e, se for digamos maior que 500,
quero usar 60%, caso contrário, quero usar 80%. Então agora nós simplesmente renderizamos um contêiner de lista mais amplo e
mais amplo, com base na largura disponível no dispositivo
em que
estamos executando e vamos usar 350 aqui, talvez em vez de 500, porque estamos falando sobre
a largura, não sobre a altura.
Então agora aqui, se executarmos isso no iPhone, teremos a mesma largura de antes, mas na
tela menor, teremos itens maiores.
Então isso também é algo que podemos fazer e, é claro, você pode brincar com o ponto de
interrupção que está definindo efetivamente aqui.
você pode experimentar diferentes tamanhos de ponto de interrupção aqui.
É claro que você também pode ter
vários pontos de interrupção, pode ter expressões ternárias aninhadas aqui ou antes de escrever muitas expressões aninhadas, basta configurar objetos de
estilo diferentes aqui e carregá-los com diferentes se as verificações usadas lá em cima. Só para dar um exemplo disso,
poderíamos ter um contêiner de lista grande aqui e ali, definimos o flex um
e definimos nossa largura, digamos 80%, porque esse é o grande
e aqui temos o normal com 60% .
Agora não tenho nenhuma condição lá embaixo, mas tenho dois objetos de estilo
diferentes e agora só precisamos anexar objetos de estilo
diferentes lá em cima, não aqui, mas aqui, é claro, nessa visão. Bem, para fazer isso, podemos simplesmente configurar uma variável de estilo de contêiner de lista
aqui, por exemplo, e apontar para o contêiner de lista de estilos, que é nosso padrão, mas adicionar um if check aqui, onde
verificamos se as dimensões obtêm a largura da janela e agora se a largura aqui digamos, menor que 350, portanto, se tivermos um dispositivo pequeno, queremos
ter o contêiner de lista grande, para que possamos definir o estilo do contêiner de lista, essa
variável igual ao contêiner
de lista de estilos grande para apontar para
esse objeto de estilo e agora podemos usar esse objeto de estilo aqui na visualização em que precisamos do estilo
de contêiner de lista, usamos a variável agora que contém um objeto de estilo de contêiner de
lista diferente com base na largura do nosso dispositivo. E se agora salvarmos e executarmos novamente, você
verá que no iPhone com o dispositivo maior, onde temos mais largura, temos o contêiner menor e aqui
no telefone Android com o dispositivo menor, com menos largura, obtemos o recipiente maior.
Portanto, é o mesmo resultado de antes, mas
um pouco mais legível e agora poderíamos ter várias verificações se aqui, onde armazenamos estilos diferentes aqui
no estilo de contêiner de lista que então usamos
lá em baixo, isso pode ser mais legível do que ter expressões ternárias aninhadas lá em baixo no seu objeto de folha de estilo.
Então é assim que você pode brincar com isso e estar ciente da flexibilidade da API de dimensões é
realmente crucial aqui.