1
00:00:02,230 --> 00:00:09,790
Así que quiero comenzar con algunos ajustes de fuente en mis pestañas aquí, en el encabezado y también en

2
00:00:09,970 --> 00:00:15,940
el texto aquí en todas mis recetas. Quiero asegurarme de que en todas partes, estoy usando la fuente correcta,

3
00:00:15,940 --> 00:00:19,930
mis propias fuentes personalizadas y especialmente aquí, en el encabezado, en las pestañas, todavía no estamos asegurando esto.

4
00:00:20,050 --> 00:00:22,970
Por supuesto, es relativamente fácil

5
00:00:22,990 --> 00:00:31,040
asegurarse de eso y comencemos con el encabezado. El encabezado generalmente tiene un estilo, como el color de fondo, con nuestras

6
00:00:31,040 --> 00:00:34,200
opciones de navegación predeterminadas que siempre configuramos en el navegador de

7
00:00:34,210 --> 00:00:40,640
pila a la derecha, las opciones de navegación predeterminadas aquí nos permiten diseñar el encabezado y, por ejemplo, darle al encabezado un

8
00:00:40,640 --> 00:00:43,390
estilo general y Añadir un color de fondo.

9
00:00:43,470 --> 00:00:50,750
Ahora es importante reconocer aquí que el estilo de encabezado realmente solo se dirige al cuadro, el fondo, por así decirlo,

10
00:00:50,750 --> 00:00:59,540
por lo que el contenedor en el que se encuentran los elementos de acción, el botón de retroceso y este título, el título en sí

11
00:00:59,660 --> 00:01:02,390
mismo no puede orientarse con estilo de

12
00:01:02,390 --> 00:01:08,420
encabezado, pero Por supuesto, tenemos una alternativa a eso. Además del estilo de encabezado donde podemos diseñar ese

13
00:01:08,420 --> 00:01:14,300
contenedor de encabezado, también tenemos un estilo de título de encabezado y que, como era de esperar, apunta al componente de

14
00:01:14,300 --> 00:01:20,420
texto en el que se presenta nuestro título de encabezado y allí podemos diseñarlo como podemos diseñar elementos de texto en React

15
00:01:20,420 --> 00:01:23,960
Native, por ejemplo Al agregar una familia de fuentes de sans abierto, nuevamente

16
00:01:23,960 --> 00:01:27,280
uso la versión sin negrita para que podamos ver rápidamente la diferencia.

17
00:01:27,320 --> 00:01:35,560
Esto claramente ya no está en negrita, supongo, es bastante claro de ver, especialmente aquí en iOS y ahora si

18
00:01:35,560 --> 00:01:40,240
configuro esto en negrita, me aseguro de usar este estilo correcto

19
00:01:40,240 --> 00:01:46,280
tanto en iOS como en Android. Ahora, por cierto, para el texto posterior aquí, también podemos

20
00:01:46,540 --> 00:01:53,380
anular ese valor predeterminado, que es la fuente predeterminada del sistema al configurar el estilo del título posterior del encabezado, esa

21
00:01:53,380 --> 00:01:53,930
es

22
00:01:53,950 --> 00:01:59,110
una configuración separada que podemos configurar aquí y allá, también podemos configurar la familia de fuentes

23
00:01:59,140 --> 00:02:01,350
para digamos open sans, no la

24
00:02:01,360 --> 00:02:07,600
versión en negrita, no quiero tener eso en negrita pero quiero tenerlo en mi propia fuente y ahora debería

25
00:02:07,600 --> 00:02:13,470
ser open sans aquí y usar mi propia fuente. En Android, por supuesto, esto no tiene ningún efecto

26
00:02:13,470 --> 00:02:17,170
porque no tenemos texto posterior. Eso es una cosa,

27
00:02:17,190 --> 00:02:24,660
ese es el encabezado, para las pestañas es bastante similar. Allí podemos ir a nuestro navegador de pestañas que estamos creando,

28
00:02:24,660 --> 00:02:25,940
como el navegador de

29
00:02:25,950 --> 00:02:26,700
pestañas

30
00:02:26,880 --> 00:02:33,390
inferior del material y esto, por supuesto, tiene nuestro tabScreenConfig y luego este segundo objeto donde configuramos el navegador y,

31
00:02:33,390 --> 00:02:34,440
como siempre en

32
00:02:34,440 --> 00:02:38,880
React navigation, es el segundo objeto donde puede controlar la apariencia general de las

33
00:02:38,880 --> 00:02:44,270
cosas específicas del navegador, como en el caso del navegador de pestañas, el color del icono de

34
00:02:44,280 --> 00:02:52,280
la pestaña, el color de la barra, el color del tinte o también el estilo de la etiqueta y, de hecho, aquí en las opciones

35
00:02:52,280 --> 00:02:56,330
de la barra de pestañas para navegador de pestañas inferior, podemos agregar

36
00:02:56,330 --> 00:02:59,000
un estilo de etiqueta y nuevamente, esto apunta

37
00:02:59,000 --> 00:03:03,010
al componente de texto que contiene nuestra etiqueta, podemos agregar una familia

38
00:03:03,140 --> 00:03:09,230
de fuentes aquí de OpenSans-Bold para que podamos ver claramente la diferencia, si esto se recarga, ahora esto claramente

39
00:03:09,230 --> 00:03:12,800
Es un texto en negrita. En realidad, esto no se ve tan

40
00:03:12,800 --> 00:03:14,510
mal, por lo que creo que podemos

41
00:03:14,720 --> 00:03:18,920
mantener esto, pero por supuesto, también podría configurarlo para abrir sans si desea una versión más delgada,

42
00:03:19,010 --> 00:03:22,320
pero ahora usaría nuestra propia fuente. Ahora para Android,

43
00:03:22,320 --> 00:03:29,600
aquí el navegador de pestañas inferior del material también tiene algunas opciones de configuración, pero en realidad no

44
00:03:29,720 --> 00:03:31,910
tiene un estilo de etiqueta.

45
00:03:31,910 --> 00:03:38,690
Lo que puede hacer allí es en las pestañas separadas que está cargando, por lo que en las opciones de navegación

46
00:03:38,690 --> 00:03:47,170
de las pestañas que está cargando, donde también está configurando el icono de la barra de pestañas, etc., podemos agregar la etiqueta de la barra de pestañas

47
00:03:47,170 --> 00:03:54,160
aquí donde podríamos establecer una etiqueta como comidas, múltiples marcas de explicación para anular lo que usamos como etiqueta ahora tanto en

48
00:03:54,160 --> 00:03:54,540
iOS

49
00:03:54,550 --> 00:04:00,490
como también en Android y que en realidad puede ser una cadena como esta, pero también puede establecer esto

50
00:04:00,490 --> 00:04:07,450
en un componente React, para un componente de texto a saber, y luego allí, puede configurar su etiqueta, comidas, pero por supuesto

51
00:04:07,720 --> 00:04:11,490
ahora aquí, puede agregar estilo y agregar los estilos que desee.

52
00:04:11,500 --> 00:04:16,120
Por lo tanto, es una pequeña solución, ya que no hay otra forma integrada de diseñar esto para

53
00:04:16,120 --> 00:04:19,060
el navegador de pestañas inferiores del material, pero mejor que nada.

54
00:04:19,060 --> 00:04:25,060
Entonces, aquí, ahora podemos establecer la familia de fuentes en OpenSans-Bold y, si lo hacemos, también tenemos que asegurarnos de

55
00:04:25,060 --> 00:04:30,240
importar el componente de texto de React Native porque de lo contrario no podemos usarlo allí y

56
00:04:35,760 --> 00:04:40,980
ahora con eso , también obtenemos esto en nuestro iOS, por supuesto, porque estamos compartiendo la configuración, lo

57
00:04:40,980 --> 00:04:45,780
arreglaremos en un segundo, pero ahora, así es como podemos configurar nuestro propio estilo allí, pero

58
00:04:45,810 --> 00:04:52,820
por supuesto, ahora perdimos el color que es la desventaja de configurar esto manualmente aquí y dado que solo necesitamos esta solución aquí, para

59
00:04:52,820 --> 00:04:59,930
Android, para las pestañas inferiores del material, la solución más fácil es usar la API de la plataforma y solo establecer esta etiqueta de

60
00:04:59,930 --> 00:05:04,760
barra de pestañas en este componente de texto si ' estamos en Android porque solo entonces,

61
00:05:04,760 --> 00:05:11,330
necesitamos esta solución alternativa para configurar la familia de fuentes. Así que comprobaré si estamos en Android y, si ese es

62
00:05:11,330 --> 00:05:18,650
el caso, devolveré un componente de texto aquí, de lo contrario solo devolveré las comidas de texto y luego la ventaja de simplemente devolver

63
00:05:18,650 --> 00:05:24,710
un texto aquí es simplemente que nuestro otro la configuración que establece el color de tinte y el estilo

64
00:05:24,710 --> 00:05:30,920
de etiqueta, etc., se activará y no se anulará. Si configuramos nuestro propio componente de texto, deshabilitaremos todas esas características

65
00:05:30,920 --> 00:05:34,700
predeterminadas, todas estas características predeterminadas que están integradas en el navegador de pestañas inferior.

66
00:05:34,700 --> 00:05:39,200
El problema con el navegador de pestañas inferior del material es que simplemente no tiene todas estas

67
00:05:39,200 --> 00:05:39,800
características predeterminadas

68
00:05:39,860 --> 00:05:44,690
incorporadas, por lo que debemos anular esto, pero solo tenemos que hacer esto para Android por otro lado.

69
00:05:44,780 --> 00:05:48,290
Ahora podemos copiar eso y hacer exactamente lo mismo aquí, por

70
00:05:48,290 --> 00:05:57,530
supuesto, para favoritos, renderizar favoritos como texto en iOS y, por supuesto, también en el componente de texto para Android y con eso, ahora deberíamos tener un estilo

71
00:05:57,590 --> 00:06:03,860
que funcione y esto se ve bien . En iOS allí, básicamente no

72
00:06:03,920 --> 00:06:09,740
cambiamos nada y en Android, ahora también tenemos nuestras propias fuentes personalizadas.

73
00:06:09,740 --> 00:06:12,520
Por lo tanto, se trata de una solución temporal que

74
00:06:12,520 --> 00:06:19,130
desafortunadamente se requiere aquí cuando se trabaja con el navegador de pestañas inferiores, pero no es demasiado difícil de implementar y, con eso, nos

75
00:06:19,130 --> 00:06:24,290
estamos asegurando de que estamos usando nuestra propia fuente personalizada en todas partes en la navegación relacionada características

76
00:06:24,800 --> 00:06:25,850
de nuestra aplicación.