Agora, e
o estilo, e esses botões? Agora, para esses botões,
você pode perceber que agora tem um comportamento estranho se
o tiver gravado de volta ao modo retrato, também aqui no Android. Por outro lado, se mudarmos algo e desfazermos isso apenas
para que o aplicativo reinicie e iniciemos no modo retrato, você verá que parece bom,
mas agora, se formos para o modo paisagem, parecerá ruim novamente.
Então, basicamente, a largura dos nossos botões é registrada quando o aplicativo é iniciado e não se ajusta quando o tamanho da tela
muda e, é claro, muda quando giramos o dispositivo porque a largura e a altura são trocadas,
portanto,
temos mais largura disponível se está no modo paisagem do que no modo retrato.
O problema é que, atualmente, na tela inicial do jogo, quando definimos a largura dos nossos botões,
usamos as dimensões get e isso e isso é muito importante para ter em mente, isso só
é calculado quando o aplicativo é iniciado.
Portanto, quando o aplicativo é iniciado pela primeira vez, ele analisa a largura disponível e, se inicia
no modo
retrato, é a largura do modo retrato, se inicia no modo paisagem, é a largura
do modo paisagem e faz o login e quando você gira o dispositivo e, em seguida, o gira, isso não recalcula.
Agora é claro que você gostaria que isso fosse recalculado e existe uma solução simples para isso.
Se você tem uma largura ou altura, qualquer coisa que obtiver de dimensões que respeitem as
alterações de orientação, deve ser recalculado quando a orientação mudar, então você não deve usar as dimensões
de largura lá em baixo na folha de estilo, mas sim gerenciar a largura ou qualquer propriedade que seja alterada
dinamicamente e que deva renderizar novamente a interface do usuário quando mudar de estado.
Portanto, aqui na string do jogo inicial,
já temos useState, agora também podemos gerenciar a largura de nosso botão aqui, definir a largura do botão com useState e
inicializá-lo para dimensões, obter a largura da janela dividida por quatro, que é o
padrão com o qual comecei.
Agora você pode configurar um ouvinte aqui nas dimensões, em vez de usar get, chamando ouvinte de evento add e ouvir
o evento de alteração que é acionado sempre que as dimensões mudam, o que geralmente
ocorre quando o usuário gira o dispositivo.
Então, aqui, podemos configurar uma função, atualizar o layout, por exemplo, que é uma função na qual chamo de largura do botão de configuração e defino novamente
como minha largura aqui, mas a largura das dimensões será diferente com base na largura da tela quando girarmos ela e
é essa função que
eu quero chamar aqui, então é o layout de atualização que eu quero chamar aqui sem parênteses
aqui porque nós apenas queremos apontar para essa função para que ela seja
chamada quando as dimensões mudarem e isso garantirá que isso é executado novamente sempre que
nossas dimensões mudam e, portanto, esse componente será renderizado novamente.
Agora só precisamos garantir que usamos esse botão recalculado dinamicamente com o estado aqui.
Podemos fazer isso usando estilos embutidos em vez de um objeto de folha de estilo.
Agora, se você tiver outros estilos configurados para o botão que não dependem das dimensões, é possível deixá-los
aqui na folha de estilos, é claro,
neste caso, eu não tenho isso, então vou comentar isso e você pode mesclar isso
com alguns estilos embutidos. Aqui, como não temos outros
estilos padrão, substituirei esse objeto da folha de estilo para o qual apontamos com um objeto de estilo embutido,
onde defino a largura igual à largura do botão e faça o mesmo, é claro, no meu segundo botão e,
com isso, nós agora temos um estilo que muda sempre que giramos o dispositivo.
Portanto, se salvarmos isso, você verá que agora parece bom,
não importa como alternamos isso, também no Android, porque isso é renderizado novamente.
Agora, uma observação importante aqui, no momento, estou configurando vários ouvintes de eventos aqui, sempre adiciono um novo ouvinte
de eventos sempre que esse componente é renderizado novamente e não é isso que
eu quero
fazer e podemos usar efeito que também está embutido no React e que você deve estar ciente de ter
um código que executamos sempre que nosso componente é renderizado novamente.
Então agora eu posso usar o efeito use aqui e a função que eu quero executar em cada re-renderização é uma função
que, no final, cria essa função de layout de atualização aqui e adiciona meu ouvinte
de evento, então eu vou cortá-lo e adicioná-lo aqui na função de efeito de uso
e, se retornarmos algo aqui em efeito de uso, essa é a nossa função de limpeza
que é executada imediatamente antes do efeito de uso ser executado e ali. Quero limpar meu ouvinte porque aqui posso chamar dimensões remover alteração
de ouvinte de evento para atualizar layout.
Portanto, agora limpamos isso e configuramos um novo quando nosso componente é renderizado novamente, limpamos o antigo, configuramos
um novo e, portanto, sempre temos apenas um ouvinte de evento em execução.
Se fizermos assim, isso é simplesmente mais limpo e, portanto, se agora salvarmos isso e voltarmos, teremos o mesmo
comportamento de antes, mas agora de maneira limpa, utilizando useState e use effect e, mais importante, os
recursos de escuta de eventos do a API de dimensões que permite não apenas definir dimensões uma vez,
mas recalculá-las quando elas são alteradas.