Portanto, agora que a lógica geral do jogo funciona, vamos nos concentrar mais em finalizar esse estilo e também
em adicionar nossas próprias fontes personalizadas e uma bela imagem na tela do jogo porque
trabalhar com imagens e trabalhar com fontes personalizadas é uma coisa típica da modernidade. É claro que no desenvolvimento
de aplicativos, você raramente deseja manter as fontes padrão do sistema e raramente possui um aplicativo sem imagens.
Portanto, vamos começar com fontes personalizadas e em uma exposição do React Native, adicionar fontes é super trivial.
Na sua pasta de projeto, na
pasta de ativos, vamos criar uma pasta de fontes. Porém, você pode armazená-lo em qualquer lugar, mas
eu gosto de mantê-lo na pasta de ativos para manter meus ativos, como fontes e imagens organizadas.
Então, aqui na pasta de fontes, eu surpreendentemente quero gerenciar minhas fontes e, para isso,
anexado, você encontra um arquivo zip com duas fontes que você pode extrair e
arrastar e soltar aqui, que é OpenSans-Bold e OpenSans-Regular,
então essas duas fontes são anexadas a este vídeo em um arquivo zip, extraídas e arrastadas para a
pasta de fontes.
Agora, com isso, essas fontes geralmente estão disponíveis, mas para usá-las, você ainda precisa configurar mais.
Você precisa ir para o seu aplicativo. js e basicamente instrua o React Native e o expo para
carregar essas fontes, para usá-las. Para isso no aplicativo. arquivo js e estou usando o aplicativo. arquivo js porque esse é
o primeiro arquivo carregado ou executado, por assim dizer, quando o aplicativo é iniciado
e você deseja carregar suas fontes quando o aplicativo é iniciado; é preciso adicionar uma importação e essa importação é
que você importa tudo como fonte, embora esse nome seja com você, mas normalmente você usa a fonte aqui, da expo-font.
Portanto, expo-font é um pacote que fornece utilitários de fonte, portanto, utilitários que permitem carregar fontes e importar tudo
desse pacote e agrupá-lo nesse objeto de fonte, é o que estamos
fazendo aqui. Agora, para
carregar fontes, adicionarei uma nova função fora do componente funcional, porque essa função
não precisa ser recriada para cada ciclo de repetição de componente.
Agora vou chamá-lo de
buscar fontes,
o nome é com você
e nesta função aqui, chamarei fonte. loadAsync.
Agora, esta é uma função que ou um método no pacote de fontes que estamos importando
aqui que permite carregar fontes e o que você passa para carregar assíncrono é um objeto em que você informa à Expo e, portanto, reage ao Native
sobre todas as fontes que deseja carga. Você faz isso usando uma chave na
qual escolhe qualquer nome de sua escolha, como open-sans e, posteriormente, poderá usar essas fontes por esses
nomes; portanto, aqui abra sans porque minha fonte é chamada open sans.
Portanto, aqui está o sans aberto e, em seguida, você adiciona o require,
esse é um recurso de linguagem que o Javascript oferece onde você aponta o caminho em que essa fonte está armazenada.
Esse é um
caminho relativo, então aqui aponto para a pasta assets,
a pasta fonts e, em seguida, é o OpenSans-Bold, não em negrito, mas regular. arquivo ttf e agora vou adicionar um
segundo item aqui a esse objeto que passo para carregar assíncrono e que pode ser aberto-sem-negrito.
Agora, esses nomes são totalmente de sua responsabilidade e aqui quero carregar a versão em negrito.
Então, com isso, estamos dizendo ao React Native no final onde vivem nossas fontes, onde esses arquivos de fonte vivem e para quais
nomes queremos mapeá-los e, posteriormente, podemos usá-los para atribuir essas fontes ao texto. Agora, o load async realmente retorna uma promessa, o que significa que isso
levará um pouco mais de tempo, não será muito longo, mas não será carregado instantaneamente e eu retornarei essa promessa aqui
dentro das fontes de busca, para que sempre que chamamos de fontes de busca, possamos esperar para
que essa promessa seja resolvida antes de continuarmos. Agora, onde
queremos buscar nossas fontes?
Bem, podemos carregar nossas fontes manualmente aqui, por exemplo, podemos chamar fontes de busca como essa e isso iria em frente e buscá-las,
mas o problema é
que continuaríamos renderizando e eventualmente renderizaríamos nosso conteúdo e, se em algum lugar do conteúdo, usamos texto que tenta
usar essa fonte, se a fonte ainda não foi carregada e, como eu
disse, levará apenas alguns milissegundos, mas ainda para o primeiro ciclo de renderização, a fonte pode não
ter sido carregada e, em seguida, nós receberíamos um erro. Portanto, carregar nossas fontes assim
não é recomendado, muito provavelmente não funcionará.
Em vez disso, há um componente especial que você pode usar, que ajuda a carregar suas fontes. Você importa esse componente
da expo e o nome desse componente é AppLoading.
Agora esse é um componente que basicamente prolonga a tela de carregamento padrão, os usuários da tela inicial vêem de
qualquer maneira quando o aplicativo é iniciado, prolonga essa tela para permanecer ativa até que uma determinada tarefa de sua
escolha seja concluída,
como, por exemplo, até a busca de fontes. feito.
Portanto, no AppLoading, precisamos apenas garantir que renderizamos esse componente
em vez do conteúdo real, desde que ainda não tenhamos carregado nossas
fontes ou enquanto
não carregarmos o que quer que seja nós queríamos carregar.
Agora, o mais interessante é que podemos usar o estado para isso e começar com um valor
inicial falso, porque o estado que quero gerenciar aqui é carregado de dados ou o que você quiser chamar e definir os dados carregados.
Agora, aqui, quero verificar se os dados carregados não são verdadeiros, daí o ponto de exclamação, então eu sei que os dados ainda
não foram carregados e esse é o caso inicialmente e, neste caso, nem vou
continuar
com minha outra lógica , em vez deste componente funcional, retornarei imediatamente o componente AppLoading como o conteúdo do aplicativo, basicamente porque
não quero renderizar outro conteúdo se ainda estiver carregando nossos dados.
Agora, o AppLoading é um componente proveniente da Expo, que adota um objeto assíncrono inicial, onde apontamos a operação que queremos iniciar quando isso é
renderizado pela primeira vez e, é claro, essa é a nossa função de busca de fontes.
Então, aqui, estou apontando para buscar fontes, nessa função.
Agora importante: a) isso deve
ser uma função que você passa aqui eb) deve ser uma função que retorna uma
promessa porque a expo escutará automaticamente essa promessa para você e
quando a promessa for resolvida, saberá que o carregamento é feito e, então, chamará o que você passar aqui
para o onFinish.
Então, aqui, você precisa passar uma função que realmente define os dados carregados como true.
Portanto, esta função aqui será executada para você quando essa operação for concluída e, para que
o expo
descubra quando isso for feito, isso deve retornar uma promessa.
Portanto, agora esses dois props trabalharão juntos e estamos atualizando os dados carregados, esse estado para ser verdadeiro e, portanto,
para não renderizar esse conteúdo, mas para continuar com a execução desse código e, eventualmente, renderizar o
conteúdo quando a
busca de nossas fontes estiver concluída e você você pode executar qualquer operação assíncrona aqui, mas normalmente, você usa o AppLoading
para carregar alguns ativos, como fontes ou qualquer coisa
assim; portanto, os ativos que deveriam estar lá quando o aplicativo iniciar e que você precisa
imediatamente e geralmente são fontes.
Agora você também pode adicionar um manipulador onError aqui, a propósito e aqui. Vou apenas consolar o objeto de erro
que também
obtemos aqui nos casos em que o carregamento falha. Obviamente, você pode não apenas querer registrar isso, mas fazer outra
coisa, mostrar algum conteúdo alternativo no
seu aplicativo, algo assim. Aqui, apenas registrarei, porque isso
não deve falhar, as fontes estão disponíveis localmente aqui, para que possam ser carregadas sem problemas.
Agora, se salvarmos isso, é claro que nosso aplicativo é reiniciado e não vemos diferença aqui, nossa tela
de carregamento também não leva mais tempo do que antes, porque esse carregamento é super rápido,
simplesmente não acontece instantaneamente,
é por isso que precisamos essa abordagem.
Mas agora que
carregamos as fontes, como podemos usá-las agora?
Bem, digamos que queremos mudar nosso começo para um novo título de jogo aqui para usar nossa fonte. Agora, para isso, precisamos ir para a
tela inicial do jogo, onde é o título do final, aqui, iniciar um novo jogo, ele tem o estilo do
título e, portanto, na folha de estilo aqui no título, agora podemos definir família de
fontes para alterar a família de fontes e defina-a como
open-sans-bold por
exemplo e, é claro, o identificador usado aqui deve ser um identificador carregado aqui.
Então, aqui, eu tenho open-sans-bold e open sans,
posso usar esses dois identificadores no meu código em qualquer lugar do aplicativo quando quiser atribuir uma fonte personalizada e é exatamente
isso que estou fazendo aqui.
Agora você vê, que tem uma fonte diferente em negrito e, a propósito, se você estiver usando fontes personalizadas
e quiser uma fonte em negrito, precisará carregá-lo com a família
de fontes, não poderá definir o peso da fonte. O React Native suporta isso, mas para fontes personalizadas, a expo no
momento não
suporta isso; basta usar uma família de fontes separada, o que não é realmente um problema, como você pode ver.