Ahora ya agregamos fuentes varias veces en este curso, por lo que no
es demasiado nuevo cómo funciona. En la carpeta de activos, agregaré una carpeta de fuentes, pero de nuevo, puede almacenarlas donde desee. Adjunto encontrará las dos fuentes que hemos estado
utilizando a lo largo del curso, se abren sin negrita y
regulares y ahora tenemos que cargarlas cuando la
aplicación se inicia en la aplicación. archivo js. Allí, ahora
puede importar algo de expo y ese algo es el componente de carga de la aplicación y también necesita importar star
como fuente de expo-font y para asegurarse de que esté disponible, ejecute npm install
--save expo-font para instalar esto en su proyecto y asegúrese de que pueda usarlo.
Ahora, estas son las dos cosas que necesita instalar allí y
con eso instalado, podemos agregar una nueva función aquí, tal vez nombrarla para buscar fuentes.
Esta es una función que al final no toma argumentos, pero allí, ahora puedo llamar a la carga de
fuentes asíncrona y devolverla porque eso devuelve una promesa y
las fuentes de recuperación deben devolver una promesa y pasar un objeto
Javascript donde asignamos las fuentes que quiero cargar y luego tendré open-sans que mapeo
a mi requieren importar aquí donde apunto a la carpeta de activos, carpeta de fuentes y ese open-sans regular y también agrego open-sans-bold aquí como clave y
mapa eso requiere / assets / fonts / open-sans-bold para que ambas fuentes se importen aquí.
Ahora, por supuesto, es necesario invocar las fuentes de recuperación y nuestro componente de carga de aplicaciones debería
invocarlo, por lo tanto, también debemos importar el estado de uso de React, para que podamos controlar
si los datos
se han cargado o no para que en el componente funcional aquí, podemos tener nuestro estado de fuente cargada y establecer la fuente cargada e inicialmente
con el estado de uso, eso es falso.
Si eso es cierto, quiero representar esta salida, por lo tanto, siempre
que sea falsa, de ahí el signo de exclamación aquí, quiero devolver el componente de carga de la aplicación
que prolonga nuestra carga, nuestra pantalla de inicio y allí, necesitamos proporcione estos accesorios de inicio asíncrono que apuntan a
la función de búsqueda de fuentes, que es la función que se ejecuta cuando este componente
se procesa por primera vez y luego al finalizar, que ejecuta una función una vez que se realiza esta carga y en
esta función que se
ejecutará, I ' configuraré mi fuente cargada en true para que ya no procesemos la carga de la aplicación, sino que rendericemos este contenido.
Ahora nuestras fuentes se cargan y ahora podemos usarlas y quiero usarlas en dos lugares: mi artículo del producto, que es
el componente que representamos en la descripción general de los productos. Por supuesto, tenemos texto, tenemos
nuestro título y tenemos nuestro precio aquí y es allí donde en el título, también
quiero establecer una familia de fuentes de open-sans-bold y sobre el
precio, también quiero establecer una familia de fuentes de open-sans y en la
pantalla de detalles del producto, es lo mismo. El precio tal vez debería obtener una familia de fuentes de open-sans-bold para tener
ese estilo audaz y la descripción solo obtendrá la fuente open sans.
Ahora, eso no es todo en realidad, en el navegador de la tienda en mi navegador principal aquí,
en las
opciones de navegación predeterminadas, también quiero usar esa fuente en el encabezado, por lo que el estilo del título del encabezado aquí debería ser
un objeto donde configuro la familia de fuentes abrir-sin-negrita para usar la fuente negrita-abierta-sans allí y el estilo del título de la parte posterior del
encabezado define cómo ese texto posterior que vemos en iOS tiene este estilo y que también debería usar una familia
de fuentes de -sans sin la negrita versión. Con eso, si ahora guardamos esto y esta recarga, podemos ver
que nuestra propia fuente se está utilizando. Ahora también vemos que aquí en iOS, nuestro título está por lo tanto
cortado, eso es algo que tendremos que arreglar, pero en general, ahora se ve como debería verse. Ahora asegurémonos de que el título que
se está cortando sea fijo y para eso en el artículo del producto aquí, que es donde tenemos ese
título, aquí este título debería tener un margen vertical reducido de solo 2 porque todavía me gusta esa distancia y ahora el El 15% de la
altura que le damos al título y el precio son suficientes para compartir esto y, por
lo tanto, ahora se ve como debería verse.
Ahora estamos usando la fuente personalizada, podemos ir a la página de detalles, diría
que ahora es realmente el momento de asegurarnos de que podemos agregar elementos al carrito y, por lo
tanto, hacer que esto funcione.