Agora, com nossas fontes personalizadas adicionadas, agora podemos usá-las em nosso aplicativo e
quero usá-las em todos os lugares em que exibimos alguns textos, como aqui com você selecionado,
aqui os oponentes imaginam e também na página de resumo, esse também
será um objetivo aqui neste aplicativo e, além disso, quando um jogo terminar, não só quero usar nossa
fonte personalizada aqui nesta página de game over, mas também quero mostrar uma imagem, um game over imagem aqui,
então essa é a
próxima coisa em que quero trabalhar.
O primeiro passo é substituir esse texto aqui pelo corpo para usar a fonte, então importo o corpo da pasta
de componentes e para lá, do corpo e depois substituo todos esses componentes aqui pelo corpo, simplesmente para que
quando um jogo acabou, usamos nossa fonte personalizada, esse é o
objetivo aqui.
Mas é como eu disse apenas
uma coisa, a principal coisa que deve acontecer aqui é que também temos uma imagem aqui.
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
isso, o
texto do título em vez do texto do corpo, mas que
abaixo deste título, portanto, abaixo do jogo, mostramos uma imagem.
Então, aqui, quero usar algum componente que realmente nos permita exibir uma imagem e o React Native
tenha esse componente, ele tem um componente de imagem. Podemos usar a imagem aqui como um componente normal em nosso
código jsx, assim, é um componente de fechamento automático, uma imagem tem um suporte importante e esse é o suporte
de origem e o suporte de origem, como o nome sugere, deve ser definido para apontar para uma imagem e agora existem
dois tipos de imagens que você pode usar - imagens locais que você envia como parte do seu aplicativo, para incluir
no código-fonte, no pacote de aplicativos no final ou nas imagens de rede e teremos um olhe para os dois.
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
de ativos, portanto, não na
pasta de fontes, mas apenas nos ativos, ou criar uma subpasta de imagens,
se
desejar, não
importa realmente , é esse sucesso. arquivo png e este é o arquivo que
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
parecer estranha na primeira vez que você a vê. Você usou essa função requerida, que é incorporada ao
Javascript ou que é suportada pelo React Native em Javascript, digamos, onde você passa uma string como argumento e esta
é a string apontando para a imagem e esse deve ser um caminho relativo, então
aqui desde estamos
na pasta de telas, temos que subir um nível, depois na pasta de ativos e, aqui,
podemos apontar para o sucesso. png,
assim mesmo.
Agora, isso diz ao React Native que queremos usar esta imagem aqui e nos bastidores,
permite que o React Native carregue efetivamente isso e também dê uma olhada na imagem e,
por exemplo,
determine sua largura e altura, é por isso que usamos essa imagem estranha requerem sintaxe e precisamos carregar imagens locais como esta.
Agora, para ver
o resultado, vou ajustar o aplicativo. arquivo js temporariamente para garantir que sempre exibamos o game over
na tela, simplesmente para que nem sempre tenha que percorrer a tela inteira apenas para verificar se ela foi atualizada ou alterada.
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
para o número das rodadas e o número do usuário, novamente, só estou fazendo isso para começar
o game over tela aqui e veja o que isso nos dá. E podemos ver o que isso nos
dá, nos dá uma imagem em tela cheia no final, uma imagem realmente grande.
A razão para isso é que a imagem que eu lhe dei
é bem grande, esse sucesso. O arquivo png não é
um arquivo pequeno, é uma imagem muito grande em relação aos pixels, sua largura e altura.
E como eu disse, quando você usa o seguinte, o bom é que o React Native dê uma olhada no arquivo de
imagem, determine sua largura e altura e use a mesma largura e altura aqui,
o que significa que renderizamos essa imagem enorme aqui no aplicativo e a desvantagem é que agora isso não cabe mais
na tela ou ocupa a tela inteira porque é um arquivo muito grande.
Se tivéssemos uma imagem menor, isso não seria um problema, ocuparia apenas uma parte da
tela, mas, como é uma imagem grande, ocupa a tela inteira.