1 00:00:02,230 --> 00:00:04,920 Às vezes, no entanto, você simplesmente não consegue 2 00:00:04,930 --> 00:00:10,720 acertar o layout com largura percentual e pixels codificados como este, às vezes você realmente precisa saber 3 00:00:10,720 --> 00:00:12,210 quantos pixels você 4 00:00:12,340 --> 00:00:18,130 tem disponível, por exemplo, aqui nos botões em que definimos uma largura de 100, definimos 100, 5 00:00:18,130 --> 00:00:19,990 independentemente do tamanho do dispositivo. 6 00:00:19,990 --> 00:00:24,460 Agora, na verdade, sabemos que queremos que dois botões estejam próximos um do outro. 7 00:00:24,550 --> 00:00:31,960 Então, o que podemos fazer é simplesmente garantir que tenhamos uma largura de botão que sempre caiba na tela, por menor 8 00:00:31,960 --> 00:00:33,830 que seja e para 9 00:00:33,850 --> 00:00:39,460 isso, precisamos descobrir quantos pixels temos disponíveis em largura e isso é algo que podemos 10 00:00:39,460 --> 00:00:44,170 descubra com a ajuda do React Native. A partir do React Native, 11 00:00:44,170 --> 00:00:48,880 você pode importar o objeto de dimensões aqui, dimensões é o nome. 12 00:00:48,940 --> 00:00:55,720 Agora, agora não é um componente que você usa, mas um objeto que permite descobrir 13 00:00:55,810 --> 00:00:58,380 quanta largura você tem disponível. 14 00:00:58,420 --> 00:01:04,270 Agora podemos usar isso, por exemplo, lá embaixo, onde definimos a largura do botão, em vez de configurá-la 15 00:01:04,780 --> 00:01:07,080 dessa maneira, podemos definir a largura 16 00:01:07,210 --> 00:01:12,850 para as dimensões e, em seguida, existe um método get, onde é possível obter as dimensões da janela. 17 00:01:12,850 --> 00:01:14,440 Você também pode obtê-lo 18 00:01:14,440 --> 00:01:21,700 na tela, a diferença entre janela e tela importa apenas no Android, onde com janela, a altura da barra de status 19 00:01:21,700 --> 00:01:23,640 será excluída do cálculo e, 20 00:01:23,740 --> 00:01:26,110 portanto, essa será realmente a parte da 21 00:01:26,260 --> 00:01:28,720 tela em que seu conteúdo será mora em. 22 00:01:28,780 --> 00:01:32,130 Portanto, você normalmente deve usar a janela aqui porque no iOS 23 00:01:32,130 --> 00:01:38,800 isso não importa, no Android é garantida a parte da tela em que a interface do usuário realmente fica sem a barra de 24 00:01:38,800 --> 00:01:40,110 status na parte superior. 25 00:01:40,180 --> 00:01:46,390 Portanto, normalmente, você pode usar a janela aqui para obter a sala real disponível para o seu layout, as dimensões 26 00:01:46,390 --> 00:01:52,600 reais que você pode usar para o seu layout. Agora, o que isso oferece é um objeto em que 27 00:01:52,750 --> 00:01:56,470 você pode obter algumas propriedades, quatro para ser mais preciso - a escala 28 00:01:56,470 --> 00:02:01,540 da fonte configurada pelo usuário; por exemplo, se os usuários desejam ter fontes maiores, você pode obter o 29 00:02:01,540 --> 00:02:03,560 multiplicador aqui com escala de fonte, mas 30 00:02:03,670 --> 00:02:09,610 o mais importante é que você obtém a largura e a altura e, se obtivermos a largura aqui, obteremos a largura 31 00:02:09,610 --> 00:02:11,050 geral do dispositivo em 32 00:02:11,050 --> 00:02:12,580 que este aplicativo é executado. 33 00:02:12,580 --> 00:02:19,390 Agora sabemos que queremos apertar pelo menos dois botões neste dispositivo aqui, para podermos simplesmente dividir 34 00:02:19,390 --> 00:02:25,730 isso por dois, para que agora cada botão tenha metade da largura do dispositivo. 35 00:02:25,730 --> 00:02:30,190 Agora, se salvarmos isso, não conseguiremos realmente a aparência que queremos, porque é 36 00:02:30,190 --> 00:02:35,620 claro que é muito grande, mas se a dividirmos por três, por exemplo, isso parecerá melhor 37 00:02:35,620 --> 00:02:37,060 na tela pequena, mas 38 00:02:37,060 --> 00:02:42,520 não na tela grande, mas que tal quatro? Se tomarmos quatro, teremos bastante espaço para todo 39 00:02:42,520 --> 00:02:49,690 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. 40 00:02:49,720 --> 00:02:55,510 Agora, é claro, aqui, você poderia ter conseguido algo semelhante definindo a largura como uma porcentagem, como 41 00:02:55,510 --> 00:03:00,760 40% aqui, mas eu também queria apresentar a API de dimensões aqui, que usaremos mais 42 00:03:00,760 --> 00:03:01,550 tarde também. 43 00:03:01,570 --> 00:03:07,480 É uma ótima API para descobrir quantos pixels você tem disponíveis na largura e na altura no 44 00:03:07,870 --> 00:03:09,140 dispositivo ou em 45 00:03:09,190 --> 00:03:15,670 execução, e isso é importante, onde a porcentagem aqui sempre se refere à visualização principal direta e nem sempre 46 00:03:15,670 --> 00:03:17,560 à largura disponível do dispositivo 47 00:03:17,650 --> 00:03:20,880 , esse é apenas o caso no pai superior, 48 00:03:20,890 --> 00:03:28,330 por assim dizer, na exibição superior que você está renderizando. A janela Obter dimensões sempre fornece as dimensões para todo o 49 00:03:28,330 --> 00:03:30,750 dispositivo, não importa onde você o use. 50 00:03:30,760 --> 00:03:38,480 Portanto, a largura aqui é sempre a largura da nossa tela no dispositivo e nunca do pai ou de qualquer outra coisa. 51 00:03:38,560 --> 00:03:43,390 Portanto, isso pode ser realmente útil se você deseja estilizar algo de uma certa maneira ou 52 00:03:43,390 --> 00:03:48,100 dimensionar algo de uma certa maneira, porque isso indica a quantidade de largura disponível.