Agora, com isso, se formos para a próxima tela onde temos um jogo em execução, enfrentaremos o próximo problema
lá. No
modo retrato, parece bom, mas se girarmos o dispositivo, isso não parecerá muito bom.
Agora, aqui, uma solução poderia ser simplesmente mudar um pouco o estilo,
se não tivermos tanta altura disponível.
Como alternativa, renderizamos um layout totalmente diferente com base no espaço disponível, ambas
seriam opções que você tem.
Você pode, por exemplo, tentar renderizar isso lado a lado, simplesmente adicionando um if check aqui na tela do
jogo, onde você retorna um código jsx totalmente diferente e talvez também com um estilo totalmente diferente
e, portanto, um layout baseado na largura ou altura disponível e, em seguida, você só precisaria configurar um ouvinte que renderize
novamente seu componente.
Portanto, com o cenário definido, como fizemos aqui na tela inicial do jogo, para renderizar
novamente seu componente sempre que for esse o caso. Eu acho que seria bem interessante e, portanto, é algo que farei aqui.
O que vou fazer é querer renderizar meus botões aqui à esquerda e à direita do contêiner de
números, se tivermos apenas uma altura limitada disponível e renderizá-la como sempre, se
não fosse o caso.
Então, eu quero renderizar código jsx totalmente diferente com base em minhas dimensões.
Então, aqui vou adicionar um if check e dizer se as dimensões obtêm a altura da janela, digamos que seja menor que 500
e veremos se esse valor funciona,
então eu quero retornar basicamente esse código jsx
lá em baixo, então eu ' Vou copiar isso, colocá-lo entre parênteses aqui, entre parênteses, mas não quero ter meu cartão aqui.
Em vez disso, terei o primeiro botão principal antes do meu número, o próximo após o número
e eu vou ter tudo disso dentro de uma
nova visão aqui, que abordarei sobre isso, que deve colocar essas três coisas em sequência.
Então, adicionarei um novo estilo aqui, estilos, digamos, controles ou o que você quiser nomeá-lo e agora adiciono isso
à minha folha de estilo aqui e é a mesma folha de estilo
de antes, porque apenas configura os estilos que eu posso usar em qualquer lugar componente,
independentemente de quais condições eu renderize o que e
aqui, definirei essa direção flexível para linha, o padrão é coluna e agora queremos ter uma linha aqui e
definir o conteúdo justificado para o espaço e veremos como isso parece. Se agora salvarmos isso e iniciarmos um novo jogo aqui no modo paisagem, não parecerá tão
ruim, ainda há
trabalho a fazer, mas agora é o que recebo aqui no modo paisagem ou em dispositivos com altura limitada.
Em dispositivos com mais altura,
ainda recebo a visualização antiga, que é exatamente o que eu quero.
Agora vamos corrigir essa visualização aqui e, portanto, podemos simplesmente ir para os controles e fornecer uma largura
de, digamos, 80%, para que o contêiner geral seja maior e muito importante, defina alinhar itens aqui para centralizar, de modo que o
contêiner numérico e os dois botões estão todos centralizados verticalmente. E agora com isso, se fizermos
outra tentativa aqui, inserimos isso, parece muito melhor e funciona da mesma maneira que antes, mas
agora temos um layout diferente com base em nossas dimensões.
Agora é claro que o problema é que esse layout não muda se girarmos, não o fim
do mundo, mas podemos querer voltar para o layout antigo e você
aprendeu como isso funciona, só precisamos gerenciar isso com state e set um ouvinte.
Agora eu já tenho useState e useEffect aqui na tela do jogo, então tudo o que
precisamos fazer no componente da tela do jogo é começar configurando esse estado aqui e, no final, o que queremos gerenciar aqui
é a largura do dispositivo, que muda com o tempo, talvez nomeie essa largura de dispositivo disponível para deixar claro que não estamos definindo a largura do dispositivo
aqui, apenas definindo a largura do dispositivo detectado; portanto, você
também pode nomear a largura do dispositivo detectado.
Vou chamá-lo de largura disponível do dispositivo e definir a largura disponível do dispositivo. Eu gerencio isso com o useState, onde uso dimensões para obter a
largura da janela para obter a largura disponível do dispositivo e, é claro, acabei de reconhecer que isso está errado, estamos interessados na altura, não na
largura,
mas também precisaremos da largura
para essa verificação aqui, então precisaremos de ambos.
Portanto, temos a largura do dispositivo disponível e também gerenciarei outro estado, que
é a
altura do dispositivo disponível. Aqui também é
definido a altura do dispositivo disponível e,
portanto, aqui inicialmente, obtemos a altura do dispositivo disponível e
agora precisamos alterar ambos quando nosso mudanças de orientação. Para isso, podemos usar o efeito, por exemplo, aqui, configurar uma
função que seja executada sempre que nosso componente for renderizado e, nessa função, configurarei dimensões, adicionarei ouvinte de eventos, ouviremos os eventos de alteração e configurarei uma função
que deve ser acionada quando isso for necessário. Nesse caso, o layout de atualização, por exemplo, é um
nome adequado, porque é exatamente isso que estamos fazendo e,
lá, chamo de definir a largura disponível do dispositivo e defino isso para as dimensões obter janela. largura e, é claro, também define a altura disponível do dispositivo para
dimensões, para obter a altura da janela. O layout de atualização é, portanto, a função que
apontamos em nosso ouvinte de evento em dimensões e, como antes, precisamos de uma função
de limpeza para evitar renderizações desnecessárias e, nessa função, simplesmente usamos dimensões remover a alteração de ouvinte de evento
onde apontamos para o layout de atualização e 'são bons. Agora, apenas precisamos usar nossos dois estados aqui - largura
e altura disponíveis do dispositivo.
Portanto, se verificar aqui, eu uso a largura disponível do dispositivo e aqui onde estou interessado
na altura, uso a altura disponível do dispositivo. Se agora salvarmos isso, teremos um layout em que, se
iniciarmos um jogo, teremos essa aparência, mas se girarmos para o modo paisagem, isso mudará e, é
claro, também mudará novamente, se necessário. Aqui no iOS, temos essa aparência e, se rodarmos. Portanto, agora isso parece realmente
bom e está dando a aparência desejada, com base na largura e altura disponíveis, e também
respeita as alterações quando giramos o dispositivo.