1
00:00:02,150 --> 00:00:06,950
Agora, com nossas fontes personalizadas adicionadas, agora podemos usá-las em nosso aplicativo e

2
00:00:06,950 --> 00:00:12,740
quero usá-las em todos os lugares em que exibimos alguns textos, como aqui com você selecionado,

3
00:00:13,130 --> 00:00:17,410
aqui os oponentes imaginam e também na página de resumo, esse também

4
00:00:17,410 --> 00:00:24,010
será um objetivo aqui neste aplicativo e, além disso, quando um jogo terminar, não só quero usar nossa

5
00:00:24,020 --> 00:00:30,770
fonte personalizada aqui nesta página de game over, mas também quero mostrar uma imagem, um game over imagem aqui,

6
00:00:30,830 --> 00:00:32,460
então essa é a

7
00:00:32,510 --> 00:00:34,830
próxima coisa em que quero trabalhar.

8
00:00:34,850 --> 00:00:42,770
O primeiro passo é substituir esse texto aqui pelo corpo para usar a fonte, então importo o corpo da pasta

9
00:00:42,770 --> 00:00:49,970
de componentes e para lá, do corpo e depois substituo todos esses componentes aqui pelo corpo, simplesmente para que

10
00:00:49,970 --> 00:00:54,200
quando um jogo acabou, usamos nossa fonte personalizada, esse é o

11
00:00:54,200 --> 00:00:55,450
objetivo aqui.

12
00:00:55,730 --> 00:00:57,950
Mas é como eu disse apenas

13
00:00:57,950 --> 00:01:03,200
uma coisa, a principal coisa que deve acontecer aqui é que também temos uma imagem aqui.

14
00:01:03,260 --> 00:01:11,360
Então, digamos que temos o jogo terminado, na verdade, então vamos usar o texto do título aqui, talvez agora que eu pense sobre

15
00:01:11,360 --> 00:01:12,350
isso, o

16
00:01:12,530 --> 00:01:16,460
texto do título em vez do texto do corpo, mas que

17
00:01:16,460 --> 00:01:19,830
abaixo deste título, portanto, abaixo do jogo, mostramos uma imagem.

18
00:01:19,880 --> 00:01:27,740
Então, aqui, quero usar algum componente que realmente nos permita exibir uma imagem e o React Native

19
00:01:27,800 --> 00:01:36,470
tenha esse componente, ele tem um componente de imagem. Podemos usar a imagem aqui como um componente normal em nosso

20
00:01:36,470 --> 00:01:43,490
código jsx, assim, é um componente de fechamento automático, uma imagem tem um suporte importante e esse é o suporte

21
00:01:43,490 --> 00:01:51,170
de origem e o suporte de origem, como o nome sugere, deve ser definido para apontar para uma imagem e agora existem

22
00:01:51,170 --> 00:01:58,430
dois tipos de imagens que você pode usar - imagens locais que você envia como parte do seu aplicativo, para incluir

23
00:01:58,430 --> 00:02:05,600
no código-fonte, no pacote de aplicativos no final ou nas imagens de rede e teremos um olhe para os dois.

24
00:02:05,610 --> 00:02:14,280
Agora vamos começar com uma imagem local e, para isso, em anexo, você encontra esses sucessos. arquivo png que você pode arrastar para a pasta

25
00:02:14,280 --> 00:02:17,000
de ativos, portanto, não na

26
00:02:17,370 --> 00:02:23,430
pasta de fontes, mas apenas nos ativos, ou criar uma subpasta de imagens,

27
00:02:23,430 --> 00:02:24,240
se

28
00:02:24,270 --> 00:02:25,150
desejar, não

29
00:02:25,170 --> 00:02:31,550
importa realmente , é esse sucesso. arquivo png e este é o arquivo que

30
00:02:31,560 --> 00:02:39,480
eu quero usar aqui, então a imagem que eu quero render aqui. Agora, para renderizar esta imagem aqui, usamos uma sintaxe especial que pode

31
00:02:39,660 --> 00:02:46,040
parecer estranha na primeira vez que você a vê. Você usou essa função requerida, que é incorporada ao

32
00:02:46,050 --> 00:02:52,440
Javascript ou que é suportada pelo React Native em Javascript, digamos, onde você passa uma string como argumento e esta

33
00:02:53,010 --> 00:02:57,840
é a string apontando para a imagem e esse deve ser um caminho relativo, então

34
00:02:57,840 --> 00:02:59,240
aqui desde estamos

35
00:02:59,250 --> 00:03:04,530
na pasta de telas, temos que subir um nível, depois na pasta de ativos e, aqui,

36
00:03:04,530 --> 00:03:07,450
podemos apontar para o sucesso. png,

37
00:03:07,470 --> 00:03:09,090
assim mesmo.

38
00:03:09,150 --> 00:03:14,490
Agora, isso diz ao React Native que queremos usar esta imagem aqui e nos bastidores,

39
00:03:14,490 --> 00:03:20,190
permite que o React Native carregue efetivamente isso e também dê uma olhada na imagem e,

40
00:03:20,430 --> 00:03:21,340
por exemplo,

41
00:03:21,360 --> 00:03:28,830
determine sua largura e altura, é por isso que usamos essa imagem estranha requerem sintaxe e precisamos carregar imagens locais como esta.

42
00:03:30,010 --> 00:03:32,280
Agora, para ver

43
00:03:32,410 --> 00:03:39,400
o resultado, vou ajustar o aplicativo. arquivo js temporariamente para garantir que sempre exibamos o game over

44
00:03:39,400 --> 00:03:46,060
na tela, simplesmente para que nem sempre tenha que percorrer a tela inteira apenas para verificar se ela foi atualizada ou alterada.

45
00:03:46,660 --> 00:03:53,590
Portanto, a tela do game over é o que eu vou usar temporariamente como meu conteúdo principal aqui desde o início e simplesmente passarei alguns números fictícios

46
00:03:53,590 --> 00:03:57,850
para o número das rodadas e o número do usuário, novamente, só estou fazendo isso para começar

47
00:03:57,880 --> 00:04:04,390
o game over tela aqui e veja o que isso nos dá. E podemos ver o que isso nos

48
00:04:04,480 --> 00:04:10,730
dá, nos dá uma imagem em tela cheia no final, uma imagem realmente grande.

49
00:04:10,780 --> 00:04:14,140
A razão para isso é que a imagem que eu lhe dei

50
00:04:14,200 --> 00:04:17,590
é bem grande, esse sucesso. O arquivo png não é

51
00:04:17,710 --> 00:04:22,040
um arquivo pequeno, é uma imagem muito grande em relação aos pixels, sua largura e altura.

52
00:04:22,210 --> 00:04:29,320
E como eu disse, quando você usa o seguinte, o bom é que o React Native dê uma olhada no arquivo de

53
00:04:29,320 --> 00:04:34,020
imagem, determine sua largura e altura e use a mesma largura e altura aqui,

54
00:04:34,020 --> 00:04:41,050
o que significa que renderizamos essa imagem enorme aqui no aplicativo e a desvantagem é que agora isso não cabe mais

55
00:04:41,050 --> 00:04:45,450
na tela ou ocupa a tela inteira porque é um arquivo muito grande.

56
00:04:45,550 --> 00:04:50,440
Se tivéssemos uma imagem menor, isso não seria um problema, ocuparia apenas uma parte da

57
00:04:50,440 --> 00:04:54,160
tela, mas, como é uma imagem grande, ocupa a tela inteira.