1 00:00:02,190 --> 00:00:07,460 Agora que você aprendeu como adicionar fontes a um aplicativo e anexá-lo, encontrará um arquivo zip com as 2 00:00:07,470 --> 00:00:10,000 fontes que quero adicionar. Para isso, na pasta assets, 3 00:00:10,020 --> 00:00:16,290 adicionarei uma nova pasta de fontes e, em seguida, será o OpenSans-Bold e regular. arquivo ttf que está no arquivo zip que você 4 00:00:16,290 --> 00:00:19,350 encontra anexado que eu quero adicionar aqui. 5 00:00:19,470 --> 00:00:22,670 Agora, adicionar os arquivos por si só não fará o que você sabe, é claro, em 6 00:00:22,710 --> 00:00:27,690 vez disso, precisamos carregar essas fontes e fazemos isso no aplicativo. arquivo js, que é o arquivo inicial que 7 00:00:27,690 --> 00:00:31,070 inicia o aplicativo inteiro. Lá, precisamos importar 8 00:00:31,170 --> 00:00:36,660 tudo como fonte da expo-font e isso pode não estar disponível no 9 00:00:36,660 --> 00:00:43,320 seu projeto ainda; portanto, você pode executar o npm install --save expo-font para garantir 10 00:00:43,320 --> 00:00:45,010 que esteja disponível, 11 00:00:45,030 --> 00:00:52,530 para instalar esse pacote e com isso instalado, você pode importar fontes de lá, assim e 12 00:00:52,620 --> 00:00:54,750 também quero importar o 13 00:00:54,750 --> 00:01:02,910 componente de carregamento de aplicativos da expo, que é o componente que prolongará a tela inicial quando o 14 00:01:02,910 --> 00:01:09,000 aplicativo iniciar até que nossas fontes sejam carregadas, para que apenas veja algo 15 00:01:09,000 --> 00:01:14,670 na tela quando todos os nossos ativos e, neste caso, essas são 16 00:01:14,700 --> 00:01:22,950 as fontes, estiverem realmente disponíveis e realmente estiverem lá. Agora, com essas importações adicionadas, podemos adicionar uma função 17 00:01:23,250 --> 00:01:25,130 aqui fora da 18 00:01:25,310 --> 00:01:30,180 nossa função componente, que chamarei de buscar fontes e esta é 19 00:01:30,600 --> 00:01:39,190 uma função que, no final, usará a fonte, então o que estou importando aqui, carrega async e depois passamos um 20 00:01:39,190 --> 00:01:47,110 objeto onde descrevemos os dados que queremos carregar e essa é a fonte open sans que eu registrarei 21 00:01:47,110 --> 00:01:57,890 em open sans; adicionamos isso exigindo isso de. / assets / fonts / OpenSans, sem negrito, mas regular. ttf e, além disso, temos open-sans-bold, 22 00:01:57,890 --> 00:02:05,470 essa é a outra fonte que quero registrar, exigindo-a de assets / fonts 23 00:02:05,470 --> 00:02:08,210 / OpenSans-Bold. ttf, assim. 24 00:02:08,440 --> 00:02:14,320 Agora precisamos retornar isso porque load async retorna uma promessa e quero devolvê-lo na minha função de buscar 25 00:02:14,320 --> 00:02:20,410 fontes, pois, com isso, podemos usá-lo junto com o componente de carregamento de aplicativos e esse é um padrão 26 00:02:20,410 --> 00:02:22,430 que você aprendeu anteriormente no curso. 27 00:02:22,450 --> 00:02:23,970 Portanto, caso isso 28 00:02:24,010 --> 00:02:28,040 seja novo para você, verifique as outras seções deste curso primeiro. 29 00:02:28,060 --> 00:02:34,840 Portanto, agora podemos usar fontes de busca com o carregamento do aplicativo e fazemos isso dentro do componente 30 00:02:34,840 --> 00:02:41,680 do aplicativo. Lá, gerenciarei algum estado e o faço com a ajuda do gancho useState que importamos do 31 00:02:42,610 --> 00:02:51,760 React e o nomeei carregue a fonte de estado e defina a fonte carregada e chame useState e, inicialmente, isso é falso porque, inicialmente, a 32 00:02:51,790 --> 00:02:54,260 fonte não foi carregada e, aqui, 33 00:02:54,400 --> 00:03:00,100 podemos verificar se a fonte não foi carregada, o que inicialmente é o caso, então 34 00:03:00,100 --> 00:03:07,270 quero retornar o componente de carregamento do aplicativo em vez do conteúdo normal do aplicativo, porque no componente de 35 00:03:07,600 --> 00:03:14,600 carregamento do aplicativo, podemos adicionar a propriedade start async e apontar para buscar fontes que iniciam essa função de 36 00:03:14,860 --> 00:03:21,430 busca de fontes e, uma vez feito isso, a função que passamos ao onFinish será chamado e 37 00:03:21,430 --> 00:03:29,240 nesta função, simplesmente definirei a fonte carregada como true, assim. Portanto, isso garante que simplesmente mantenha a tela inicial 38 00:03:29,240 --> 00:03:35,600 aberta até que nossas fontes sejam carregadas e isso será renderizado até recarregarmos nossas 39 00:03:35,840 --> 00:03:42,590 fontes e, posteriormente, carregaremos esse conteúdo. Agora, com isso, garantimos que estamos importando nossas fontes e que podemos 40 00:03:42,590 --> 00:03:45,870 começar a usá-las e precisaremos delas ao longo deste módulo. 41 00:03:45,980 --> 00:03:52,280 Com isso, agora é hora de começar a adicionar realmente o que todos buscamos, a navegação.