Agora que você aprendeu como adicionar fontes a um aplicativo e anexá-lo, encontrará um arquivo zip com as
fontes que quero adicionar. Para isso, na pasta assets,
adicionarei uma nova pasta de fontes e, em seguida, será o OpenSans-Bold e regular. arquivo ttf que está no arquivo zip que você
encontra anexado que eu quero adicionar aqui.
Agora, adicionar os arquivos por si só não fará o que você sabe, é claro, em
vez disso, precisamos carregar essas fontes e fazemos isso no aplicativo. arquivo js, que é o arquivo inicial que
inicia o aplicativo inteiro. Lá, precisamos importar
tudo como fonte da expo-font e isso pode não estar disponível no
seu projeto ainda; portanto, você pode executar o npm install --save expo-font para garantir
que esteja disponível,
para instalar esse pacote e com isso instalado, você pode importar fontes de lá, assim e
também quero importar o
componente de carregamento de aplicativos da expo, que é o componente que prolongará a tela inicial quando o
aplicativo iniciar até que nossas fontes sejam carregadas, para que apenas veja algo
na tela quando todos os nossos ativos e, neste caso, essas são
as fontes, estiverem realmente disponíveis e realmente estiverem lá. Agora, com essas importações adicionadas, podemos adicionar uma função
aqui fora da
nossa função componente, que chamarei de buscar fontes e esta é
uma função que, no final, usará a fonte, então o que estou importando aqui, carrega async e depois passamos um
objeto onde descrevemos os dados que queremos carregar e essa é a fonte open sans que eu registrarei
em open sans; adicionamos isso exigindo isso de. / assets / fonts / OpenSans, sem negrito, mas regular. ttf e, além disso, temos open-sans-bold,
essa é a outra fonte que quero registrar, exigindo-a de assets / fonts
/ OpenSans-Bold. ttf, assim.
Agora precisamos retornar isso porque load async retorna uma promessa e quero devolvê-lo na minha função de buscar
fontes, pois, com isso, podemos usá-lo junto com o componente de carregamento de aplicativos e esse é um padrão
que você aprendeu anteriormente no curso.
Portanto, caso isso
seja novo para você, verifique as outras seções deste curso primeiro.
Portanto, agora podemos usar fontes de busca com o carregamento do aplicativo e fazemos isso dentro do componente
do aplicativo. Lá, gerenciarei algum estado e o faço com a ajuda do gancho useState que importamos do
React e o nomeei carregue a fonte de estado e defina a fonte carregada e chame useState e, inicialmente, isso é falso porque, inicialmente, a
fonte não foi carregada e, aqui,
podemos verificar se a fonte não foi carregada, o que inicialmente é o caso, então
quero retornar o componente de carregamento do aplicativo em vez do conteúdo normal do aplicativo, porque no componente de
carregamento do aplicativo, podemos adicionar a propriedade start async e apontar para buscar fontes que iniciam essa função de
busca de fontes e, uma vez feito isso, a função que passamos ao onFinish será chamado e
nesta função, simplesmente definirei a fonte carregada como true, assim. Portanto, isso garante que simplesmente mantenha a tela inicial
aberta até que nossas fontes sejam carregadas e isso será renderizado até recarregarmos nossas
fontes e, posteriormente, carregaremos esse conteúdo. Agora, com isso, garantimos que estamos importando nossas fontes e que podemos
começar a usá-las e precisaremos delas ao longo deste módulo.
Com isso, agora é hora de começar a adicionar realmente o que todos buscamos, a navegação.