Entonces, con esa imagen agregada y ahora que ya estamos trabajando en el juego en la pantalla
aquí, ajustemos este texto que vemos aquí
en la parte inferior, hagámoslo un poco más agradable, un poco más hermoso
y además antes Hago eso, en realidad volveré de usar la imagen de red a la imagen
local, pero eso depende de ti, lo que prefieras allí.
Entonces, quiero trabajar en el texto aquí y, en lugar de tener este tipo de texto tabular
aquí, que solo genera información de forma aburrida, ¿por
qué no presentamos esto en una mejor espera? En detalle, creo que sería mejor
si tuviéramos un texto legible por humanos aquí, así que una oración real que podamos leer.
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
que aquí ingresaría el número.
Por lo tanto, el número es, por supuesto, el número de usuario de accesorios y, de nuevo, puede
deshacerse de esta línea ahora, pero no solo quiero generar un número de usuario de accesorios como este, sino que quiero
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
valor de las rondas de accesorios sería bueno si eso también tuviera un color diferente. Ahora para colorear eso de manera diferente,
podemos envolver esto en otro nodo de texto aquí. Entonces puede tener nodos de texto, componentes de texto
dentro del texto, dentro de otros componentes de texto, de
modo que sea posible, así como así.
Ahora que es realmente importante de
entender, puede anidar componentes de texto en otros componentes de texto y tener en cuenta que el texto del cuerpo al final es
solo un componente de texto, el texto del cuerpo es un componente que simplemente devuelve el componente
de texto incorporado, por lo que cualquier cosa ingresar entre el texto del cuerpo es lo mismo que si lo
ingresáramos entre los componentes de texto incorporados y, por lo tanto, podemos tener texto anidado allí y, en teoría, también podemos
tener vistas anidadas allí, pero hay algunas advertencias al respecto y, por lo tanto, si usted no
tiene una razón sólida de por qué necesitaría una vista allí, realmente no debería anidar vistas en el
texto y rara vez hay una razón para hacerlo. Sin embargo, el texto dentro del texto puede tener
mucho sentido porque le permite diseñar partes de un texto de manera diferente al resto del texto.
Entonces, por ejemplo, quiero agregar estilo con estilos. resaltar y lo mismo aquí para el segundo texto para
resaltar esta parte del texto y ahora, por supuesto, podemos agregar resaltar allí abajo en nuestra hoja de
estilo en el juego sobre la pantalla, resaltar y allí, por ejemplo, darle un color donde usamos colores y para eso, necesitamos
agregar la importación donde importamos colores de constantes / Colores y luego tal vez usar nuestro color
primario allí, así que Colores. primario. Si hacemos eso, lo que verá es que ahora, esto está resaltado.
Ahora también algo interesante, si voy temporalmente al texto del cuerpo y lo cambio para abrir
sin negrita
aquí, así que utilizo la versión en negrita, verán que incluso ese texto resaltado sigue en negrita, puede
ser un poco difícil de ver pero esto es realmente audaz y es muy interesante porque anteriormente en
el curso, mencioné que sus estilos no heredarían, por lo que si, por ejemplo, en el juego en pantalla, establezca
una familia de fuentes aquí en su estilo de pantalla que se aplica a la vista que envuelve todo, esa familia de fuentes no
se pasaría a componentes anidados dentro de esa vista.
Entonces, el hecho de que establezca un estilo aquí en esta vista no significa que todas las demás vistas allí o todos los
demás textos allí, sea lo que sea, obtengan los mismos estilos. Los estilos que aplica a un componente
siempre se aplican a ese componente y no a componentes anidados y, sin embargo, es diferente para el texto.
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
del cuerpo
y esa es simplemente una diferencia importante que tiene React Native. Para los componentes de texto, si agrega
estilo
allí, el estilo se pasa a componentes de texto anidados, esa es
una excepción que tiene React Native. El texto dentro del texto recibe el estilo
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í.
Hay un comportamiento importante adicional con respecto al componente de texto en React Native y es que
no está usando flexbox. La vista usa flexbox,
el componente de texto, por supuesto, no, y mencioné esto antes, que el componente
de vista usa flexbox, no texto u otros componentes, sino que el texto usa su propio sistema de posicionamiento donde se ajusta automáticamente
a una nueva línea si no lo hace. No cabe en una línea y para demostrar
esto, podríamos ir aquí al juego sobre la pantalla y envolver todo el texto aquí en la parte inferior en otra vista,
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
quieras nombrar a este o el contenedor de resultados para estar más en línea con los otros nombres de estilo.
Por lo tanto, el contenedor de resultados
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
80%, lo que tiene sentido para que el texto tenga un poco más de
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
derecha alrededor del contenedor, luego verá que el texto está envuelto en una nueva línea y ese es también un comportamiento
predeterminado del componente de texto en React Native.
No solo analiza los estilos en texto anidado, sino que también tiene su propio sistema de posicionamiento o su propio sistema
de diseño donde el texto se ajusta automáticamente a una nueva línea si no encaja
y la misma línea y eso, por supuesto, hace mucho De hecho, normalmente es lo que quieres
en tu texto, quieres que se ajuste a nuevas líneas. Ahora con eso, revertiré esta configuración en el texto del
cuerpo, en
realidad no usaré open-sans-bold allí, solo
uso open sans pero quería mostrar este estilo de herencia y, por supuesto, en general, dejar que
Sepa cómo se comporta el texto con respecto a su diseño.
Dicho todo esto sobre el texto, no hemos
terminado, no creo que se vea tan
bien, en cambio en el juego sobre la pantalla, este texto resaltado quizás debería estar en negrita, así que
usaré una familia de fuentes abiertas -sans-bold aquí para que esto realmente se destaque y sea más
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
derecha alrededor del texto.
Ahora, además, también quiero asegurarme de que el texto esté centrado, de modo que si tenemos un salto
de línea, todo esté centrado en el medio y no comencemos de nuevo en el borde izquierdo y esto se puede
lograr con una propiedad de
estilo especial que puede agregar en componentes de texto
y esa es la propiedad de alineación de texto.
Lo único es que no quiero usar esto en el texto resaltado, quiero usar eso
en el texto general del cuerpo y, por lo tanto, necesitamos agregar un estilo aquí, tal vez el texto resultante sea
un nombre apropiado aquí ya que este es nuestro texto en general
y luego aquí podemos agregar texto de
resultado y,
en ese texto de resultado, establecer la alineación del texto en el centro.
Sin embargo, si guardo esto, no tiene ningún efecto porque nuestro texto del cuerpo no está configurado para tomar en cuenta el
estilo, el accesorio de estilo que podríamos agregar. En el texto del cuerpo, el único estilo que se establece en
el texto es el estilo definido internamente.
Sin embargo, ahora aprendimos cómo cambiar esto, simplemente pasamos un objeto aquí al
estilo, tomamos todas nuestras propiedades de estilo personalizadas de este archivo y las distribuimos en este objeto y las combinamos con lo
que sea que tengamos en el estilo de utilería mediante el operador de
propagación aquí también. Y con eso,
ahora si guardamos esto, vemos que ahora está bien centrado y esto es ciertamente un poco más agradable de leer
de lo que era antes de decir.
Ahora con eso, casi hemos terminado con el diseño de este texto, lo último que creo que se ve bien aquí es
que si en el texto resultante, también aumentamos un poco el tamaño de la fuente.
Entonces, si establecemos el tamaño de fuente aquí en 20 quizás, muy grande y en el contenedor de
resultados, también quiero tener un margen vertical de 15 quizás, para tener algo de espacio en la parte superior e inferior alrededor
del texto también.
Y ahora con eso, tenemos un juego sobre pantalla que, en mi opinión, no se ve tan mal
y aprendiste mucho sobre cómo funciona el texto, así que cómo puedes trabajar con el componente de texto en React Native.