Agora já adicionamos fontes várias vezes neste curso, por isso não é
muito novo como isso funciona. Na pasta de ativos, adicionarei uma pasta de fontes, mas, novamente, você pode armazená-las onde quiser. Em anexo, você encontra as duas fontes
que usamos durante o curso, abra sem negrito e
regular e agora precisamos carregá-las quando
o aplicativo for iniciado. arquivo js. Lá, agora
você pode importar algo do expo e esse é o componente de carregamento do aplicativo e também é necessário importar estrela como
fonte do expo-font e para garantir que isso esteja disponível, execute o npm install
--save expo-font para instalar isso no seu projeto e garanta que você possa usá-lo.
Agora, essas são as duas coisas que você precisa instalar lá
e, com a instalação, podemos adicionar uma nova função aqui, talvez nomear fontes de busca.
Esta é uma função que, no final, não aceita argumentos, mas, agora, posso chamar de carregamento de fonte assíncrona
e retornar isso porque, que retorna uma promessa e busca
de fontes, deve retornar uma promessa e passar um objeto Javascript
onde mapeamos as fontes que deseja carregar e depois terei open-sans que mapeio
para minha importação aqui, onde aponto para a pasta assets, a pasta fonts e que open-sans regular e também adiciono open-sans-bold aqui como chave e mapa
que exige / assets / fonts / open-sans-bold para que ambas as fontes sejam importadas aqui.
Agora é claro que as fontes de busca precisam ser chamadas e isso deve ser chamado pelo nosso
componente de carregamento de aplicativos. Portanto, também precisamos importar o estado de uso do React, para que
possamos controlar se
os dados já foram carregados ou não para que no componente funcional aqui, podemos ter nosso estado carregado da fonte e definir a fonte carregada e,
inicialmente, com o estado de uso, que é falso.
Se isso for verdade, quero renderizar essa saída, portanto, desde que
seja falso, portanto, o ponto de exclamação aqui, quero retornar o componente de carregamento do aplicativo que
prolonga nosso carregamento, nossa tela de inicialização e lá, precisamos forneça esses props assíncronos de início, que apontam para
a função buscar fontes, que é a função que é executada quando esse componente
é renderizado pela primeira vez e, em seguida, termina que executa uma função assim que esse carregamento é feito e
nessa função a ser
executada, ' configurarei minha fonte carregada como true para que não renderemos mais o carregamento do aplicativo, mas renderizemos esse conteúdo.
Agora nossas fontes são carregadas e agora podemos usá-las e quero usá-las em dois lugares - o item do meu produto,
que é o componente que renderizamos na visão geral dos produtos. É claro que temos algum
texto, temos nosso título e temos nosso preço aqui e é lá que, no título,
eu também quero definir uma família de fontes open-sans-bold e sobre
o preço, também quero definir uma família de fontes open-sans e, na tela
de detalhes do produto, é a mesma coisa. Talvez o preço deva ter uma família de fontes open-sans-bold para ter
esse estilo arrojado e a descrição obterá a fonte open sans.
Agora, na verdade, isso não é tudo: no navegador da loja no meu navegador principal aqui, nas
opções de
navegação padrão, também quero usar essa fonte no cabeçalho, para que o estilo do título do cabeçalho aqui seja realmente um objeto em
que eu defino a família de fontes para open-sans-bold para usar a fonte bold sans open sans e o estilo do título do cabeçalho
para trás define como o texto que vemos no iOS é denominado isso e que também deve usar uma
família de fontes open-sans, não o negrito versão. Com isso, se agora salvarmos isso e recarregarmos, podemos ver que
nossa própria fonte está sendo usada. Agora também vemos que aqui no iOS, nosso título é, portanto, cortado, isso
é algo que precisamos corrigir, mas, em geral, isso agora parece com o que deveria ser. Agora vamos garantir que o título que
está sendo cortado seja fixo e, para isso, no item de produto aqui, que é onde temos esse
título, aqui esse título talvez tenha uma margem reduzida vertical de apenas 2, porque eu ainda gosto dessa distância e agora o 15% da
altura que atribuímos ao título e o preço é suficiente para compartilhar isso e, portanto,
agora isso parece com o que deveria ser.
Agora que estamos usando a fonte personalizada, podemos ir para a página de
detalhes. Diria que agora é hora de garantir que possamos adicionar itens ao carrinho e, portanto, fazer
com que este botão funcione.