1
00:00:02,260 --> 00:00:08,000
Agora temos a aparência do cartão, agora, como próxima coisa, vamos consertar os botões e isso é algo que eu já

2
00:00:08,000 --> 00:00:11,860
mostrei, então definitivamente sua chance de pausar o vídeo e fazê-lo por conta própria.

3
00:00:11,870 --> 00:00:16,430
Quero ter certeza de que os botões tenham o mesmo tamanho, eles não devem ter a largura

4
00:00:16,760 --> 00:00:22,070
total disponível, mas devem ter um tamanho igual, o que garante que o texto caiba lá e que tenham o

5
00:00:22,280 --> 00:00:22,990
mesmo tamanho.

6
00:00:23,000 --> 00:00:30,020
Então, sua chance de pausar o vídeo, depois faremos isso juntos. Você teve sucesso?

7
00:00:30,020 --> 00:00:35,480
Vamos garantir que os botões tenham o mesmo tamanho e, para isso, na tela inicial do jogo, onde eu tenho os

8
00:00:35,480 --> 00:00:43,070
botões, você aprendeu que a solução é envolver os botões em uma exibição. Então você deve adicionar seu próprio componente de exibição ao

9
00:00:43,220 --> 00:00:45,200
redor dos botões e

10
00:00:45,200 --> 00:00:52,670
agora pode atribuir um estilo a esses botões; portanto, para ambos os botões aqui, usarei um objeto de botão no meu

11
00:00:52,670 --> 00:00:55,190
objeto de estilos lá em baixo, então

12
00:00:55,370 --> 00:01:02,730
vamos adicionar um botão aqui e simplesmente dê uma largura e aqui, uma largura que eu escolho é, digamos 80.

13
00:01:02,750 --> 00:01:09,050
Vamos ver como é isso, se eu salvar, um pouco pequeno demais, pois há uma quebra de linha

14
00:01:09,260 --> 00:01:10,370
nesse botão.

15
00:01:10,370 --> 00:01:16,890
Então vamos com 120, agora isso certamente é demais, então que tal

16
00:01:16,920 --> 00:01:22,510
cerca de 100 e isso me parece muito legal.

17
00:01:22,530 --> 00:01:26,790
Agora, além disso, e isso não foi uma tarefa para o usuário,

18
00:01:26,910 --> 00:01:31,840
não se preocupe se você não fez isso. Quero alterar as cores deles e uma delas

19
00:01:31,950 --> 00:01:37,590
deve ser a nossa principal e também quero acentuar alguns cores secundárias, por assim dizer, que podemos usar.

20
00:01:40,450 --> 00:01:46,810
Portanto, para o componente de tela inicial do jogo, no próprio botão, há um suporte de cores que você pode

21
00:01:46,810 --> 00:01:48,530
definir para controlar a cor

22
00:01:48,550 --> 00:01:54,460
e, para Android, essa é a cor de fundo, para iOS, que será a cor do texto e

23
00:01:54,780 --> 00:02:00,250
agora a redefinição. botão, aí eu quero configurar uma cor de # 717fc, acho que é uma

24
00:02:00,340 --> 00:02:02,170
cor legal e para o botão

25
00:02:02,170 --> 00:02:08,170
principal, o botão de confirmação, vou usar meu tema principal e quero usar a mesma cor que uso no

26
00:02:08,170 --> 00:02:09,370
cabeçalho .

27
00:02:09,370 --> 00:02:12,960
Então, aqui eu tenho esse código hexadecimal usado como cor de plano de

28
00:02:13,030 --> 00:02:19,090
fundo, agora usarei a mesma cor para este segundo botão. Com isso, podemos salvar isso e agora temos

29
00:02:19,210 --> 00:02:24,050
essas duas cores de botão aqui, que parecem bastante agradáveis na minha opinião.

30
00:02:24,070 --> 00:02:30,660
Agora, uma desvantagem dessa abordagem ou uma coisa que podemos melhorar é que eu estou usando esse código hexadecimal aqui, estou usando-o

31
00:02:30,670 --> 00:02:34,080
no cabeçalho e as chances são de que mais tarde no aplicativo

32
00:02:34,090 --> 00:02:37,330
também queremos usar a mesma cor em outros lugares .

33
00:02:37,330 --> 00:02:41,380
Portanto, seria bom se pudéssemos configurar isso como um tipo de tema

34
00:02:41,380 --> 00:02:48,340
que você poderia dizer, que poderíamos usar essas cores facilmente sem copiar códigos hexadecimais em nosso aplicativo e que também poderemos

35
00:02:48,340 --> 00:02:53,350
mudar a cor em um só lugar, se quisermos use uma cor diferente e não

36
00:02:53,350 --> 00:02:55,980
precisamos fazer isso em dezenas de componentes.

37
00:02:56,080 --> 00:03:01,830
E, para isso, usarei uma abordagem em que adicionarei uma nova pasta no nível raiz e nomeará constantes

38
00:03:01,840 --> 00:03:05,440
e, como sempre, você poderá nomear essas pastas como desejar e

39
00:03:05,440 --> 00:03:11,640
aí eu quero ter cores. arquivo js. Novamente, esse nome também pode

40
00:03:11,670 --> 00:03:19,020
ser nomeado como você quiser, porque o que esse arquivo fará é exportar um objeto Javascript padrão, exportar um objeto Javascript

41
00:03:19,050 --> 00:03:26,760
e, aí, você pode ter qualquer par de valores-chave que desejar e eu definirei uma cor primária, então apenas primária como nome

42
00:03:26,820 --> 00:03:32,790
da chave e esse código hexadecimal que eu acabei de copiar, para que a cor do cabeçalho

43
00:03:32,790 --> 00:03:37,230
também seja acentuada ou secundária, seja qual for o nome, eu irei

44
00:03:37,230 --> 00:03:42,330
com a cor de destaque e isso deve seja essa outra cor que eu usei

45
00:03:42,330 --> 00:03:47,070
no primeiro botão, então esse código hexadecimal aqui, eu vou usar isso aqui.

46
00:03:47,070 --> 00:03:52,920
Agora, essas cores são definidas aqui e agora podemos simplesmente importá-las deste arquivo e, sempre que as alterarmos

47
00:03:52,920 --> 00:03:58,700
aqui, elas serão alteradas em qualquer lugar deste aplicativo e, portanto, podemos trocá-las facilmente durante o desenvolvimento.

48
00:03:58,740 --> 00:04:07,800
Agora, na tela inicial do jogo, podemos simplesmente importar cores de constantes / cores como essa e eu dei a C maiúsculo aqui

49
00:04:08,050 --> 00:04:15,720
para indicar que essa é uma coleção de valores, você pode nomear o que quiser, você também pode usar

50
00:04:15,730 --> 00:04:16,900
um c

51
00:04:16,900 --> 00:04:20,530
minúsculo, que a nomeação não importa e agora você

52
00:04:20,590 --> 00:04:23,980
pode usar cores aqui para atribuir suas cores.

53
00:04:24,010 --> 00:04:31,570
Portanto, neste botão de redefinição, agora usaremos um valor dinâmico para que possamos alcançar as cores. sotaque e aqui para o botão principal, para

54
00:04:32,050 --> 00:04:39,080
o botão confirmar, eu vou com cores. primário e o mesmo

55
00:04:39,080 --> 00:04:44,630
no cabeçalho. É claro que agora também queremos usar essa

56
00:04:45,020 --> 00:04:52,180
cor e não codificá-la aqui; em vez disso, importe cores de constantes / Cores e, com isso importado, você também

57
00:04:52,370 --> 00:04:57,680
pode usá-lo em uma folha de estilo, não apenas em jsx, mas em qualquer lugar

58
00:04:57,680 --> 00:04:59,420
afinal, nesse arquivo, agora

59
00:04:59,420 --> 00:05:05,680
aqui, vou me referir a cores. primário. E se você salvar isso, novamente

60
00:05:05,720 --> 00:05:13,460
teremos a mesma aparência de antes, mas novamente de outra maneira mais elegante. Se você decidir que sua cor de destaque não deve ser

61
00:05:13,460 --> 00:05:19,790
dessa cor, mas deve ser azul, basta trocá-la aqui, seu aplicativo é reconstruído e você tem um botão azul.

62
00:05:19,910 --> 00:05:26,630
Portanto, essa é a enorme vantagem de gerenciar suas cores ou outras constantes principais nesses arquivos, você pode ter

63
00:05:26,630 --> 00:05:34,910
outro arquivo chamado texto, por exemplo, onde você tem alguns tamanhos de fonte principais ou outro espaçamento entre arquivos, onde armazena valores padrão para

64
00:05:34,940 --> 00:05:41,000
margens ou preenchimento para que você não é necessário usar manualmente os mesmos valores repetidamente, essas são

65
00:05:41,000 --> 00:05:42,550
todas as abordagens

66
00:05:42,620 --> 00:05:47,690
que você pode usar para facilitar sua vida como desenvolvedor e ter um código

67
00:05:47,690 --> 00:05:50,900
no qual você pode trocar valores rapidamente, se necessário.

68
00:05:50,990 --> 00:05:56,360
Por enquanto, apenas gerenciarei minhas cores, porque essa é uma das coisas mais irritantes

69
00:05:56,360 --> 00:06:01,490
de se copiar e é uma ótima abordagem, portanto, gerenciá-la nesse arquivo.