Ahora con nuestras fuentes personalizadas agregadas, ahora podemos usarlas en nuestra aplicación y quiero
usarlas en todos los lugares donde mostramos algunos textos, como aquí con usted seleccionado, aquí adivinan
los oponentes y luego también en la página de resumen, ese también
será un objetivo aquí en esta aplicación y, además, cuando termine un juego, no solo quiero usar nuestra fuente
personalizada aquí en esta página de juego, sino que también quiero mostrar una imagen, un juego terminado imagen aquí, así
que eso es lo
siguiente en lo que quiero trabajar.
El primer paso es reemplazar este texto aquí con el texto del cuerpo para usar la fuente, así que importo el texto del cuerpo de la
carpeta de componentes y allí, del texto del cuerpo y luego reemplazo todos estos componentes de texto aquí con el texto del cuerpo,
simplemente para que cuando un juego ha terminado, usamos nuestra fuente personalizada, ese es
el objetivo aquí.
Pero eso es como acabo de
decir una cosa, lo principal que debería suceder aquí es que también tenemos una imagen aquí.
Entonces, digamos que tenemos el título del juego en realidad, así que usemos el texto del título aquí tal vez ahora que lo pienso, el
texto del
título en lugar del texto del cuerpo, pero debajo de este título,
así que debajo del juego ha terminado, mostramos un imagen.
Entonces, aquí, quiero usar algún componente que realmente nos permita mostrar una imagen y React Native
tiene dicho componente, tiene un componente de imagen. Podemos usar la imagen aquí como un componente normal en nuestro código
jsx así como así, es un componente de cierre automático, una imagen tiene un accesorio importante y ese es el accesorio
de origen y el accesorio de origen como el nombre sugiere que debe establecerse para que apunte a una imagen y ahora hay
dos tipos de imágenes que puede usar: imágenes locales que envía como parte de su aplicación, por lo que incluye en su
código fuente, en el paquete de su aplicación al final o en las imágenes de red y tendremos un mira a ambos.
Ahora comencemos con una imagen local y para eso, adjunto encontrará estos éxitos. archivo png que puede arrastrar a su carpeta de activos, por lo
que no en la carpeta de fuentes
allí, sino solo en los activos o si crea una subcarpeta de imágenes si lo desea,
realmente
no importa, lo
tendré aquí solo en activos Es este éxito. archivo png y este es el archivo que
quiero usar aquí, así que la imagen que quiero renderizar aquí. Ahora para eso, para renderizar esta imagen aquí, usamos una sintaxis especial que
puede parecer extraña la primera vez que la veas. Usó esta función de requerimiento que está integrada en Javascript
o que es compatible con React Native en Javascript, digamos, donde pasa una cadena como argumento y esta es la cadena
que apunta a la imagen y esta debería ser una ruta relativa, así que aquí
desde estamos en
la carpeta de pantallas, tenemos que subir un nivel, luego en la carpeta de activos y luego
aquí, podemos señalar el éxito. png,
así como así.
Ahora, esto le dice a React Native que queremos usar esta imagen aquí y detrás de
escena, le permite a React Native cargar esto de manera efectiva y también mirar la imagen y,
por ejemplo,
determinar su ancho y altura, es por eso que usamos este extraño requiere sintaxis y tenemos que cargar imágenes locales como esta.
Ahora con eso
para ver el resultado, ajustaré la aplicación. js temporalmente para asegurarnos de que siempre mostramos el juego en pantalla
allí, simplemente para que no siempre tenga que pasar por toda la pantalla solo para verificar que se haya actualizado, que haya cambiado.
Entonces, el juego en pantalla es lo que usaré temporalmente como mi contenido principal aquí desde el principio y simplemente pasaré algunos números ficticios para el número
de rondas y el número de usuario, nuevamente, solo estoy haciendo esto para comenzar con el
juego sobre la pantalla aquí y mira lo que esto nos da. Y podemos ver lo que esto nos
da, nos da una imagen de pantalla completa al final, una imagen realmente grande.
La razón de esto es que la imagen que te di
es bastante grande, este éxito. El archivo png no es un
archivo pequeño, es una imagen bastante grande con respecto a los píxeles, su ancho y su altura.
Y como dije cuando usa require como este, lo bueno es que React Native echa un vistazo al archivo de imagen, determina
su ancho y alto y usa el mismo ancho y alto aquí, lo que
significa que representamos esta gran imagen aquí en la aplicación y la desventaja es que esto ya no cabe en la
pantalla u ocupa toda la pantalla porque es un archivo demasiado grande.
Si tuviéramos una imagen más pequeña, esto no sería un problema, entonces solo ocuparía una parte de
la pantalla pero como es una imagen grande, ocupa toda la pantalla.