Ahora también quiero usar esta familia de fuentes para el título del encabezado.
Entonces, aquí en mi componente de encabezado, en
el título del encabezado, también quiero establecer una familia de fuentes en open-sans-bold para que también la usemos allí
y para todos los demás textos en esta aplicación, realmente quiero usar mi abierto sin fuente
Entonces, por ejemplo, en los juegos de inicio en verde aquí, tenemos nuestro texto, seleccionamos un número y para usar la
fuente sans abierta normal, por supuesto, podemos asignar un estilo allí y luego usar texto de estilos por ejemplo y agregar este estilo de
texto aquí en el abajo y luego use la familia de fuentes, open-sans. Ahora eso funciona pero, por supuesto, tiene
un inconveniente.
La desventaja es que ahora debe agregar manualmente esta familia de fuentes a cualquier texto en su aplicación
donde desee usarla y debe agregarla directamente en los componentes de texto, no puede agregarla
a una vista y, por ejemplo, configurar esto en la pantalla aquí y confía en que se transmite a textos
anidados, desafortunadamente esto no funciona.
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á
que esto claramente no está en negrita, seleccione un número que no esté en negrita.
Entonces, transmitirlo de esta manera, como funciona en CSS, no funciona porque eso no es CSS,
es Javascript y lo que aplica en un objeto solo se aplica en el elemento, en el componente donde
se adjunta este objeto de estilo.
Por lo tanto, tendríamos que diseñar este texto individualmente, pero nuevamente, recrear ese estilo una y otra vez en
todos los diferentes lugares podría no ser lo que desea hacer al final.
Hay dos soluciones o la solución siempre suena un poco sucia,
dos formas de manejar esto de una manera más elegante.
Una es que cree un componente separado, tal vez un componente de texto del cuerpo o simplemente un
componente de texto, lo
que quiera nombrarlo y lo llamaré BodyText. js y será un componente muy
simple, solo importo React de React e importo el texto y la hoja de estilo de React Native aquí y
luego el componente de texto del cuerpo aquí recibe accesorios y simplemente devuelve mi componente de texto aquí donde saco accesorios niños entre
el etiquetas de
texto para que podamos pasar contenido al texto del cuerpo pasándolo entre la etiqueta de texto
del cuerpo de apertura y cierre cuando usamos este componente.
Entonces aquí tengo mis estilos y allá, uso la hoja de estilos. creo y, por supuesto, exporto este
componente de esta manera y ahora aquí en esta hoja de estilo, simplemente
configuro un estilo que aplico aquí a este texto, estilo de cuerpo o lo que quieras nombrar, tengo
el
estilo de cuerpo aquí y el único estilo que
yo set es una familia de fuentes open sans y usaré negrita por ahora para que podamos ver que
esto realmente tiene
un efecto antes de cambiarlo a un poco más difícil de ver, abrir sans, tan open-sans-bold y
ahora esto es un componente muy simple, solo una envoltura delgada alrededor del texto normal pero una envoltura
delgada que siempre establece esta familia de
fuentes y esto significa que siempre que queramos tener texto que use esta familia, quizás
en todos los lugares de la aplicación, en lugar de usar el componente de texto normal de React Native, solo usamos el
componente de texto del cuerpo que acabo de crear. Así que puedo importar el texto del cuerpo
de los componentes BodyText, importando ese componente y ahora simplemente puedo reemplazar el componente de texto aquí con el texto del cuerpo y
si hacemos eso y guardamos esto, por supuesto, vemos que ahora esto estará en negrita,
bueno si yo lo hubiera usado en el texto correcto, este es, por supuesto, el texto
seleccionado por el usuario, también está bien, pero quiero ir aquí para seleccionar el número.
Entonces, si lo uso allí, el texto del cuerpo, envuelva este texto, verá que ahora está en negrita y ahora también podemos
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
se verá que es una fuente diferente.
Entonces, esta es la opción uno de pasar el estilo de texto o una familia de fuentes, simplemente crea tu propio
componente de texto que siempre tiene esta familia de fuentes y si tienes varias familias
de fuentes diferentes, como un título y un título, creas componentes separados.
Por ejemplo, aquí tenemos un título, bueno, tal vez también queremos usarlo en otras partes de la aplicación. Entonces podemos
agregar un TitleText. js, que es básicamente lo que tenemos en el texto
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
y aquí, es el texto del título y allí, usamos
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,
cambiemos el nombre a título tal vez, tiene más sentido para el estilo, pero ahora nuevamente, tenemos un envoltorio muy
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
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,
deshacerse de este estilo asignación aquí, así y haz lo mismo en la
pantalla de inicio del juego. Allí, este texto ahora puede
ser texto de título, todo lo que necesito
hacer es importarlo. Así que permítanme importar el
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
con la tarjeta, por ejemplo, si desea que esto todavía sea personalizable para que podamos configurar más el título o
anular el tamaño de fuente o agregar un margen como lo estamos haciendo aquí, bueno, entonces lo
que siempre puedes hacer es agregar estilo aquí al texto del título, referir al estilo de título, así que al
estilo de título que tengo configurado allí en la pantalla de inicio del juego y dentro del componente de texto
del título, solo necesita asegurarse de fusionar estos estilos entrantes con los estilos que está
configurando allí.
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
con todos los valores configurados en el estilo de accesorios y ahora tiene una capa de
texto ajustable que establece estos estilos predeterminados pero que puede anularse y ajustarse a sus requisitos y, por
lo tanto, tenemos el
mismo aspecto que antes pero ahora con más facilidad de uso.
Ahora, de nuevo, esa es la opción número uno.
La alternativa a eso sería que, por ejemplo, en la carpeta de constantes, tenga sus estilos predeterminados. js o lo que quiera nombrar
y allí, exporta
una hoja de estilo predeterminada y necesita importar esto, por lo tanto, importe la hoja
de estilo de React Native.
Exporta su hoja de estilo predeterminada. crea un objeto y allí configuras como el texto de tu cuerpo, por ejemplo, cualquier nombre que desees
y aquí
configuras una familia de fuentes, abres sans y tal vez solo temporalmente para que podamos ver si esto
funciona, dale un color rojo.
Ahora puedes importar esto en diferentes
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
texto predeterminado, por ejemplo, aquí en adivinanzas, bueno,
entonces todo lo que
hacemos es establecer el estilo aquí, alcanzar los estilos predeterminados y señalar el texto
del cuerpo y verás si comenzamos un juego ahora, este
texto será rojo.
Entonces, si comenzamos este juego, los oponentes suponen que es rojo.
Entonces, esta sería una alternativa a tener componentes separados, que simplemente tiene una hoja de estilo administrada globalmente que
importa en diferentes archivos y ahora realmente no necesito un
texto de cuerpo que sea rojo, pero lo que sí quiero es un título y allí , Quiero tener
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
la estoy recreando aquí para mostrar ambas
alternativas porque ahora con con el título configurado de esta manera en la hoja de estilo predeterminada, ahora
podemos ir a la pantalla del juego y escuchar no usar el texto del cuerpo, sino usar el título
en la suposición del oponente y el resultado de esto es que si ahora reiniciamos este juego, Ten ese bonito
título aquí.
Entonces, esa es una alternativa válida y depende de usted cuál prefiera, componentes separados que reutilice
en lugar del componente de texto o el componente de texto con un estilo administrado globalmente y, como nota
al margen, en ese estilo administrado globalmente, usted es de Por supuesto, no se limita a administrar propiedades
específicas de la fuente, puede administrar cualquier estilo aquí. Por lo tanto, cualquier estilo que desee compartir entre los
componentes se puede administrar en una hoja de estilo global, que puede ser configuraciones de diseño generales, que pueden ser colores, que puede
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
alrededor de la vista o el texto del cuerpo o el texto del título, que también son
solo contenedores que agregan un poco de estilo o lo administran aquí en una hoja de estilo global, depende de
usted lo que prefiera.
Personalmente, preferí el enfoque basado en componentes porque al final React se trata de componentes y, por
lo tanto, creo que nos mantenemos un poco más cerca del mundo predeterminado de React al hacerlo
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,
tal vez a veces tenga algo donde un componente separado realmente no tiene mucho sentido, adminístrelo
en un estilo global y, en otros casos, tal vez un componente personalizado tenga más sentido que tener una configuración
de estilo global.