1
00:00:02,190 --> 00:00:06,450
Ahora ya agregamos fuentes varias veces en este curso, por lo que no

2
00:00:06,450 --> 00:00:12,780
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

3
00:00:12,780 --> 00:00:15,470
utilizando a lo largo del curso, se abren sin negrita y

4
00:00:15,480 --> 00:00:17,550
regulares y ahora tenemos que cargarlas cuando la

5
00:00:17,550 --> 00:00:22,690
aplicación se inicia en la aplicación. archivo js. Allí, ahora

6
00:00:23,100 --> 00:00:34,690
puede importar algo de expo y ese algo es el componente de carga de la aplicación y también necesita importar star

7
00:00:34,690 --> 00:00:42,310
como fuente de expo-font y para asegurarse de que esté disponible, ejecute npm install

8
00:00:42,340 --> 00:00:49,870
--save expo-font para instalar esto en su proyecto y asegúrese de que pueda usarlo.

9
00:00:49,890 --> 00:00:53,760
Ahora, estas son las dos cosas que necesita instalar allí y

10
00:00:53,770 --> 00:00:58,620
con eso instalado, podemos agregar una nueva función aquí, tal vez nombrarla para buscar fuentes.

11
00:00:58,640 --> 00:01:07,690
Esta es una función que al final no toma argumentos, pero allí, ahora puedo llamar a la carga de

12
00:01:08,200 --> 00:01:13,510
fuentes asíncrona y devolverla porque eso devuelve una promesa y

13
00:01:13,510 --> 00:01:18,910
las fuentes de recuperación deben devolver una promesa y pasar un objeto

14
00:01:18,940 --> 00:01:25,560
Javascript donde asignamos las fuentes que quiero cargar y luego tendré open-sans que mapeo

15
00:01:25,560 --> 00:01:38,020
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

16
00:01:38,080 --> 00:01:45,560
mapa eso requiere / assets / fonts / open-sans-bold para que ambas fuentes se importen aquí.

17
00:01:45,580 --> 00:01:51,230
Ahora, por supuesto, es necesario invocar las fuentes de recuperación y nuestro componente de carga de aplicaciones debería

18
00:01:51,370 --> 00:01:56,800
invocarlo, por lo tanto, también debemos importar el estado de uso de React, para que podamos controlar

19
00:01:56,800 --> 00:01:57,990
si los datos

20
00:01:58,240 --> 00:02:06,430
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

21
00:02:06,430 --> 00:02:09,080
con el estado de uso, eso es falso.

22
00:02:09,250 --> 00:02:13,190
Si eso es cierto, quiero representar esta salida, por lo tanto, siempre

23
00:02:13,270 --> 00:02:18,970
que sea falsa, de ahí el signo de exclamación aquí, quiero devolver el componente de carga de la aplicación

24
00:02:18,970 --> 00:02:25,210
que prolonga nuestra carga, nuestra pantalla de inicio y allí, necesitamos proporcione estos accesorios de inicio asíncrono que apuntan a

25
00:02:25,930 --> 00:02:30,850
la función de búsqueda de fuentes, que es la función que se ejecuta cuando este componente

26
00:02:30,850 --> 00:02:37,350
se procesa por primera vez y luego al finalizar, que ejecuta una función una vez que se realiza esta carga y en

27
00:02:37,350 --> 00:02:38,830
esta función que se

28
00:02:38,830 --> 00:02:45,890
ejecutará, I ' configuraré mi fuente cargada en true para que ya no procesemos la carga de la aplicación, sino que rendericemos este contenido.

29
00:02:46,000 --> 00:02:51,490
Ahora nuestras fuentes se cargan y ahora podemos usarlas y quiero usarlas en dos lugares: mi artículo del producto, que es

30
00:02:51,520 --> 00:02:58,030
el componente que representamos en la descripción general de los productos. Por supuesto, tenemos texto, tenemos

31
00:02:58,030 --> 00:03:06,340
nuestro título y tenemos nuestro precio aquí y es allí donde en el título, también

32
00:03:06,340 --> 00:03:12,760
quiero establecer una familia de fuentes de open-sans-bold y sobre el

33
00:03:12,760 --> 00:03:20,020
precio, también quiero establecer una familia de fuentes de open-sans y en la

34
00:03:20,020 --> 00:03:29,080
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

35
00:03:29,080 --> 00:03:33,310
ese estilo audaz y la descripción solo obtendrá la fuente open sans.

36
00:03:33,490 --> 00:03:40,880
Ahora, eso no es todo en realidad, en el navegador de la tienda en mi navegador principal aquí,

37
00:03:40,880 --> 00:03:41,880
en las

38
00:03:41,900 --> 00:03:51,520
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

39
00:03:51,520 --> 00:04:01,360
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

40
00:04:01,510 --> 00:04:09,600
encabezado define cómo ese texto posterior que vemos en iOS tiene este estilo y que también debería usar una familia

41
00:04:09,600 --> 00:04:17,120
de fuentes de -sans sin la negrita versión. Con eso, si ahora guardamos esto y esta recarga, podemos ver

42
00:04:17,860 --> 00:04:23,060
que nuestra propia fuente se está utilizando. Ahora también vemos que aquí en iOS, nuestro título está por lo tanto

43
00:04:23,110 --> 00:04:29,330
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

44
00:04:29,350 --> 00:04:37,010
se está cortando sea fijo y para eso en el artículo del producto aquí, que es donde tenemos ese

45
00:04:37,010 --> 00:04:47,340
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

46
00:04:47,340 --> 00:04:53,800
altura que le damos al título y el precio son suficientes para compartir esto y, por

47
00:04:53,880 --> 00:04:57,390
lo tanto, ahora se ve como debería verse.

48
00:04:57,660 --> 00:05:01,540
Ahora estamos usando la fuente personalizada, podemos ir a la página de detalles, diría

49
00:05:01,710 --> 00:05:06,750
que ahora es realmente el momento de asegurarnos de que podemos agregar elementos al carrito y, por lo

50
00:05:06,750 --> 00:05:08,340
tanto, hacer que esto funcione.