1
00:00:02,220 --> 00:00:08,250
Então, agora, com essas primeiras etapas básicas, se eu agora preencher um número aqui e continuarmos, tudo parece

2
00:00:08,250 --> 00:00:10,330
bom para mim aqui, tudo funciona,

3
00:00:10,420 --> 00:00:12,980
se iniciarmos agora um jogo, também quero

4
00:00:12,990 --> 00:00:19,560
reduzir esse espaçamento que temos aqui e eu também quero ter certeza de que minha caixa está lá embaixo,

5
00:00:19,560 --> 00:00:20,020
então

6
00:00:20,040 --> 00:00:23,240
esse registro de suposições que temos é que isso

7
00:00:23,250 --> 00:00:24,490
também parece melhor.

8
00:00:25,050 --> 00:00:29,820
Agora isso é algo que podemos fazer na tela do jogo, é claro, porque é a

9
00:00:29,820 --> 00:00:31,350
tela que estamos vendo atualmente.

10
00:00:31,410 --> 00:00:37,410
Agora, claro, é o espaçamento, essa margem superior em nosso contêiner inferior, que é esse contêiner, margem superior é essa distância entre o

11
00:00:37,590 --> 00:00:43,370
número aqui e o contêiner, e eu quero mudar isso. Agora, para mudar isso, podemos

12
00:00:43,510 --> 00:00:44,720
novamente usar

13
00:00:44,760 --> 00:00:47,120
a API de dimensões.

14
00:00:47,280 --> 00:00:54,300
Então, aqui, importo novamente as dimensões do React Native e agora lá

15
00:00:54,510 --> 00:01:03,630
em baixo, podemos calcular essa margem dinamicamente. O que podemos fazer aqui é que podemos obter novamente as dimensões da nossa

16
00:01:03,870 --> 00:01:09,630
janela e, em seguida, aqui, a largura ou, neste caso, provavelmente a altura e depois dividir isso por

17
00:01:09,630 --> 00:01:17,430
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

18
00:01:17,430 --> 00:01:21,990
é realmente um jogo de adivinhação, talvez não seja o que realmente queremos.

19
00:01:22,230 --> 00:01:28,320
Em vez disso, poderíamos verificar quanta altura temos disponíveis e, em seguida, usar

20
00:01:28,320 --> 00:01:34,920
um espaçamento diferente com base nisso. Poderíamos verificar se nossa altura é, digamos, maior que 600, se for esse o

21
00:01:35,310 --> 00:01:41,490
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

22
00:01:41,490 --> 00:01:46,920
calculando em uma condição if, neste caso em uma expressão ternária aqui, mas você também

23
00:01:46,920 --> 00:01:49,890
pode usá-la em uma verificação if normal.

24
00:01:49,970 --> 00:01:56,300
Então agora podemos voltar aqui e o que vemos agora é que, quando começamos o jogo, não temos uma lacuna

25
00:01:56,300 --> 00:02:01,580
enorme aqui na tela menor, no iPhone, que é uma tela maior, no entanto, definitivamente temos um

26
00:02:01,670 --> 00:02:05,960
maior espaço e para ver isso mais claro, é claro que você pode

27
00:02:06,050 --> 00:02:12,690
brincar com isso e, por exemplo, usar 30 para telas menores e 30 para telas maiores e 5 para telas menores,

28
00:02:12,800 --> 00:02:15,170
e agora você definitivamente deve ver isso.

29
00:02:15,350 --> 00:02:17,680
Aqui temos uma pequena lacuna

30
00:02:17,840 --> 00:02:20,450
e aqui temos uma lacuna maior.

31
00:02:20,750 --> 00:02:23,540
Portanto, também podemos usar isso em condições if.

32
00:02:23,540 --> 00:02:29,060
Agora, com isso, voltarei a 20 e 5 aqui, mas agora espero que também mostre outra maneira

33
00:02:29,060 --> 00:02:30,110
de usar isso.

34
00:02:30,110 --> 00:02:34,700
Você pode usar isso em condições que, naturalmente, oferecem muita flexibilidade nos casos em que

35
00:02:34,700 --> 00:02:40,670
você não deseja usar a largura em um cálculo dinâmico, mas possui valores codificados diferentes que deseja usar com base

36
00:02:40,670 --> 00:02:46,730
nos diferentes pontos de interrupção que deseja definido, um pouco como você o conhece em CSS, onde também possui consultas de

37
00:02:46,730 --> 00:02:51,080
mídia e, em seguida, é possível renderizar coisas diferentes com base em consultas de

38
00:02:51,080 --> 00:02:51,830
mídia diferentes.

39
00:02:52,070 --> 00:02:57,740
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

40
00:02:57,740 --> 00:03:04,100
lugar em que possa usar Javascript, em todos os lugares basicamente em seus componentes. Você também pode anexar estilos totalmente diferentes com

41
00:03:04,130 --> 00:03:10,070
base na largura ou altura disponível. Também poderíamos usar a janela de

42
00:03:10,100 --> 00:03:18,050
obtenção de dimensões aqui, onde atribuo meu estilo e, por exemplo, verifique minha altura aqui, verifique se é maior que

43
00:03:18,050 --> 00:03:25,400
600 e, nesse caso, use o contêiner de botões de estilos e, caso contrário, use o contêiner de

44
00:03:25,520 --> 00:03:31,520
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

45
00:03:31,670 --> 00:03:37,280
usar isso, você pode usá-lo em qualquer lugar onde o Javascript seja executado. Claro que você também pode usá-lo aqui, você

46
00:03:37,280 --> 00:03:45,690
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

47
00:03:45,690 --> 00:03:49,830
esse o caso, digamos, você retorne um código jsx totalmente diferente e, portanto,

48
00:03:49,830 --> 00:03:55,910
esse código nunca funcionará se você voltar aqui e somente se você não fizer isso se verificar, por isso,

49
00:03:55,910 --> 00:03:57,230
se você tiver

50
00:03:57,230 --> 00:04:02,560
um dispositivo que não seja tão alto quanto este, então você o fará lá em baixo.

51
00:04:02,600 --> 00:04:09,260
Então você é realmente flexível aqui e usa essa flexibilidade para criar os layouts que deseja, porque é

52
00:04:09,410 --> 00:04:14,020
disso que se trata e que oferece muita flexibilidade para seus aplicativos.

53
00:04:14,120 --> 00:04:15,440
Então esse é o

54
00:04:15,440 --> 00:04:19,210
espaçamento aqui, agora eu também queria alterar meus itens de log lá em baixo, isso

55
00:04:19,340 --> 00:04:21,560
também é algo que podemos fazer facilmente, é claro.

56
00:04:21,740 --> 00:04:28,400
Temos nossos itens de lista lá e, nos itens da lista, definimos uma largura de 100% porque definimos a largura da nossa lista

57
00:04:28,400 --> 00:04:32,330
aqui com o contêiner da lista e isso é definido como 60%.

58
00:04:32,600 --> 00:04:36,750
Agora, 60% parece muito bom em dispositivos maiores, mas

59
00:04:36,910 --> 00:04:40,280
em dispositivos menores, poderíamos ir além disso.

60
00:04:40,280 --> 00:04:48,050
Agora, é claro que podemos tentar novamente resolver isso com regras diferentes aqui, onde definimos uma largura máxima e uma largura mínima

61
00:04:48,050 --> 00:04:55,370
e talvez também possamos usar a API de dimensões para calcular isso dinamicamente ou usar novamente uma verificação if.

62
00:04:55,910 --> 00:05:03,500
Aqui poderíamos novamente dizer que as dimensões obtêm a janela, obtêm a largura disponível neste caso

63
00:05:03,500 --> 00:05:07,340
e, se for digamos maior que 500,

64
00:05:07,340 --> 00:05:15,220
quero usar 60%, caso contrário, quero usar 80%. Então agora nós simplesmente renderizamos um contêiner de lista mais amplo e

65
00:05:15,220 --> 00:05:18,070
mais amplo, com base na largura disponível no dispositivo

66
00:05:18,250 --> 00:05:19,340
em que

67
00:05:19,420 --> 00:05:24,490
estamos executando e vamos usar 350 aqui, talvez em vez de 500, porque estamos falando sobre

68
00:05:24,490 --> 00:05:26,350
a largura, não sobre a altura.

69
00:05:26,380 --> 00:05:31,630
Então agora aqui, se executarmos isso no iPhone, teremos a mesma largura de antes, mas na

70
00:05:32,080 --> 00:05:33,820
tela menor, teremos itens maiores.

71
00:05:33,820 --> 00:05:37,650
Então isso também é algo que podemos fazer e, é claro, você pode brincar com o ponto de

72
00:05:37,690 --> 00:05:39,140
interrupção que está definindo efetivamente aqui.

73
00:05:39,160 --> 00:05:41,290
você pode experimentar diferentes tamanhos de ponto de interrupção aqui.

74
00:05:41,320 --> 00:05:43,420
É claro que você também pode ter

75
00:05:43,420 --> 00:05:48,940
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

76
00:05:48,940 --> 00:05:56,500
estilo diferentes aqui e carregá-los com diferentes se as verificações usadas lá em cima. Só para dar um exemplo disso,

77
00:05:56,500 --> 00:06:03,820
poderíamos ter um contêiner de lista grande aqui e ali, definimos o flex um

78
00:06:03,820 --> 00:06:09,320
e definimos nossa largura, digamos 80%, porque esse é o grande

79
00:06:09,450 --> 00:06:13,380
e aqui temos o normal com 60% .

80
00:06:13,380 --> 00:06:18,400
Agora não tenho nenhuma condição lá embaixo, mas tenho dois objetos de estilo

81
00:06:18,400 --> 00:06:22,320
diferentes e agora só precisamos anexar objetos de estilo

82
00:06:22,680 --> 00:06:31,780
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

83
00:06:31,780 --> 00:06:38,740
aqui, por exemplo, e apontar para o contêiner de lista de estilos, que é nosso padrão, mas adicionar um if check aqui, onde

84
00:06:38,830 --> 00:06:46,750
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

85
00:06:46,750 --> 00:06:51,910
ter o contêiner de lista grande, para que possamos definir o estilo do contêiner de lista, essa

86
00:06:51,910 --> 00:06:53,470
variável igual ao contêiner

87
00:06:53,470 --> 00:06:55,960
de lista de estilos grande para apontar para

88
00:06:55,960 --> 00:07:01,960
esse objeto de estilo e agora podemos usar esse objeto de estilo aqui na visualização em que precisamos do estilo

89
00:07:01,960 --> 00:07:07,180
de contêiner de lista, usamos a variável agora que contém um objeto de estilo de contêiner de

90
00:07:07,330 --> 00:07:13,060
lista diferente com base na largura do nosso dispositivo. E se agora salvarmos e executarmos novamente, você

91
00:07:13,060 --> 00:07:19,270
verá que no iPhone com o dispositivo maior, onde temos mais largura, temos o contêiner menor e aqui

92
00:07:19,270 --> 00:07:24,200
no telefone Android com o dispositivo menor, com menos largura, obtemos o recipiente maior.

93
00:07:24,280 --> 00:07:26,980
Portanto, é o mesmo resultado de antes, mas

94
00:07:27,070 --> 00:07:32,080
um pouco mais legível e agora poderíamos ter várias verificações se aqui, onde armazenamos estilos diferentes aqui

95
00:07:32,080 --> 00:07:34,900
no estilo de contêiner de lista que então usamos

96
00:07:34,900 --> 00:07:42,070
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.

97
00:07:42,070 --> 00:07:47,650
Então é assim que você pode brincar com isso e estar ciente da flexibilidade da API de dimensões é

98
00:07:47,770 --> 00:07:48,970
realmente crucial aqui.