1 00:00:02,150 --> 00:00:06,950 Ahora con nuestras fuentes personalizadas agregadas, ahora podemos usarlas en nuestra aplicación y quiero 2 00:00:06,950 --> 00:00:12,740 usarlas en todos los lugares donde mostramos algunos textos, como aquí con usted seleccionado, aquí adivinan 3 00:00:13,130 --> 00:00:17,410 los oponentes y luego también en la página de resumen, ese también 4 00:00:17,410 --> 00:00:24,010 será un objetivo aquí en esta aplicación y, además, cuando termine un juego, no solo quiero usar nuestra fuente 5 00:00:24,020 --> 00:00:30,770 personalizada aquí en esta página de juego, sino que también quiero mostrar una imagen, un juego terminado imagen aquí, así 6 00:00:30,830 --> 00:00:32,460 que eso es lo 7 00:00:32,510 --> 00:00:34,830 siguiente en lo que quiero trabajar. 8 00:00:34,850 --> 00:00:42,770 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 9 00:00:42,770 --> 00:00:49,970 carpeta de componentes y allí, del texto del cuerpo y luego reemplazo todos estos componentes de texto aquí con el texto del cuerpo, 10 00:00:49,970 --> 00:00:54,200 simplemente para que cuando un juego ha terminado, usamos nuestra fuente personalizada, ese es 11 00:00:54,200 --> 00:00:55,450 el objetivo aquí. 12 00:00:55,730 --> 00:00:57,950 Pero eso es como acabo de 13 00:00:57,950 --> 00:01:03,200 decir una cosa, lo principal que debería suceder aquí es que también tenemos una imagen aquí. 14 00:01:03,260 --> 00:01:11,360 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 15 00:01:11,360 --> 00:01:12,350 texto del 16 00:01:12,530 --> 00:01:16,460 título en lugar del texto del cuerpo, pero debajo de este título, 17 00:01:16,460 --> 00:01:19,830 así que debajo del juego ha terminado, mostramos un imagen. 18 00:01:19,880 --> 00:01:27,740 Entonces, aquí, quiero usar algún componente que realmente nos permita mostrar una imagen y React Native 19 00:01:27,800 --> 00:01:36,470 tiene dicho componente, tiene un componente de imagen. Podemos usar la imagen aquí como un componente normal en nuestro código 20 00:01:36,470 --> 00:01:43,490 jsx así como así, es un componente de cierre automático, una imagen tiene un accesorio importante y ese es el accesorio 21 00:01:43,490 --> 00:01:51,170 de origen y el accesorio de origen como el nombre sugiere que debe establecerse para que apunte a una imagen y ahora hay 22 00:01:51,170 --> 00:01:58,430 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 23 00:01:58,430 --> 00:02:05,600 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. 24 00:02:05,610 --> 00:02:14,280 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 25 00:02:14,280 --> 00:02:17,000 que no en la carpeta de fuentes 26 00:02:17,370 --> 00:02:23,430 allí, sino solo en los activos o si crea una subcarpeta de imágenes si lo desea, 27 00:02:23,430 --> 00:02:24,240 realmente 28 00:02:24,270 --> 00:02:25,150 no importa, lo 29 00:02:25,170 --> 00:02:31,550 tendré aquí solo en activos Es este éxito. archivo png y este es el archivo que 30 00:02:31,560 --> 00:02:39,480 quiero usar aquí, así que la imagen que quiero renderizar aquí. Ahora para eso, para renderizar esta imagen aquí, usamos una sintaxis especial que 31 00:02:39,660 --> 00:02:46,040 puede parecer extraña la primera vez que la veas. Usó esta función de requerimiento que está integrada en Javascript 32 00:02:46,050 --> 00:02:52,440 o que es compatible con React Native en Javascript, digamos, donde pasa una cadena como argumento y esta es la cadena 33 00:02:53,010 --> 00:02:57,840 que apunta a la imagen y esta debería ser una ruta relativa, así que aquí 34 00:02:57,840 --> 00:02:59,240 desde estamos en 35 00:02:59,250 --> 00:03:04,530 la carpeta de pantallas, tenemos que subir un nivel, luego en la carpeta de activos y luego 36 00:03:04,530 --> 00:03:07,450 aquí, podemos señalar el éxito. png, 37 00:03:07,470 --> 00:03:09,090 así como así. 38 00:03:09,150 --> 00:03:14,490 Ahora, esto le dice a React Native que queremos usar esta imagen aquí y detrás de 39 00:03:14,490 --> 00:03:20,190 escena, le permite a React Native cargar esto de manera efectiva y también mirar la imagen y, 40 00:03:20,430 --> 00:03:21,340 por ejemplo, 41 00:03:21,360 --> 00:03:28,830 determinar su ancho y altura, es por eso que usamos este extraño requiere sintaxis y tenemos que cargar imágenes locales como esta. 42 00:03:30,010 --> 00:03:32,280 Ahora con eso 43 00:03:32,410 --> 00:03:39,400 para ver el resultado, ajustaré la aplicación. js temporalmente para asegurarnos de que siempre mostramos el juego en pantalla 44 00:03:39,400 --> 00:03:46,060 allí, simplemente para que no siempre tenga que pasar por toda la pantalla solo para verificar que se haya actualizado, que haya cambiado. 45 00:03:46,660 --> 00:03:53,590 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 46 00:03:53,590 --> 00:03:57,850 de rondas y el número de usuario, nuevamente, solo estoy haciendo esto para comenzar con el 47 00:03:57,880 --> 00:04:04,390 juego sobre la pantalla aquí y mira lo que esto nos da. Y podemos ver lo que esto nos 48 00:04:04,480 --> 00:04:10,730 da, nos da una imagen de pantalla completa al final, una imagen realmente grande. 49 00:04:10,780 --> 00:04:14,140 La razón de esto es que la imagen que te di 50 00:04:14,200 --> 00:04:17,590 es bastante grande, este éxito. El archivo png no es un 51 00:04:17,710 --> 00:04:22,040 archivo pequeño, es una imagen bastante grande con respecto a los píxeles, su ancho y su altura. 52 00:04:22,210 --> 00:04:29,320 Y como dije cuando usa require como este, lo bueno es que React Native echa un vistazo al archivo de imagen, determina 53 00:04:29,320 --> 00:04:34,020 su ancho y alto y usa el mismo ancho y alto aquí, lo que 54 00:04:34,020 --> 00:04:41,050 significa que representamos esta gran imagen aquí en la aplicación y la desventaja es que esto ya no cabe en la 55 00:04:41,050 --> 00:04:45,450 pantalla u ocupa toda la pantalla porque es un archivo demasiado grande. 56 00:04:45,550 --> 00:04:50,440 Si tuviéramos una imagen más pequeña, esto no sería un problema, entonces solo ocuparía una parte de 57 00:04:50,440 --> 00:04:54,160 la pantalla pero como es una imagen grande, ocupa toda la pantalla.