Ahora que aprendió cómo puede agregar fuentes a una aplicación y adjuntará, encontrará un archivo zip con las
fuentes que quiero agregar. Para eso en la carpeta
de activos, agregaré una nueva carpeta de fuentes y luego es OpenSans-Bold y regular. archivo ttf que está en el archivo zip
que encuentra adjunto que quiero agregar aquí.
Ahora, agregar los archivos por sí solo no servirá de mucho, como sabe, en cambio,
tenemos que cargar estas fuentes y lo hacemos en la aplicación. js, que es nuestro archivo de inicio que
inicia toda la aplicación. Allí, tenemos que importar
todo como fuente desde expo-font y es posible que esto no esté disponible
en su proyecto todavía, por lo que es posible que desee ejecutar npm install --save expo-font
para asegurarse de
que esté disponible, para instalarlo paquete y con eso instalado, puede importar la fuente desde allí, así y
también quiero importar el componente
de carga de la aplicación desde la expo, ese es el componente que prolongará la pantalla de inicio cuando la
aplicación se inicie hasta que se carguen nuestras fuentes para que solo ver algo
en la pantalla cuando todos nuestros activos, y en este caso estas son
las fuentes, están realmente disponibles y realmente están ahí. Ahora, con estas importaciones agregadas, podemos agregar una función
aquí fuera de
nuestra función componente que nombraré fuentes de búsqueda y esta es
una función que finalmente usará la fuente, así que lo que estoy importando aquí, carga async y luego pase
un objeto donde describamos los datos que queremos cargar y esa es la fuente abierta sin registro que
registraré bajo abierto, agregamos esto al requerir esto. / assets / fonts / OpenSans, no en negrita sino regular. ttf y luego, además, tenemos open-sans-bold,
esa es la otra fuente que quiero registrar, requiriéndola de assets / fonts
/ OpenSans-Bold. ttf, así.
Ahora tenemos que devolver esto porque load async devuelve una promesa y quiero devolver esto en mi función de búsqueda
de fuentes porque con esto, podemos usarlo junto con el componente de carga de la aplicación y ese es un patrón
que aprendiste anteriormente en el curso.
Entonces, en caso de que
esto sea nuevo para usted, asegúrese de pasar primero por las otras secciones de este curso.
Así que ahora podemos usar fuentes de captación con la carga de la aplicación y lo hacemos dentro de nuestro
componente de la aplicación, allí administraré algunos estados y lo haré con la ayuda del gancho useState que importamos de
React y lo nombraré indique la fuente cargada y configure la fuente cargada y llame a useState e inicialmente, eso es falso porque inicialmente, la fuente no
se ha cargado y luego aquí,
podemos verificar si la fuente no se ha cargado, que inicialmente es el caso, luego quiero volver
el componente de carga de la aplicación en lugar de mi contenido normal de la aplicación porque en el componente de
carga de la aplicación, podemos agregar la propiedad de inicio asíncrono y apuntar a buscar fuentes que inicia esta función de
búsqueda de fuentes y una vez que esto esté hecho, la función que pasamos a onFinish será llamado y
en esta función, simplemente estableceré la fuente cargada en true, así. Por lo tanto, esto asegura que simplemente mantengamos la pantalla de
inicio abierta hasta que se carguen nuestras fuentes y esto se procesará hasta que volvamos a cargar
nuestras fuentes y, en adelante, cargaremos este contenido. Ahora con eso, nos estamos asegurando de que estamos importando nuestras fuentes y
que podemos comenzar a usarlas y las necesitaremos en todo este módulo.
Con eso, ahora es el momento de comenzar a agregar realmente lo que todos buscamos, la navegación.