1 00:00:02,190 --> 00:00:06,450 Agora já adicionamos fontes várias vezes neste curso, por isso não é 2 00:00:06,450 --> 00:00:12,780 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 3 00:00:12,780 --> 00:00:15,470 que usamos durante o curso, abra sem negrito e 4 00:00:15,480 --> 00:00:17,550 regular e agora precisamos carregá-las quando 5 00:00:17,550 --> 00:00:22,690 o aplicativo for iniciado. arquivo js. Lá, agora 6 00:00:23,100 --> 00:00:34,690 você pode importar algo do expo e esse é o componente de carregamento do aplicativo e também é necessário importar estrela como 7 00:00:34,690 --> 00:00:42,310 fonte do expo-font e para garantir que isso esteja disponível, execute o npm install 8 00:00:42,340 --> 00:00:49,870 --save expo-font para instalar isso no seu projeto e garanta que você possa usá-lo. 9 00:00:49,890 --> 00:00:53,760 Agora, essas são as duas coisas que você precisa instalar lá 10 00:00:53,770 --> 00:00:58,620 e, com a instalação, podemos adicionar uma nova função aqui, talvez nomear fontes de busca. 11 00:00:58,640 --> 00:01:07,690 Esta é uma função que, no final, não aceita argumentos, mas, agora, posso chamar de carregamento de fonte assíncrona 12 00:01:08,200 --> 00:01:13,510 e retornar isso porque, que retorna uma promessa e busca 13 00:01:13,510 --> 00:01:18,910 de fontes, deve retornar uma promessa e passar um objeto Javascript 14 00:01:18,940 --> 00:01:25,560 onde mapeamos as fontes que deseja carregar e depois terei open-sans que mapeio 15 00:01:25,560 --> 00:01:38,020 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 16 00:01:38,080 --> 00:01:45,560 que exige / assets / fonts / open-sans-bold para que ambas as fontes sejam importadas aqui. 17 00:01:45,580 --> 00:01:51,230 Agora é claro que as fontes de busca precisam ser chamadas e isso deve ser chamado pelo nosso 18 00:01:51,370 --> 00:01:56,800 componente de carregamento de aplicativos. Portanto, também precisamos importar o estado de uso do React, para que 19 00:01:56,800 --> 00:01:57,990 possamos controlar se 20 00:01:58,240 --> 00:02:06,430 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, 21 00:02:06,430 --> 00:02:09,080 inicialmente, com o estado de uso, que é falso. 22 00:02:09,250 --> 00:02:13,190 Se isso for verdade, quero renderizar essa saída, portanto, desde que 23 00:02:13,270 --> 00:02:18,970 seja falso, portanto, o ponto de exclamação aqui, quero retornar o componente de carregamento do aplicativo que 24 00:02:18,970 --> 00:02:25,210 prolonga nosso carregamento, nossa tela de inicialização e lá, precisamos forneça esses props assíncronos de início, que apontam para 25 00:02:25,930 --> 00:02:30,850 a função buscar fontes, que é a função que é executada quando esse componente 26 00:02:30,850 --> 00:02:37,350 é renderizado pela primeira vez e, em seguida, termina que executa uma função assim que esse carregamento é feito e 27 00:02:37,350 --> 00:02:38,830 nessa função a ser 28 00:02:38,830 --> 00:02:45,890 executada, ' configurarei minha fonte carregada como true para que não renderemos mais o carregamento do aplicativo, mas renderizemos esse conteúdo. 29 00:02:46,000 --> 00:02:51,490 Agora nossas fontes são carregadas e agora podemos usá-las e quero usá-las em dois lugares - o item do meu produto, 30 00:02:51,520 --> 00:02:58,030 que é o componente que renderizamos na visão geral dos produtos. É claro que temos algum 31 00:02:58,030 --> 00:03:06,340 texto, temos nosso título e temos nosso preço aqui e é lá que, no título, 32 00:03:06,340 --> 00:03:12,760 eu também quero definir uma família de fontes open-sans-bold e sobre 33 00:03:12,760 --> 00:03:20,020 o preço, também quero definir uma família de fontes open-sans e, na tela 34 00:03:20,020 --> 00:03:29,080 de detalhes do produto, é a mesma coisa. Talvez o preço deva ter uma família de fontes open-sans-bold para ter 35 00:03:29,080 --> 00:03:33,310 esse estilo arrojado e a descrição obterá a fonte open sans. 36 00:03:33,490 --> 00:03:40,880 Agora, na verdade, isso não é tudo: no navegador da loja no meu navegador principal aqui, nas 37 00:03:40,880 --> 00:03:41,880 opções de 38 00:03:41,900 --> 00:03:51,520 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 39 00:03:51,520 --> 00:04:01,360 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 40 00:04:01,510 --> 00:04:09,600 para trás define como o texto que vemos no iOS é denominado isso e que também deve usar uma 41 00:04:09,600 --> 00:04:17,120 família de fontes open-sans, não o negrito versão. Com isso, se agora salvarmos isso e recarregarmos, podemos ver que 42 00:04:17,860 --> 00:04:23,060 nossa própria fonte está sendo usada. Agora também vemos que aqui no iOS, nosso título é, portanto, cortado, isso 43 00:04:23,110 --> 00:04:29,330 é algo que precisamos corrigir, mas, em geral, isso agora parece com o que deveria ser. Agora vamos garantir que o título que 44 00:04:29,350 --> 00:04:37,010 está sendo cortado seja fixo e, para isso, no item de produto aqui, que é onde temos esse 45 00:04:37,010 --> 00:04:47,340 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 46 00:04:47,340 --> 00:04:53,800 altura que atribuímos ao título e o preço é suficiente para compartilhar isso e, portanto, 47 00:04:53,880 --> 00:04:57,390 agora isso parece com o que deveria ser. 48 00:04:57,660 --> 00:05:01,540 Agora que estamos usando a fonte personalizada, podemos ir para a página de 49 00:05:01,710 --> 00:05:06,750 detalhes. Diria que agora é hora de garantir que possamos adicionar itens ao carrinho e, portanto, fazer 50 00:05:06,750 --> 00:05:08,340 com que este botão funcione.