1
00:00:02,470 --> 00:00:05,140
Agora que trabalhamos no texto

2
00:00:05,140 --> 00:00:11,250
aqui, agora podemos voltar ao aplicativo. js e livre-se dessa mudança temporária aqui, onde sempre

3
00:00:11,250 --> 00:00:12,100
mostramos

4
00:00:12,100 --> 00:00:17,350
o game over screen, não queremos mais fazer isso. Em vez disso, queremos começar com a

5
00:00:17,350 --> 00:00:24,790
tela inicial normal do jogo novamente e, além dessa mudança, agora também quer fazer um ajuste extra e esse é o botão

6
00:00:24,790 --> 00:00:25,720
do jogo inicial.

7
00:00:25,810 --> 00:00:31,000
Estamos usando o botão normal aqui, o que obviamente é algo que você pode fazer, mas às vezes você também

8
00:00:31,000 --> 00:00:35,910
deseja criar seu próprio botão, deseja ter controle total sobre a aparência do botão e, para isso, é

9
00:00:36,130 --> 00:00:40,610
claro que pode criar o seu próprio botão e é exatamente isso que vamos fazer agora.

10
00:00:40,950 --> 00:00:45,700
Portanto, na pasta de componentes, adicionarei meu próprio botão e você poderá nomear isso

11
00:00:45,700 --> 00:00:46,390
como

12
00:00:46,390 --> 00:00:49,400
quiser, mas pode ser o nome do botão, mas

13
00:00:49,480 --> 00:00:56,740
esse já é o nome do incorporado e, embora você possa, é claro, ainda nomear o seu como isso, para evitar conflitos

14
00:00:56,740 --> 00:01:04,330
de nome ou confusão, vou nomear meu botão aqui botão principal, porque ele será meu principal, meu botão principal, que eu uso para

15
00:01:04,330 --> 00:01:05,710
as grandes ações deste

16
00:01:05,710 --> 00:01:07,480
jogo, como iniciar um novo jogo.

17
00:01:07,720 --> 00:01:12,730
Agora esse é o nome do arquivo, teremos um componente React regular, é claro,

18
00:01:12,730 --> 00:01:14,470
portanto importamos o React.

19
00:01:14,590 --> 00:01:18,160
Importamos uma visualização aqui, certamente precisaremos de algum

20
00:01:18,160 --> 00:01:23,960
texto, certamente precisaremos de uma folha de estilo do React Native assim e,

21
00:01:24,160 --> 00:01:29,990
aqui, temos o componente principal do botão que recebe props e que no final

22
00:01:29,990 --> 00:01:35,290
retornará algum jsx. Teremos nosso objeto de estilos com a Folha de estilo. crie e,

23
00:01:35,470 --> 00:01:39,310
como sempre, exportaremos nosso botão principal.

24
00:01:39,310 --> 00:01:42,100
E agora a pergunta é: como você constrói seu próprio botão?

25
00:01:42,110 --> 00:01:48,640
Agora pode parecer muito complexo fazer isso, mas na verdade não é. Seu próprio botão também é apenas uma combinação

26
00:01:48,640 --> 00:01:56,890
de visualização e texto e muito importante, também um componente palpável, como realce palpável ou opacidade palpável ou feedback

27
00:01:56,890 --> 00:02:01,300
nativo palpável ou até palpável sem feedback se você não

28
00:02:01,360 --> 00:02:06,940
deseja dar um feedback visual. Então, aqui irei com opacidade palpável e

29
00:02:06,940 --> 00:02:13,690
precisamos fornecer feedback ao usuário sobre o fato de o botão ter sido pressionado e registrar um evento onPress

30
00:02:14,320 --> 00:02:19,720
e, além disso, criaremos nosso botão com uma exibição que estilizamos de uma certa maneira

31
00:02:19,720 --> 00:02:21,370
e um texto lá.

32
00:02:21,370 --> 00:02:29,330
Então agora aqui no botão principal, podemos retornar nossa opacidade palpável e, lá, ter uma visão que podemos usar para estilizar o botão

33
00:02:29,330 --> 00:02:34,120
e, aí, talvez um texto para um texto que um botão deva ter.

34
00:02:34,240 --> 00:02:39,680
Agora, digamos que nosso botão deva ser utilizável de modo que passemos um texto diretamente

35
00:02:39,680 --> 00:02:41,600
entre as tags de abertura

36
00:02:41,600 --> 00:02:46,030
e fechamento do nosso componente, portanto, aqui podemos usar props children como

37
00:02:46,300 --> 00:02:55,990
o texto que eu quero mostrar no botão e, então, aqui nesta exibição, eu teremos um estilo de botão digamos estilos, neste texto interno aqui, poderíamos ter um

38
00:02:55,990 --> 00:03:04,860
estilo de texto do botão estilos e esses nomes são com você, é claro e com a opacidade palpável, adicionarei o ouvinte do onPress e

39
00:03:04,930 --> 00:03:07,920
nós vou ter que fazer alguma coisa lá.

40
00:03:09,000 --> 00:03:11,430
Então agora temos o esqueleto para o nosso botão, agora

41
00:03:11,450 --> 00:03:13,700
podemos começar a adicionar alguns estilos a ele.

42
00:03:13,790 --> 00:03:18,450
Agora, é claro que você pode estilizar esse botão da maneira que quiser, tenho um

43
00:03:18,470 --> 00:03:20,410
certo estilo em mente aqui,

44
00:03:20,420 --> 00:03:24,490
que acrescentarei, mas novamente, definitivamente brinque com ele e aplique seus próprios estilos.

45
00:03:24,530 --> 00:03:30,620
Portanto, para o botão em si, que é a visualização em torno do texto, desejo dar ao botão uma certa cor

46
00:03:30,620 --> 00:03:34,850
de fundo e você também pode garantir que isso possa ser definido de fora, é

47
00:03:42,270 --> 00:03:48,960
claro, você pode ser realmente criativo aqui. Eu codificarei uma cor aqui, é claro, usando minhas cores constantes aqui. Então, eu importarei cores de constantes

48
00:03:49,100 --> 00:03:55,710
/ Cores, cores como esta e, em seguida, aqui usaremos cores cor primária, a cor primária talvez, assim.

49
00:03:55,790 --> 00:04:00,380
Portanto, essa é a cor de plano de fundo que esse botão deve ter. Novamente, você também pode garantir

50
00:04:00,380 --> 00:04:04,090
que esse estilo seja definido dinamicamente com a ajuda de algum acessório que você está recebendo

51
00:04:04,160 --> 00:04:06,290
de fora, mas aqui, eu o codificarei aqui.

52
00:04:06,290 --> 00:04:11,180
Além disso, o botão deve ter um preenchimento para que o texto não fique

53
00:04:11,270 --> 00:04:13,130
diretamente nas bordas do contêiner

54
00:04:13,130 --> 00:04:19,310
de botões, assim como na caixa ao redor do texto, mas há algum espaçamento e você pode usar o

55
00:04:19,310 --> 00:04:22,590
mesmo preenchimento em todas as direções mas eu quero usar

56
00:04:22,640 --> 00:04:29,300
um preenchimento vertical de 12, portanto, não tanto preenchimento na parte superior e inferior e um preenchimento horizontal, digamos 30,

57
00:04:29,300 --> 00:04:32,550
muito mais preenchimento para a esquerda e a direita.

58
00:04:32,710 --> 00:04:36,830
Esse é o botão. Agora, para o texto do botão, também há

59
00:04:36,880 --> 00:04:41,500
a cor branca que deve ficar bem em nossa cor principal; você também pode usar

60
00:04:41,500 --> 00:04:47,290
preto porque nossa cor principal é na verdade uma cor em que, como você pode ver, branco e preto

61
00:04:47,410 --> 00:04:49,480
realmente funciona, então você pode usar

62
00:04:49,480 --> 00:04:55,840
qualquer um deles, mas eu vou usar branco aqui para o botão e adicionarei uma família de fontes open sans para

63
00:04:55,840 --> 00:05:01,780
usar essa fonte personalizada também, como você aprendeu, é necessário configurá-lo como todo texto, não há herança, não há fonte

64
00:05:01,780 --> 00:05:07,150
global que você possa configurar, todo texto que deve usar essa fonte precisa obtê-lo e eu adicionarei um

65
00:05:07,150 --> 00:05:15,840
tamanho de fonte digamos 18 para ter um texto maior aqui neste botão . Agora, quando o botão é pressionado, é claro que normalmente

66
00:05:15,840 --> 00:05:21,720
não quero lidar com esse evento de pressionamento dentro do botão, mas dentro

67
00:05:21,720 --> 00:05:24,990
do componente em que o usamos.

68
00:05:25,110 --> 00:05:27,160
Então, eu simplesmente quero encaminhá-lo e,

69
00:05:27,180 --> 00:05:33,330
para isso, podemos simplesmente esperar obter uma referência de função, uma função de manipulador de eventos no suporte digamos

70
00:05:33,330 --> 00:05:36,490
onPress do nosso botão personalizado, mas você pode nomear

71
00:05:36,510 --> 00:05:41,670
qualquer objeto, você pode nomear onClick, porque em no final, é você quem usa seu próprio

72
00:05:41,670 --> 00:05:42,510
botão e

73
00:05:42,600 --> 00:05:48,540
aí você só precisa passar uma referência de função de ajuste, um ponteiro de ajuste em uma função

74
00:05:48,540 --> 00:05:54,310
de manipulador de eventos para o onPress ou o nome que ele indicar em seu próprio botão.

75
00:05:54,360 --> 00:05:55,680
Então esse nome

76
00:05:55,680 --> 00:05:58,610
é com você, agora vamos usar o botão principal e

77
00:05:58,610 --> 00:06:02,170
usá-lo na tela inicial do jogo. Lá podemos simplesmente importá-lo,

78
00:06:02,190 --> 00:06:13,230
então importe o botão principal de components / MainButton e este botão principal agora é usado aqui para iniciar um novo

79
00:06:13,230 --> 00:06:14,170
jogo.

80
00:06:14,230 --> 00:06:16,980
Então, substituirei o botão aqui pelo botão principal,

81
00:06:16,980 --> 00:06:23,610
mas lembre-se de que, nesse botão, configurei o conteúdo, o texto a ser mostrado para que ele seja realmente o

82
00:06:23,610 --> 00:06:31,440
conteúdo que é passado entre as tags de abertura e fechamento do nosso botão e, portanto, de volta na tela inicial do jogo,

83
00:06:31,440 --> 00:06:32,790
o título aqui

84
00:06:32,790 --> 00:06:38,760
não é mais passado em um suporte de título, mas agora temos uma tag de abertura e fechamento

85
00:06:38,760 --> 00:06:42,730
para o nosso próprio botão e adicionamos o jogo inicial lá.

86
00:06:44,110 --> 00:06:50,170
Agora, o onPress ainda é um suporte que deixamos aqui, porque no botão principal, encaminhar o evento onPress, por

87
00:06:50,230 --> 00:06:54,520
assim dizer, para a função que recebo por conta própria o suporte onPress

88
00:06:54,520 --> 00:07:00,870
aqui, portanto, temos que definir o suporte onPress por nosso próprio botão e, portanto, com isso, devemos ter um bom

89
00:07:00,870 --> 00:07:04,500
botão principal aqui, um bom botão quando iniciarmos um novo jogo.

90
00:07:07,840 --> 00:07:09,280
Vamos tentar isso aqui,

91
00:07:09,310 --> 00:07:13,680
é assim que parece e parece muito bom na minha opinião, um bom botão.

92
00:07:13,900 --> 00:07:15,080
Ainda não terminei,

93
00:07:15,220 --> 00:07:19,360
quero ter cantos arredondados nesse botão e, para isso, de volta ao

94
00:07:19,360 --> 00:07:24,640
arquivo do botão principal, é claro que podemos simplesmente ir a essa propriedade de botão aqui

95
00:07:24,640 --> 00:07:32,650
na folha de estilo, que é o objeto de estilo aplicado ao nosso view e lá, podemos adicionar um raio de borda de 25

96
00:07:32,650 --> 00:07:39,210
e, se fizermos isso, você verá que se eu pegar esse botão agora, ele ficará com uma boa aparência aqui.

97
00:07:39,450 --> 00:07:45,580
Deixe você também mostrá-lo no Android, agora tem cantos arredondados e tem esse belo efeito de opacidade ao tocá-lo e,

98
00:07:45,580 --> 00:07:46,120
a

99
00:07:46,270 --> 00:07:51,680
propósito, como já mencionado anteriormente, você pode alterar esse efeito de opacidade acessando o componente de opacidade

100
00:07:51,730 --> 00:07:58,080
selecionável e, aí, você pode defina a opacidade ativa para o nível de opacidade que você deseja ter quando pressionado;

101
00:07:58,120 --> 00:07:59,090
por exemplo, se

102
00:07:59,140 --> 00:08:04,040
você usar um valor bastante alto aqui, esse efeito será menos forte, agora é apenas

103
00:08:04,060 --> 00:08:10,930
ligeiramente transparente quando tocamos nela e não tão transparente quanto antes. Mas isso é totalmente com você o que

104
00:08:10,930 --> 00:08:11,980
você

105
00:08:11,980 --> 00:08:15,530
quer aqui, eu irei. 6 aqui para ter um efeito um

106
00:08:15,610 --> 00:08:21,130
pouco mais forte, mas novamente isso é algo que você pode configurar e, em geral, minha sugestão é que você brinque com isso e

107
00:08:21,130 --> 00:08:28,950
veja como pode estilizar esse botão, como você pode realmente ajustá-lo de acordo com seus requisitos. Agora, com o botão personalizado adicionado, também quero

108
00:08:28,950 --> 00:08:31,140
usá-lo na tela do

109
00:08:31,140 --> 00:08:33,170
game over, então

110
00:08:33,270 --> 00:08:42,380
também importarei o botão principal dos componentes / MainButton como este e, em seguida, simplesmente adicionarei o botão

111
00:08:42,610 --> 00:08:49,110
principal aqui quando mostrarmos o novo botão do jogo lá em baixo.

112
00:08:49,120 --> 00:08:53,620
Em vez disso, use o botão principal e, portanto, remova o suporte do título, pois não

113
00:08:53,620 --> 00:08:55,710
é assim que estamos definindo o título

114
00:08:55,720 --> 00:09:02,840
em nosso próprio botão personalizado. Em vez disso, temos que passá-lo aqui entre as tags de abertura e fechamento das nossas tags de componentes personalizados.

115
00:09:03,040 --> 00:09:11,950
Portanto, agora aqui, isso também deve parecer melhor se terminarmos rapidamente um jogo aqui, tentando deixar o computador adivinhar 33, aqui

116
00:09:11,950 --> 00:09:13,540
estamos nós e

117
00:09:17,550 --> 00:09:20,730
agora vemos o bom botão aqui também.

118
00:09:20,730 --> 00:09:24,540
Também vemos a saída correta aqui em relação ao número de rodadas

119
00:09:24,540 --> 00:09:25,440
necessárias e

120
00:09:25,440 --> 00:09:30,510
ao número que tínhamos que adivinhar e podemos iniciar um novo jogo a partir de então e

121
00:09:36,440 --> 00:09:44,900
também passar por isso de novo muito rápido, sim, tudo isso parece muito bom.

122
00:09:44,900 --> 00:09:46,520
O que ainda quero fazer agora é trabalhar nesses dois botões, inferior e superior.

123
00:09:46,520 --> 00:09:48,230
Eles parecem um pouco

124
00:09:48,290 --> 00:09:54,200
chatos, eu diria, certamente podemos fazê-los parecer mais emocionantes. Agora, uma maneira de fazê-los parecer um pouco mais empolgantes

125
00:09:54,200 --> 00:09:56,690
é que também usamos nosso botão personalizado.

126
00:09:57,020 --> 00:10:04,710
Então, é claro, aqui na tela do jogo, também podemos importar o botão principal de components / MainButton, portanto, nosso próprio

127
00:10:04,730 --> 00:10:09,650
botão personalizado e usá-lo em vez do botão que estamos usando no momento,

128
00:10:09,660 --> 00:10:12,070
que é embutido. Então use

129
00:10:12,200 --> 00:10:17,770
nosso próprio botão aqui, portanto, é claro, mova o título entre as tags de

130
00:10:17,870 --> 00:10:24,710
abertura e fechamento, então aqui é mais baixo e depois aqui para o segundo botão, que é

131
00:10:25,220 --> 00:10:31,610
maior e agora isso deve parecer um pouco melhor se iniciarmos um novo jogo aqui .

132
00:10:31,640 --> 00:10:35,470
Agora usamos nossos botões personalizados aqui, mas agora também vemos um problema,

133
00:10:35,590 --> 00:10:39,440
simplesmente são grandes demais, estão muito próximos um do outro, podemos mudar isso,

134
00:10:39,530 --> 00:10:44,540
no entanto, descendo para o contêiner de botões e dando um pouco disso mais largura, talvez

135
00:10:44,540 --> 00:10:47,550
defina a largura máxima para 90% aqui, na verdade.

136
00:10:47,560 --> 00:10:53,490
Então, agora, se tentarmos novamente, sim, isso parece um pouco melhor, há pelo menos algum espaçamento entre os botões e,

137
00:10:53,490 --> 00:10:58,380
por enquanto, isso funcionará porque, por enquanto, não estamos otimizando para todos os tamanhos de tela.

138
00:10:58,530 --> 00:11:04,140
Vamos também aumentar essa largura aqui para 400, para que tenhamos largura suficiente, na

139
00:11:04,140 --> 00:11:09,160
verdade usamos 400 pixels e agora isso fica bom aqui no iOS e

140
00:11:12,590 --> 00:11:15,880
também no Android. Agora isso parece um pouco

141
00:11:15,890 --> 00:11:22,700
melhor, como mencionei, mas não seria bom se tivéssemos ícones lá, em vez de texto, porque o texto obviamente funciona, mas um ícone

142
00:11:22,700 --> 00:11:24,650
também pode ser útil e não

143
00:11:24,650 --> 00:11:30,830
usamos ícones até agora você geralmente precisa deles em aplicativos móveis. Definitivamente, é algo que você também deve estar

144
00:11:30,830 --> 00:11:36,980
ciente, como trabalhar com ícones, como adicionar ícones dentro do seu aplicativo e é, portanto,

145
00:11:36,980 --> 00:11:39,370
o que faremos a seguir.