1 00:00:02,210 --> 00:00:07,310 Ahora también quiero usar esta familia de fuentes para el título del encabezado. 2 00:00:07,310 --> 00:00:10,990 Entonces, aquí en mi componente de encabezado, en 3 00:00:11,000 --> 00:00:18,560 el título del encabezado, también quiero establecer una familia de fuentes en open-sans-bold para que también la usemos allí 4 00:00:20,300 --> 00:00:27,110 y para todos los demás textos en esta aplicación, realmente quiero usar mi abierto sin fuente 5 00:00:27,440 --> 00:00:35,480 Entonces, por ejemplo, en los juegos de inicio en verde aquí, tenemos nuestro texto, seleccionamos un número y para usar la 6 00:00:35,870 --> 00:00:45,080 fuente sans abierta normal, por supuesto, podemos asignar un estilo allí y luego usar texto de estilos por ejemplo y agregar este estilo de 7 00:00:45,350 --> 00:00:55,900 texto aquí en el abajo y luego use la familia de fuentes, open-sans. Ahora eso funciona pero, por supuesto, tiene 8 00:00:55,900 --> 00:00:57,450 un inconveniente. 9 00:00:57,700 --> 00:01:04,810 La desventaja es que ahora debe agregar manualmente esta familia de fuentes a cualquier texto en su aplicación 10 00:01:04,810 --> 00:01:10,980 donde desee usarla y debe agregarla directamente en los componentes de texto, no puede agregarla 11 00:01:11,140 --> 00:01:18,880 a una vista y, por ejemplo, configurar esto en la pantalla aquí y confía en que se transmite a textos 12 00:01:18,880 --> 00:01:21,010 anidados, desafortunadamente esto no funciona. 13 00:01:21,040 --> 00:01:28,120 Entonces, si quisiera ir a la pantalla aquí y configuro la familia de fuentes en open-sans-bold para que podamos ver fácilmente si funciona o no, verá 14 00:01:28,120 --> 00:01:32,340 que esto claramente no está en negrita, seleccione un número que no esté en negrita. 15 00:01:32,530 --> 00:01:38,250 Entonces, transmitirlo de esta manera, como funciona en CSS, no funciona porque eso no es CSS, 16 00:01:38,290 --> 00:01:45,130 es Javascript y lo que aplica en un objeto solo se aplica en el elemento, en el componente donde 17 00:01:45,190 --> 00:01:47,470 se adjunta este objeto de estilo. 18 00:01:47,470 --> 00:01:52,930 Por lo tanto, tendríamos que diseñar este texto individualmente, pero nuevamente, recrear ese estilo una y otra vez en 19 00:01:52,930 --> 00:01:56,760 todos los diferentes lugares podría no ser lo que desea hacer al final. 20 00:01:57,600 --> 00:02:01,680 Hay dos soluciones o la solución siempre suena un poco sucia, 21 00:02:01,680 --> 00:02:05,440 dos formas de manejar esto de una manera más elegante. 22 00:02:05,460 --> 00:02:12,210 Una es que cree un componente separado, tal vez un componente de texto del cuerpo o simplemente un 23 00:02:12,210 --> 00:02:13,920 componente de texto, lo 24 00:02:13,920 --> 00:02:19,040 que quiera nombrarlo y lo llamaré BodyText. js y será un componente muy 25 00:02:19,040 --> 00:02:27,360 simple, solo importo React de React e importo el texto y la hoja de estilo de React Native aquí y 26 00:02:30,250 --> 00:02:39,730 luego el componente de texto del cuerpo aquí recibe accesorios y simplemente devuelve mi componente de texto aquí donde saco accesorios niños entre 27 00:02:39,730 --> 00:02:41,650 el etiquetas de 28 00:02:41,650 --> 00:02:48,430 texto para que podamos pasar contenido al texto del cuerpo pasándolo entre la etiqueta de texto 29 00:02:48,430 --> 00:02:52,500 del cuerpo de apertura y cierre cuando usamos este componente. 30 00:02:52,510 --> 00:02:56,570 Entonces aquí tengo mis estilos y allá, uso la hoja de estilos. creo y, por supuesto, exporto este 31 00:02:56,950 --> 00:03:01,390 componente de esta manera y ahora aquí en esta hoja de estilo, simplemente 32 00:03:01,390 --> 00:03:07,370 configuro un estilo que aplico aquí a este texto, estilo de cuerpo o lo que quieras nombrar, tengo 33 00:03:08,650 --> 00:03:09,590 el 34 00:03:09,820 --> 00:03:12,680 estilo de cuerpo aquí y el único estilo que 35 00:03:12,910 --> 00:03:19,060 yo set es una familia de fuentes open sans y usaré negrita por ahora para que podamos ver que 36 00:03:19,060 --> 00:03:20,110 esto realmente tiene 37 00:03:20,170 --> 00:03:25,890 un efecto antes de cambiarlo a un poco más difícil de ver, abrir sans, tan open-sans-bold y 38 00:03:25,900 --> 00:03:31,900 ahora esto es un componente muy simple, solo una envoltura delgada alrededor del texto normal pero una envoltura 39 00:03:31,960 --> 00:03:34,360 delgada que siempre establece esta familia de 40 00:03:34,420 --> 00:03:39,640 fuentes y esto significa que siempre que queramos tener texto que use esta familia, quizás 41 00:03:39,640 --> 00:03:46,780 en todos los lugares de la aplicación, en lugar de usar el componente de texto normal de React Native, solo usamos el 42 00:03:46,780 --> 00:03:52,920 componente de texto del cuerpo que acabo de crear. Así que puedo importar el texto del cuerpo 43 00:03:53,890 --> 00:04:01,630 de los componentes BodyText, importando ese componente y ahora simplemente puedo reemplazar el componente de texto aquí con el texto del cuerpo y 44 00:04:01,630 --> 00:04:06,830 si hacemos eso y guardamos esto, por supuesto, vemos que ahora esto estará en negrita, 45 00:04:07,090 --> 00:04:12,640 bueno si yo lo hubiera usado en el texto correcto, este es, por supuesto, el texto 46 00:04:12,640 --> 00:04:17,670 seleccionado por el usuario, también está bien, pero quiero ir aquí para seleccionar el número. 47 00:04:17,740 --> 00:04:23,800 Entonces, si lo uso allí, el texto del cuerpo, envuelva este texto, verá que ahora está en negrita y ahora también podemos 48 00:04:23,800 --> 00:04:30,850 retroceder y darle a nuestro texto del cuerpo el aspecto abierto sin intención que todavía no es la fuente predeterminada, pero que puede ' Inmediatamente 49 00:04:31,240 --> 00:04:33,370 se verá que es una fuente diferente. 50 00:04:33,400 --> 00:04:40,240 Entonces, esta es la opción uno de pasar el estilo de texto o una familia de fuentes, simplemente crea tu propio 51 00:04:40,240 --> 00:04:45,250 componente de texto que siempre tiene esta familia de fuentes y si tienes varias familias 52 00:04:45,250 --> 00:04:49,670 de fuentes diferentes, como un título y un título, creas componentes separados. 53 00:04:49,790 --> 00:04:55,960 Por ejemplo, aquí tenemos un título, bueno, tal vez también queremos usarlo en otras partes de la aplicación. Entonces podemos 54 00:04:55,960 --> 00:05:02,500 agregar un TitleText. js, que es básicamente lo que tenemos en el texto 55 00:05:02,500 --> 00:05:09,700 del cuerpo, así que lo copiaré y lo moveré al texto del título y luego aquí, tenemos el nombre del texto del título 56 00:05:09,910 --> 00:05:12,980 y aquí, es el texto del título y allí, usamos 57 00:05:12,980 --> 00:05:19,510 open-sans- en negrita y tal vez para el título, también tiene un tamaño de fuente de 18 y ahora de nuevo, 58 00:05:19,530 --> 00:05:26,010 cambiemos el nombre a título tal vez, tiene más sentido para el estilo, pero ahora nuevamente, tenemos un envoltorio muy 59 00:05:26,010 --> 00:05:34,110 delgado alrededor del texto y en todos los lugares donde necesitamos el título, como en el encabezado, por ejemplo, podemos deshacernos de esta asignación de estilo 60 00:05:34,110 --> 00:05:43,340 manual aquí en el componente de encabezado y en su lugar simplemente importar nuestro texto de título desde el componente de texto del título y usarlo en lugar de texto, 61 00:05:43,340 --> 00:05:47,450 deshacerse de este estilo asignación aquí, así y haz lo mismo en la 62 00:05:47,690 --> 00:05:51,520 pantalla de inicio del juego. Allí, este texto ahora puede 63 00:05:51,560 --> 00:05:54,750 ser texto de título, todo lo que necesito 64 00:05:54,920 --> 00:05:57,860 hacer es importarlo. Así que permítanme importar el 65 00:05:57,860 --> 00:06:06,500 texto del título desde la carpeta de componentes y allí, desde el texto del título y ahora podemos reutilizar esto y tal como lo hicimos antes 66 00:06:06,500 --> 00:06:12,980 con la tarjeta, por ejemplo, si desea que esto todavía sea personalizable para que podamos configurar más el título o 67 00:06:12,980 --> 00:06:18,740 anular el tamaño de fuente o agregar un margen como lo estamos haciendo aquí, bueno, entonces lo 68 00:06:18,770 --> 00:06:25,440 que siempre puedes hacer es agregar estilo aquí al texto del título, referir al estilo de título, así que al 69 00:06:25,530 --> 00:06:32,080 estilo de título que tengo configurado allí en la pantalla de inicio del juego y dentro del componente de texto 70 00:06:32,080 --> 00:06:37,270 del título, solo necesita asegurarse de fusionar estos estilos entrantes con los estilos que está 71 00:06:37,270 --> 00:06:38,240 configurando allí. 72 00:06:38,260 --> 00:06:47,680 Entonces, el estilo ahora apunta a un objeto donde toma todos los valores en los títulos configurados aquí y luego los fusiona o los anula 73 00:06:47,680 --> 00:06:53,510 con todos los valores configurados en el estilo de accesorios y ahora tiene una capa de 74 00:06:53,620 --> 00:07:00,190 texto ajustable que establece estos estilos predeterminados pero que puede anularse y ajustarse a sus requisitos y, por 75 00:07:00,190 --> 00:07:01,990 lo tanto, tenemos el 76 00:07:01,990 --> 00:07:06,330 mismo aspecto que antes pero ahora con más facilidad de uso. 77 00:07:06,340 --> 00:07:08,730 Ahora, de nuevo, esa es la opción número uno. 78 00:07:08,740 --> 00:07:15,700 La alternativa a eso sería que, por ejemplo, en la carpeta de constantes, tenga sus estilos predeterminados. js o lo que quiera nombrar 79 00:07:15,720 --> 00:07:18,070 y allí, exporta 80 00:07:18,310 --> 00:07:26,770 una hoja de estilo predeterminada y necesita importar esto, por lo tanto, importe la hoja 81 00:07:26,770 --> 00:07:29,530 de estilo de React Native. 82 00:07:32,240 --> 00:07:43,590 Exporta su hoja de estilo predeterminada. crea un objeto y allí configuras como el texto de tu cuerpo, por ejemplo, cualquier nombre que desees 83 00:07:44,070 --> 00:07:45,100 y aquí 84 00:07:45,150 --> 00:07:50,910 configuras una familia de fuentes, abres sans y tal vez solo temporalmente para que podamos ver si esto 85 00:07:50,910 --> 00:07:52,520 funciona, dale un color rojo. 86 00:07:52,680 --> 00:07:55,480 Ahora puedes importar esto en diferentes 87 00:07:55,680 --> 00:08:07,630 archivos, digamos en la pantalla del juego, allí podemos importar estilos predeterminados de la carpeta de constantes y allí, estilos predeterminados y si ahora queremos ese estilo de 88 00:08:07,670 --> 00:08:11,070 texto predeterminado, por ejemplo, aquí en adivinanzas, bueno, 89 00:08:11,090 --> 00:08:12,930 entonces todo lo que 90 00:08:13,160 --> 00:08:19,340 hacemos es establecer el estilo aquí, alcanzar los estilos predeterminados y señalar el texto 91 00:08:19,340 --> 00:08:23,440 del cuerpo y verás si comenzamos un juego ahora, este 92 00:08:23,450 --> 00:08:25,200 texto será rojo. 93 00:08:25,370 --> 00:08:29,360 Entonces, si comenzamos este juego, los oponentes suponen que es rojo. 94 00:08:29,390 --> 00:08:35,360 Entonces, esta sería una alternativa a tener componentes separados, que simplemente tiene una hoja de estilo administrada globalmente que 95 00:08:35,360 --> 00:08:38,470 importa en diferentes archivos y ahora realmente no necesito un 96 00:08:38,680 --> 00:08:44,760 texto de cuerpo que sea rojo, pero lo que sí quiero es un título y allí , Quiero tener 97 00:08:44,780 --> 00:08:52,730 una familia de fuentes de open-sans-bold y un tamaño de fuente de digamos 18 y sí, tengo la misma configuración en el texto del título, solo 98 00:08:52,970 --> 00:08:55,320 la estoy recreando aquí para mostrar ambas 99 00:08:55,340 --> 00:09:01,010 alternativas porque ahora con con el título configurado de esta manera en la hoja de estilo predeterminada, ahora 100 00:09:01,010 --> 00:09:06,920 podemos ir a la pantalla del juego y escuchar no usar el texto del cuerpo, sino usar el título 101 00:09:07,250 --> 00:09:13,610 en la suposición del oponente y el resultado de esto es que si ahora reiniciamos este juego, Ten ese bonito 102 00:09:13,610 --> 00:09:14,630 título aquí. 103 00:09:14,660 --> 00:09:19,670 Entonces, esa es una alternativa válida y depende de usted cuál prefiera, componentes separados que reutilice 104 00:09:19,670 --> 00:09:25,560 en lugar del componente de texto o el componente de texto con un estilo administrado globalmente y, como nota 105 00:09:25,760 --> 00:09:31,460 al margen, en ese estilo administrado globalmente, usted es de Por supuesto, no se limita a administrar propiedades 106 00:09:31,460 --> 00:09:37,490 específicas de la fuente, puede administrar cualquier estilo aquí. Por lo tanto, cualquier estilo que desee compartir entre los 107 00:09:37,490 --> 00:09:43,940 componentes se puede administrar en una hoja de estilo global, que puede ser configuraciones de diseño generales, que pueden ser colores, que puede 108 00:09:43,940 --> 00:09:50,900 ser lo que desee, pero generalmente siempre tiene la opción de crear componentes separados como el El componente de la tarjeta, que es un contenedor 109 00:09:50,900 --> 00:09:55,790 alrededor de la vista o el texto del cuerpo o el texto del título, que también son 110 00:09:55,790 --> 00:10:01,400 solo contenedores que agregan un poco de estilo o lo administran aquí en una hoja de estilo global, depende de 111 00:10:01,400 --> 00:10:02,780 usted lo que prefiera. 112 00:10:02,780 --> 00:10:07,910 Personalmente, preferí el enfoque basado en componentes porque al final React se trata de componentes y, por 113 00:10:08,180 --> 00:10:13,280 lo tanto, creo que nos mantenemos un poco más cerca del mundo predeterminado de React al hacerlo 114 00:10:13,310 --> 00:10:20,430 así, pero tampoco es una decisión en la que siempre tienes que seguir la ruta A o ruta B, puede mezclar y combinar estos conceptos, 115 00:10:20,540 --> 00:10:25,330 tal vez a veces tenga algo donde un componente separado realmente no tiene mucho sentido, adminístrelo 116 00:10:25,350 --> 00:10:31,070 en un estilo global y, en otros casos, tal vez un componente personalizado tenga más sentido que tener una configuración 117 00:10:31,070 --> 00:10:32,180 de estilo global.