1 00:00:02,320 --> 00:00:08,220 Entonces, con esa imagen agregada y ahora que ya estamos trabajando en el juego en la pantalla 2 00:00:08,230 --> 00:00:11,280 aquí, ajustemos este texto que vemos aquí 3 00:00:11,280 --> 00:00:15,640 en la parte inferior, hagámoslo un poco más agradable, un poco más hermoso 4 00:00:15,760 --> 00:00:21,400 y además antes Hago eso, en realidad volveré de usar la imagen de red a la imagen 5 00:00:21,400 --> 00:00:24,850 local, pero eso depende de ti, lo que prefieras allí. 6 00:00:24,850 --> 00:00:29,890 Entonces, quiero trabajar en el texto aquí y, en lugar de tener este tipo de texto tabular 7 00:00:29,930 --> 00:00:32,560 aquí, que solo genera información de forma aburrida, ¿por 8 00:00:32,560 --> 00:00:37,460 qué no presentamos esto en una mejor espera? En detalle, creo que sería mejor 9 00:00:37,600 --> 00:00:43,030 si tuviéramos un texto legible por humanos aquí, así que una oración real que podamos leer. 10 00:00:43,400 --> 00:00:52,720 Entonces, podríamos decir que necesita su teléfono, y luego aquí tenemos el número de rondas, rondas para adivinar el número y 11 00:00:52,800 --> 00:00:55,140 que aquí ingresaría el número. 12 00:00:55,240 --> 00:00:59,810 Por lo tanto, el número es, por supuesto, el número de usuario de accesorios y, de nuevo, puede 13 00:00:59,950 --> 00:01:05,260 deshacerse de esta línea ahora, pero no solo quiero generar un número de usuario de accesorios como este, sino que quiero 14 00:01:05,260 --> 00:01:11,680 resaltarlo, quiero darle un color especial eso es diferente del otro color aquí y lo mismo aquí para las rondas, por lo que el número de 15 00:01:11,690 --> 00:01:19,480 valor de las rondas de accesorios sería bueno si eso también tuviera un color diferente. Ahora para colorear eso de manera diferente, 16 00:01:19,480 --> 00:01:28,150 podemos envolver esto en otro nodo de texto aquí. Entonces puede tener nodos de texto, componentes de texto 17 00:01:28,150 --> 00:01:32,920 dentro del texto, dentro de otros componentes de texto, de 18 00:01:32,920 --> 00:01:36,820 modo que sea posible, así como así. 19 00:01:36,820 --> 00:01:38,970 Ahora que es realmente importante de 20 00:01:38,970 --> 00:01:45,790 entender, puede anidar componentes de texto en otros componentes de texto y tener en cuenta que el texto del cuerpo al final es 21 00:01:45,790 --> 00:01:51,080 solo un componente de texto, el texto del cuerpo es un componente que simplemente devuelve el componente 22 00:01:51,160 --> 00:01:57,100 de texto incorporado, por lo que cualquier cosa ingresar entre el texto del cuerpo es lo mismo que si lo 23 00:01:57,100 --> 00:02:03,430 ingresáramos entre los componentes de texto incorporados y, por lo tanto, podemos tener texto anidado allí y, en teoría, también podemos 24 00:02:03,430 --> 00:02:08,800 tener vistas anidadas allí, pero hay algunas advertencias al respecto y, por lo tanto, si usted no 25 00:02:08,800 --> 00:02:14,370 tiene una razón sólida de por qué necesitaría una vista allí, realmente no debería anidar vistas en el 26 00:02:14,370 --> 00:02:20,020 texto y rara vez hay una razón para hacerlo. Sin embargo, el texto dentro del texto puede tener 27 00:02:20,020 --> 00:02:25,310 mucho sentido porque le permite diseñar partes de un texto de manera diferente al resto del texto. 28 00:02:25,360 --> 00:02:32,970 Entonces, por ejemplo, quiero agregar estilo con estilos. resaltar y lo mismo aquí para el segundo texto para 29 00:02:33,210 --> 00:02:40,170 resaltar esta parte del texto y ahora, por supuesto, podemos agregar resaltar allí abajo en nuestra hoja de 30 00:02:40,170 --> 00:02:48,510 estilo en el juego sobre la pantalla, resaltar y allí, por ejemplo, darle un color donde usamos colores y para eso, necesitamos 31 00:02:48,530 --> 00:02:55,010 agregar la importación donde importamos colores de constantes / Colores y luego tal vez usar nuestro color 32 00:02:55,010 --> 00:03:02,420 primario allí, así que Colores. primario. Si hacemos eso, lo que verá es que ahora, esto está resaltado. 33 00:03:03,440 --> 00:03:09,350 Ahora también algo interesante, si voy temporalmente al texto del cuerpo y lo cambio para abrir 34 00:03:09,350 --> 00:03:10,210 sin negrita 35 00:03:10,490 --> 00:03:17,150 aquí, así que utilizo la versión en negrita, verán que incluso ese texto resaltado sigue en negrita, puede 36 00:03:17,150 --> 00:03:23,570 ser un poco difícil de ver pero esto es realmente audaz y es muy interesante porque anteriormente en 37 00:03:23,870 --> 00:03:30,860 el curso, mencioné que sus estilos no heredarían, por lo que si, por ejemplo, en el juego en pantalla, establezca 38 00:03:30,860 --> 00:03:39,170 una familia de fuentes aquí en su estilo de pantalla que se aplica a la vista que envuelve todo, esa familia de fuentes no 39 00:03:39,470 --> 00:03:42,970 se pasaría a componentes anidados dentro de esa vista. 40 00:03:42,980 --> 00:03:48,490 Entonces, el hecho de que establezca un estilo aquí en esta vista no significa que todas las demás vistas allí o todos los 41 00:03:48,490 --> 00:03:54,080 demás textos allí, sea lo que sea, obtengan los mismos estilos. Los estilos que aplica a un componente 42 00:03:54,080 --> 00:04:00,780 siempre se aplican a ese componente y no a componentes anidados y, sin embargo, es diferente para el texto. 43 00:04:00,780 --> 00:04:09,050 Allí, este texto aquí, el texto resaltado que está anidado dentro del texto del cuerpo también obtiene esta familia en negrita si lo cambiamos en el texto 44 00:04:09,260 --> 00:04:10,160 del cuerpo 45 00:04:10,250 --> 00:04:16,550 y esa es simplemente una diferencia importante que tiene React Native. Para los componentes de texto, si agrega 46 00:04:16,580 --> 00:04:17,720 estilo 47 00:04:17,720 --> 00:04:23,900 allí, el estilo se pasa a componentes de texto anidados, esa es 48 00:04:23,900 --> 00:04:29,750 una excepción que tiene React Native. El texto dentro del texto recibe el estilo 49 00:04:29,750 --> 00:04:37,610 definido en el texto exterior, por lo que los estilos de texto anidados reciben automáticamente cualquier estilo que configure en el texto del cuerpo aquí. 50 00:04:37,680 --> 00:04:43,800 Hay un comportamiento importante adicional con respecto al componente de texto en React Native y es que 51 00:04:43,800 --> 00:04:47,370 no está usando flexbox. La vista usa flexbox, 52 00:04:47,370 --> 00:04:52,110 el componente de texto, por supuesto, no, y mencioné esto antes, que el componente 53 00:04:52,320 --> 00:05:00,180 de vista usa flexbox, no texto u otros componentes, sino que el texto usa su propio sistema de posicionamiento donde se ajusta automáticamente 54 00:05:00,210 --> 00:05:05,580 a una nueva línea si no lo hace. No cabe en una línea y para demostrar 55 00:05:05,580 --> 00:05:12,810 esto, podríamos ir aquí al juego sobre la pantalla y envolver todo el texto aquí en la parte inferior en otra vista, 56 00:05:12,810 --> 00:05:21,180 así que tome el texto del cuerpo y agréguelo aquí en esta vista y allí, agregue un estilo digamos, llámalo texto de resultado, lo que 57 00:05:21,210 --> 00:05:28,080 quieras nombrar a este o el contenedor de resultados para estar más en línea con los otros nombres de estilo. 58 00:05:28,170 --> 00:05:30,410 Por lo tanto, el contenedor de resultados 59 00:05:30,570 --> 00:05:38,300 se agrega a la vista y ahora si agrego esto aquí, en cualquier lugar aquí en mi hoja de estilo y le doy un ancho de digamos 60 00:05:38,550 --> 00:05:42,420 80%, lo que tiene sentido para que el texto tenga un poco más de 61 00:05:42,480 --> 00:05:49,980 distancia hacia la izquierda y la derecha o alternativamente, agrego un margen horizontal de digamos 20 para tener un espacio a la izquierda y a la 62 00:05:49,980 --> 00:05:55,980 derecha alrededor del contenedor, luego verá que el texto está envuelto en una nueva línea y ese es también un comportamiento 63 00:05:55,980 --> 00:05:58,410 predeterminado del componente de texto en React Native. 64 00:05:58,410 --> 00:06:05,700 No solo analiza los estilos en texto anidado, sino que también tiene su propio sistema de posicionamiento o su propio sistema 65 00:06:05,700 --> 00:06:10,950 de diseño donde el texto se ajusta automáticamente a una nueva línea si no encaja 66 00:06:11,040 --> 00:06:16,830 y la misma línea y eso, por supuesto, hace mucho De hecho, normalmente es lo que quieres 67 00:06:17,070 --> 00:06:24,920 en tu texto, quieres que se ajuste a nuevas líneas. Ahora con eso, revertiré esta configuración en el texto del 68 00:06:24,920 --> 00:06:25,880 cuerpo, en 69 00:06:25,880 --> 00:06:28,190 realidad no usaré open-sans-bold allí, solo 70 00:06:28,310 --> 00:06:34,530 uso open sans pero quería mostrar este estilo de herencia y, por supuesto, en general, dejar que 71 00:06:34,580 --> 00:06:38,960 Sepa cómo se comporta el texto con respecto a su diseño. 72 00:06:38,960 --> 00:06:41,450 Dicho todo esto sobre el texto, no hemos 73 00:06:41,480 --> 00:06:43,730 terminado, no creo que se vea tan 74 00:06:43,760 --> 00:06:49,860 bien, en cambio en el juego sobre la pantalla, este texto resaltado quizás debería estar en negrita, así que 75 00:06:50,100 --> 00:06:55,400 usaré una familia de fuentes abiertas -sans-bold aquí para que esto realmente se destaque y sea más 76 00:06:55,670 --> 00:07:02,930 fácil de ver y, además, también agregaré un margen horizontal de 30 aquí para tener un poco más de espacio de izquierda a 77 00:07:02,930 --> 00:07:04,640 derecha alrededor del texto. 78 00:07:04,640 --> 00:07:10,490 Ahora, además, también quiero asegurarme de que el texto esté centrado, de modo que si tenemos un salto 79 00:07:10,490 --> 00:07:17,090 de línea, todo esté centrado en el medio y no comencemos de nuevo en el borde izquierdo y esto se puede 80 00:07:17,090 --> 00:07:19,010 lograr con una propiedad de 81 00:07:19,010 --> 00:07:21,760 estilo especial que puede agregar en componentes de texto 82 00:07:21,790 --> 00:07:24,770 y esa es la propiedad de alineación de texto. 83 00:07:25,070 --> 00:07:29,210 Lo único es que no quiero usar esto en el texto resaltado, quiero usar eso 84 00:07:29,210 --> 00:07:34,990 en el texto general del cuerpo y, por lo tanto, necesitamos agregar un estilo aquí, tal vez el texto resultante sea 85 00:07:35,000 --> 00:07:38,460 un nombre apropiado aquí ya que este es nuestro texto en general 86 00:07:38,660 --> 00:07:40,760 y luego aquí podemos agregar texto de 87 00:07:44,450 --> 00:07:45,400 resultado y, 88 00:07:45,410 --> 00:07:49,150 en ese texto de resultado, establecer la alineación del texto en el centro. 89 00:07:49,220 --> 00:07:56,570 Sin embargo, si guardo esto, no tiene ningún efecto porque nuestro texto del cuerpo no está configurado para tomar en cuenta el 90 00:07:56,630 --> 00:08:02,660 estilo, el accesorio de estilo que podríamos agregar. En el texto del cuerpo, el único estilo que se establece en 91 00:08:02,660 --> 00:08:04,660 el texto es el estilo definido internamente. 92 00:08:04,670 --> 00:08:09,080 Sin embargo, ahora aprendimos cómo cambiar esto, simplemente pasamos un objeto aquí al 93 00:08:09,080 --> 00:08:16,170 estilo, tomamos todas nuestras propiedades de estilo personalizadas de este archivo y las distribuimos en este objeto y las combinamos con lo 94 00:08:16,170 --> 00:08:20,670 que sea que tengamos en el estilo de utilería mediante el operador de 95 00:08:20,670 --> 00:08:22,930 propagación aquí también. Y con eso, 96 00:08:22,940 --> 00:08:28,370 ahora si guardamos esto, vemos que ahora está bien centrado y esto es ciertamente un poco más agradable de leer 97 00:08:28,550 --> 00:08:30,490 de lo que era antes de decir. 98 00:08:30,680 --> 00:08:37,070 Ahora con eso, casi hemos terminado con el diseño de este texto, lo último que creo que se ve bien aquí es 99 00:08:37,070 --> 00:08:41,490 que si en el texto resultante, también aumentamos un poco el tamaño de la fuente. 100 00:08:41,570 --> 00:08:47,990 Entonces, si establecemos el tamaño de fuente aquí en 20 quizás, muy grande y en el contenedor de 101 00:08:47,990 --> 00:08:55,700 resultados, también quiero tener un margen vertical de 15 quizás, para tener algo de espacio en la parte superior e inferior alrededor 102 00:08:55,700 --> 00:08:57,180 del texto también. 103 00:08:57,320 --> 00:09:02,240 Y ahora con eso, tenemos un juego sobre pantalla que, en mi opinión, no se ve tan mal 104 00:09:02,240 --> 00:09:07,520 y aprendiste mucho sobre cómo funciona el texto, así que cómo puedes trabajar con el componente de texto en React Native.