Às vezes, no entanto, você simplesmente não consegue
acertar o layout com largura percentual e pixels codificados como este, às vezes você realmente precisa saber
quantos pixels você
tem disponível, por exemplo, aqui nos botões em que definimos uma largura de 100, definimos 100,
independentemente do tamanho do dispositivo.
Agora, na verdade, sabemos que queremos que dois botões estejam próximos um do outro.
Então, o que podemos fazer é simplesmente garantir que tenhamos uma largura de botão que sempre caiba na tela, por menor
que seja e para
isso, precisamos descobrir quantos pixels temos disponíveis em largura e isso é algo que podemos
descubra com a ajuda do React Native. A partir do React Native,
você pode importar o objeto de dimensões aqui, dimensões é o nome.
Agora, agora não é um componente que você usa, mas um objeto que permite descobrir
quanta largura você tem disponível.
Agora podemos usar isso, por exemplo, lá embaixo, onde definimos a largura do botão, em vez de configurá-la
dessa maneira, podemos definir a largura
para as dimensões e, em seguida, existe um método get, onde é possível obter as dimensões da janela.
Você também pode obtê-lo
na tela, a diferença entre janela e tela importa apenas no Android, onde com janela, a altura da barra de status
será excluída do cálculo e,
portanto, essa será realmente a parte da
tela em que seu conteúdo será mora em.
Portanto, você normalmente deve usar a janela aqui porque no iOS
isso não importa, no Android é garantida a parte da tela em que a interface do usuário realmente fica sem a barra de
status na parte superior.
Portanto, normalmente, você pode usar a janela aqui para obter a sala real disponível para o seu layout, as dimensões
reais que você pode usar para o seu layout. Agora, o que isso oferece é um objeto em que
você pode obter algumas propriedades, quatro para ser mais preciso - a escala
da fonte configurada pelo usuário; por exemplo, se os usuários desejam ter fontes maiores, você pode obter o
multiplicador aqui com escala de fonte, mas
o mais importante é que você obtém a largura e a altura e, se obtivermos a largura aqui, obteremos a largura
geral do dispositivo em
que este aplicativo é executado.
Agora sabemos que queremos apertar pelo menos dois botões neste dispositivo aqui, para podermos simplesmente dividir
isso por dois, para que agora cada botão tenha metade da largura do dispositivo.
Agora, se salvarmos isso, não conseguiremos realmente a aparência que queremos, porque é
claro que é muito grande, mas se a dividirmos por três, por exemplo, isso parecerá melhor
na tela pequena, mas
não na tela grande, mas que tal quatro? Se tomarmos quatro, teremos bastante espaço para todo
o outro espaço necessário, como o espaçamento em torno de nosso contêiner e garantiremos que nossos botões sempre respeitem o tamanho do dispositivo.
Agora, é claro, aqui, você poderia ter conseguido algo semelhante definindo a largura como uma porcentagem, como
40% aqui, mas eu também queria apresentar a API de dimensões aqui, que usaremos mais
tarde também.
É uma ótima API para descobrir quantos pixels você tem disponíveis na largura e na altura no
dispositivo ou em
execução, e isso é importante, onde a porcentagem aqui sempre se refere à visualização principal direta e nem sempre
à largura disponível do dispositivo
, esse é apenas o caso no pai superior,
por assim dizer, na exibição superior que você está renderizando. A janela Obter dimensões sempre fornece as dimensões para todo o
dispositivo, não importa onde você o use.
Portanto, a largura aqui é sempre a largura da nossa tela no dispositivo e nunca do pai ou de qualquer outra coisa.
Portanto, isso pode ser realmente útil se você deseja estilizar algo de uma certa maneira ou
dimensionar algo de uma certa maneira, porque isso indica a quantidade de largura disponível.