1
00:00:02,220 --> 00:00:04,630
Portanto, agora que temos um cabeçalho,

2
00:00:04,650 --> 00:00:10,950
podemos continuar e continuar com a parte em que os usuários podem inserir um número que o

3
00:00:10,950 --> 00:00:15,920
computador deve adivinhar posteriormente. E por isso aqui no aplicativo. arquivo js, abaixo do cabeçalho,

4
00:00:15,920 --> 00:00:22,790
é claro que quero ter a área de entrada do usuário. Agora, como antes, tratarei disso em

5
00:00:22,790 --> 00:00:29,780
um componente separado e não aqui no aplicativo. js para manter todos os componentes relativamente enxutos e poderíamos

6
00:00:29,780 --> 00:00:34,850
criar esse componente aqui na pasta components, isso não seria errado, mas como agora

7
00:00:34,850 --> 00:00:42,110
vou trabalhar em um componente que é essencialmente responsável por tudo o que vemos na tela além do cabeçalho, trato esse

8
00:00:42,140 --> 00:00:47,600
componente como uma espécie de componente especial, vou chamá-lo de tela e armazená-lo em uma pasta

9
00:00:47,600 --> 00:00:53,000
de telas, porque o jogo final terá essencialmente três telas diferentes - uma para configurar

10
00:00:53,000 --> 00:00:58,040
e iniciar o jogo, uma quando o jogo for executando e um quando o

11
00:00:58,100 --> 00:01:04,520
jogo terminar e eu quero ter esses componentes especiais que, tecnicamente, são componentes totalmente normais, mas que atendem

12
00:01:04,730 --> 00:01:10,790
a um propósito especial, quero armazená-los em uma pasta separada e essa é apenas minha decisão pessoal

13
00:01:10,790 --> 00:01:16,790
de design aqui, você não precisa armazená-los. Tecnicamente, não há razão para fazê-lo ou não, o React

14
00:01:16,790 --> 00:01:18,750
Native simplesmente não se importa.

15
00:01:18,770 --> 00:01:24,200
Então, aqui, eu vou armazená-lo lá e chamar o nome de StartGameScreen. js para também deixar bem claro no

16
00:01:24,200 --> 00:01:30,740
nome que este é um componente especial para mim, mas como eu disse, tecnicamente é um componente normal

17
00:01:30,770 --> 00:01:37,580
e, portanto, importamos o React do React e também importamos algumas coisas do React Native, é claro, e nós

18
00:01:37,880 --> 00:01:44,210
já podemos dizer que certamente precisaremos de uma visualização porque você provavelmente não pode criar nenhum componente,

19
00:01:44,210 --> 00:01:49,060
mas você pode mas não muitos componentes que você pode criar sem visualizações.

20
00:01:49,160 --> 00:01:54,620
Portanto, importaremos a visualização aqui e, definitivamente, também precisaremos de uma folha de estilo para obter alguns estilos e veremos o

21
00:01:54,620 --> 00:02:02,870
que mais precisamos, certamente também precisaremos de um texto, acho, para que possamos adicionar isso. Agora, com isso, vou criar uma nova constante

22
00:02:03,500 --> 00:02:10,130
aqui, iniciar a tela do jogo que é um componente funcional parecido com este,

23
00:02:10,130 --> 00:02:19,330
onde teremos um objeto de estilos com o Stylesheet. crie assim e onde exporto a tela inicial do jogo assim e você

24
00:02:19,450 --> 00:02:27,430
poderá salvá-lo como um modelo para qualquer novo componente que você adicionar, porque 90% dos componentes personalizados que você cria no React Native

25
00:02:27,430 --> 00:02:32,890
se parecem assim, basicamente, você importa o React, você importa algumas coisas do React Native, define

26
00:02:32,890 --> 00:02:39,280
seu componente, o nome difere, é claro, você tem seus objetos de estilos e os exporta, é quase sempre

27
00:02:39,310 --> 00:02:40,740
o mesmo para

28
00:02:40,780 --> 00:02:46,740
que você possa salvá-los como modelo, se quiser. Eu não quero aqui, então, continuarei trabalhando

29
00:02:46,740 --> 00:02:52,800
no componente em si e a pergunta agora é: o que renderizamos nessa

30
00:02:52,800 --> 00:02:59,760
tela inicial do jogo? Como deve ser? No final, terei

31
00:02:59,760 --> 00:03:06,960
uma visão geral da tela inteira, porque acho que isso faz sentido,

32
00:03:06,960 --> 00:03:14,040
nos permite configurar um estilo geral. Vou adicionar novamente uma propriedade de tela aqui a este objeto da folha de estilo que eu

33
00:03:14,040 --> 00:03:18,420
posso fazer, que não entrará em conflito com o aplicativo. js, também poderíamos ter

34
00:03:18,420 --> 00:03:23,760
escolhido nomes diferentes, esses dois simplesmente não estão relacionados porque, no final, são

35
00:03:23,760 --> 00:03:29,790
objetos Javascript independentes gerenciados em arquivos independentes. Para que possamos repetir nomes aqui ou escolher nomes diferentes, vou usar um

36
00:03:29,790 --> 00:03:36,390
nome semelhante aqui, nomear essa tela e definir um estilo geral para essa vista circundante aqui. O estilo geral é que eu disse isso para

37
00:03:36,390 --> 00:03:42,810
flexionar um, para que ocupe todo o espaço possível, o que significa que, como o adicionarei abaixo do cabeçalho,

38
00:03:42,810 --> 00:03:47,760
ele ocupará todo o espaço abaixo do cabeçalho, tanto na vertical quanto na horizontal

39
00:03:48,780 --> 00:03:55,350
e além disso. , Também quero adicionar um preenchimento aqui de 10 para que o conteúdo não fique diretamente

40
00:03:55,350 --> 00:04:01,470
nas bordas da tela, mas haja algum espaçamento para a esquerda, direita, superior e inferior e adicionarei

41
00:04:01,470 --> 00:04:03,860
o alinhamento dos itens ao centro.

42
00:04:03,930 --> 00:04:09,900
Lembre-se de que todas as visualizações, por padrão, usam flexbox e, por padrão, a coluna de direção flexível,

43
00:04:09,930 --> 00:04:13,960
alinham os itens e posiciona os itens ao longo do eixo transversal.

44
00:04:13,980 --> 00:04:18,240
Portanto, como a direção padrão é a coluna, o eixo transversal é da

45
00:04:18,240 --> 00:04:20,000
esquerda para a direita,

46
00:04:20,070 --> 00:04:25,380
portanto é um eixo horizontal, portanto, isso alinhará os itens no centro horizontalmente, mas não verticalmente.

47
00:04:25,380 --> 00:04:31,200
Lá, usamos o padrão justifyContent flex start, mas como eu

48
00:04:31,200 --> 00:04:39,210
uso o padrão, não preciso defini-lo. Então, vamos deixá-lo como está aqui e agora atribuir esse estilo aqui a essa visualização e o autoformatting fechou minha

49
00:04:39,210 --> 00:04:41,600
tag aqui, o que é claro que eu não quero fazer, então

50
00:04:41,760 --> 00:04:42,830
deixe-me reverter isso e

51
00:04:43,140 --> 00:04:47,070
agora temos essa visualização para o nosso tela do jogo. Agora, para ver se funciona,

52
00:04:47,070 --> 00:04:49,220
mostrarei aqui algum texto, a tela

53
00:04:49,320 --> 00:04:56,110
do jogo, apenas um espaço reservado falso. Reformate isso e agora no aplicativo. js, vamos

54
00:04:56,530 --> 00:05:05,880
usar essa tela importando a tela inicial dos jogos da pasta screens e

55
00:05:05,880 --> 00:05:09,820
lá, inicie a tela do jogo

56
00:05:09,890 --> 00:05:19,580
e, em seguida, simplesmente adicione-a aqui, assim. Se salvarmos isso, vemos a tela do jogo aqui e também no Android, então isso

57
00:05:19,650 --> 00:05:20,250
funciona.

58
00:05:20,250 --> 00:05:27,270
Estamos usando esse segundo componente separado, que usaremos agora como um componente de tela cheia basicamente ou quase em tela

59
00:05:27,360 --> 00:05:28,420
cheia, a

60
00:05:28,430 --> 00:05:30,420
parte abaixo do cabeçalho no final.