1 00:00:02,290 --> 00:00:09,430 Entonces, ahora que la lógica general del juego funciona, concentrémonos más en terminar ese estilo y también en agregar 2 00:00:09,700 --> 00:00:16,180 nuestras propias fuentes personalizadas y una pequeña imagen agradable en el juego sobre la pantalla porque 3 00:00:16,180 --> 00:00:23,530 trabajar con imágenes y trabajar con fuentes personalizadas es algo típico en la actualidad. desarrollo de la aplicación, por supuesto, 4 00:00:23,530 --> 00:00:30,520 rara vez desea atenerse a las fuentes predeterminadas del sistema y rara vez tiene una aplicación sin imágenes. 5 00:00:30,520 --> 00:00:37,390 Entonces, comencemos con las fuentes personalizadas y en una exposición React Native, agregar fuentes es super trivial. 6 00:00:38,200 --> 00:00:40,820 En la carpeta de su proyecto, en 7 00:00:40,870 --> 00:00:47,000 la carpeta de activos, creemos una carpeta de fuentes. Sin embargo, puede almacenarlo en cualquier lugar, pero 8 00:00:47,050 --> 00:00:52,560 me gusta mantenerlo en la carpeta de activos para mantener mis activos como fuentes e imágenes organizadas. 9 00:00:53,080 --> 00:00:58,270 Entonces, aquí en la carpeta de fuentes, como era de esperar, quiero administrar mis fuentes y 10 00:00:58,270 --> 00:01:03,460 para eso, adjunto encontrará un archivo zip con dos fuentes que puede extraer y luego arrastrar 11 00:01:03,560 --> 00:01:06,730 y soltar aquí, eso es OpenSans-Bold y OpenSans-Regular, así que 12 00:01:06,730 --> 00:01:12,790 Estas dos fuentes se adjuntan a este video en un archivo zip, se extraen y se arrastran a la 13 00:01:12,790 --> 00:01:14,100 carpeta de fuentes. 14 00:01:14,110 --> 00:01:22,390 Ahora con eso, estas fuentes están generalmente disponibles, pero para usarlas, aún necesita configurar más. 15 00:01:22,460 --> 00:01:29,780 Necesitas ir a tu aplicación. js y básicamente le indica a React Native y expo que 16 00:01:29,810 --> 00:01:37,920 carguen estas fuentes, para usarlas. Para eso en la aplicación. js y estoy usando la aplicación. js porque ese es el 17 00:01:38,010 --> 00:01:43,560 primer archivo que se carga o se ejecuta, por ejemplo, cuando se inicia la 18 00:01:43,590 --> 00:01:51,060 aplicación y desea cargar sus fuentes cuando se inicia la aplicación, allí, debe agregar una importación y esa importación es 19 00:01:51,060 --> 00:01:58,630 que importa todo como fuente, aunque ese nombre aquí depende de usted, pero generalmente, usa la fuente aquí, de expo-font. 20 00:01:59,140 --> 00:02:07,380 Entonces expo-font es un paquete que le brinda utilidades de fuente, de modo que las utilidades que le permiten cargar fuentes e importar 21 00:02:07,800 --> 00:02:13,140 todo desde ese paquete y agruparlo en este objeto de fuente, eso es lo que 22 00:02:13,140 --> 00:02:15,800 estamos haciendo aquí. Ahora para 23 00:02:15,950 --> 00:02:21,920 cargar fuentes, agregaré una nueva función fuera del componente funcional porque esta función 24 00:02:21,920 --> 00:02:26,580 no necesita ser recreada para cada ciclo de reproducción de componentes. 25 00:02:26,610 --> 00:02:27,860 Ahora lo llamaré buscar 26 00:02:27,870 --> 00:02:29,060 fuentes, el 27 00:02:29,330 --> 00:02:31,190 nombre depende de usted y 28 00:02:34,010 --> 00:02:38,640 en esta función aquí, llamaré fuente. loadAsync. 29 00:02:38,710 --> 00:02:43,810 Ahora, esta es una función que o un método en el paquete de fuentes que estamos importando 30 00:02:43,810 --> 00:02:52,050 aquí que le permite cargar fuentes y lo que pasa para cargar asíncrono es un objeto donde le dice a Expo y, por lo tanto, React Native 31 00:02:52,120 --> 00:02:57,010 sobre todas las fuentes que desea carga. Para ello, use una tecla donde elija 32 00:02:57,310 --> 00:03:02,710 cualquier nombre de su elección, como open-sans y luego podrá usar estas fuentes con estos nombres, así 33 00:03:02,710 --> 00:03:06,400 que aquí open sans porque mi fuente se llama open sans. 34 00:03:06,400 --> 00:03:10,510 Entonces, aquí está abierto y luego agrega require, esa es 35 00:03:10,840 --> 00:03:17,180 una característica del lenguaje que ofrece Javascript donde señala la ruta donde se almacena esta fuente. 36 00:03:17,200 --> 00:03:18,310 Esa es una 37 00:03:18,340 --> 00:03:20,820 ruta relativa, así que aquí apunto a la carpeta 38 00:03:20,850 --> 00:03:28,760 de activos, la carpeta de fuentes y luego es OpenSans-Bold, no en negrita sino regular. ttf y ahora agregaré un segundo elemento 39 00:03:28,760 --> 00:03:36,210 aquí a este objeto que paso para cargar asíncrono y que podría estar abierto sin negrita. 40 00:03:36,210 --> 00:03:40,660 Ahora estos nombres son totalmente suyos y allí quiero cargar la versión en negrita. 41 00:03:41,290 --> 00:03:48,160 Con eso, le estamos diciendo a React Native al final dónde viven nuestras fuentes, dónde viven estos archivos de fuentes y a qué nombres 42 00:03:48,160 --> 00:03:56,650 queremos asignarlos, y luego podemos usar estos nombres para asignar estas fuentes al texto. Ahora cargar async en realidad devuelve una promesa, lo que significa que esto 43 00:03:56,770 --> 00:04:03,550 llevará un poco más de tiempo, no muy largo, pero no se cargará instantáneamente y devolveré esta promesa aquí dentro de 44 00:04:03,550 --> 00:04:09,360 las fuentes de búsqueda para que siempre que llamemos a las fuentes de búsqueda, podamos esperar para 45 00:04:09,360 --> 00:04:15,600 que esta promesa se resuelva antes de continuar. Ahora, ¿dónde 46 00:04:15,600 --> 00:04:19,610 queremos obtener nuestras fuentes? 47 00:04:19,670 --> 00:04:26,720 Bueno, podríamos cargar manualmente nuestras fuentes aquí, podríamos, por ejemplo, llamar a buscar fuentes como esta y seguiría adelante y buscaría nuestras fuentes, 48 00:04:26,720 --> 00:04:28,180 pero el problema es 49 00:04:28,190 --> 00:04:34,220 que continuaríamos renderizando y eventualmente representaríamos nuestro contenido y, en cualquier parte del contenido, usamos texto que intenta usar 50 00:04:34,220 --> 00:04:38,190 una fuente de este tipo, si la fuente aún no se ha cargado 51 00:04:38,300 --> 00:04:43,850 y, como dije, tomará solo un par de milisegundos, pero aún así para el primer ciclo de representación, 52 00:04:43,850 --> 00:04:50,660 la fuente podría no haberse cargado, entonces Obtendríamos un error. Por lo tanto, no se recomienda cargar 53 00:04:50,660 --> 00:04:55,400 nuestras fuentes de esta manera, es muy probable que no funcione. 54 00:04:55,430 --> 00:05:03,310 En cambio, hay un componente especial que puedes usar, que te ayuda a cargar tus fuentes. Importa este componente desde 55 00:05:03,310 --> 00:05:10,450 la expo y el nombre de ese componente es AppLoading. 56 00:05:10,460 --> 00:05:17,480 Ahora, ese es un componente que básicamente prolongará la pantalla de carga predeterminada, la pantalla de inicio que los usuarios 57 00:05:17,570 --> 00:05:24,860 ven de todos modos cuando se inicia la aplicación, prolongará esta pantalla para mantenerse activa hasta que se realice una determinada tarea 58 00:05:24,860 --> 00:05:26,150 de su elección, 59 00:05:26,150 --> 00:05:29,610 como por ejemplo hasta que se recuperen las fuentes hecho. 60 00:05:29,960 --> 00:05:35,180 Entonces, AppLoading es, en el componente de la aplicación, solo tenemos que 61 00:05:35,190 --> 00:05:41,520 asegurarnos ahora de que representamos este componente en lugar de nuestro contenido real, siempre y cuando 62 00:05:41,520 --> 00:05:43,650 no hayamos cargado nuestras 63 00:05:43,740 --> 00:05:49,000 fuentes o mientras no hayamos terminado de cargar lo que sea. Queríamos cargar. 64 00:05:49,120 --> 00:05:55,390 Ahora lo bueno es que podemos usar el estado para eso y comenzar con un valor inicial 65 00:05:55,390 --> 00:06:04,240 de falso porque el estado que quiero administrar aquí es la carga de datos o lo que quieras llamar y configurar los datos cargados. 66 00:06:04,350 --> 00:06:11,880 Ahora aquí, quiero verificar si los datos cargados no son verdaderos, de ahí el signo de exclamación, entonces sé que los datos aún no 67 00:06:11,880 --> 00:06:16,760 se han cargado y ese es el caso inicialmente y en este caso, ni siquiera 68 00:06:16,920 --> 00:06:17,580 continuaré con 69 00:06:17,640 --> 00:06:25,170 mi otra lógica , en cambio para este componente funcional, devolveré inmediatamente el componente AppLoading como el contenido de la aplicación, básicamente porque no 70 00:06:25,170 --> 00:06:25,610 quiero 71 00:06:25,620 --> 00:06:32,340 mostrar ningún otro contenido si todavía estamos cargando nuestros datos. Ahora AppLoading es un componente proveniente de 72 00:06:32,340 --> 00:06:40,740 Expo que toma un apoyo asíncrono de inicio donde señalamos la operación que queremos comenzar cuando se procesa por primera 73 00:06:40,740 --> 00:06:46,200 vez y esa es, por supuesto, nuestra función de búsqueda de fuentes. 74 00:06:46,200 --> 00:06:49,480 Así que aquí, estoy apuntando a buscar fuentes, a esta función. 75 00:06:49,500 --> 00:06:51,290 Ahora importante, a) esta 76 00:06:51,630 --> 00:06:57,420 debe ser una función que se pasa aquí yb) debe ser una función que devuelva 77 00:06:57,700 --> 00:07:01,980 una promesa porque la exposición escuchará automáticamente esa promesa por usted 78 00:07:01,980 --> 00:07:09,240 y cuando la promesa se resuelva, sabrá que la carga está hecho y luego llamará a lo que pase 79 00:07:09,240 --> 00:07:10,770 aquí a onFinish. 80 00:07:10,770 --> 00:07:17,530 Entonces, aquí, debe pasar una función que luego establece los datos cargados en verdadero. 81 00:07:17,610 --> 00:07:23,160 Entonces, esta función aquí se ejecutará cuando se realice esta operación y para que la 82 00:07:23,160 --> 00:07:24,120 exposición descubra 83 00:07:24,120 --> 00:07:27,360 cuándo se hace, esto debería devolver una promesa. 84 00:07:27,380 --> 00:07:33,760 Así que ahora estos dos accesorios funcionarán juntos y estamos actualizando los datos cargados, este estado es verdadero y, 85 00:07:33,760 --> 00:07:39,410 por lo tanto, no representa este contenido, sino que procede con la ejecución de este código y 86 00:07:39,410 --> 00:07:40,760 finalmente presenta el 87 00:07:41,060 --> 00:07:47,810 contenido allí cuando se recuperan nuestras fuentes. podría hacer cualquier operación asincrónica aquí, pero generalmente, usa AppLoading para cargar algunos 88 00:07:47,810 --> 00:07:50,690 activos, como fuentes o algo así, por lo 89 00:07:50,750 --> 00:07:56,030 que los activos que deberían estar allí cuando se inicia la aplicación que necesita de inmediato 90 00:07:56,030 --> 00:07:57,770 y que normalmente son fuentes. 91 00:07:57,870 --> 00:08:05,710 Ahora también puede agregar un controlador onError aquí por cierto y aquí, solo voy a consolar el registro del objeto de 92 00:08:05,710 --> 00:08:07,050 error que también 93 00:08:07,300 --> 00:08:14,470 obtenemos aquí en los casos en que falla la carga. Por supuesto, es posible que no solo desee registrar esto, sino 94 00:08:14,470 --> 00:08:16,570 hacer algo más, mostrar contenido alternativo 95 00:08:16,570 --> 00:08:20,230 en su aplicación, algo así. Aquí solo lo registraré porque 96 00:08:20,230 --> 00:08:25,710 esto no debería fallar, las fuentes están disponibles localmente aquí, por lo que deberían poder cargarse sin problemas. 97 00:08:25,760 --> 00:08:31,330 Ahora, si guardamos eso, nuestra aplicación, por supuesto, se reinicia y no vemos diferencia aquí, nuestra pantalla 98 00:08:31,400 --> 00:08:36,380 de carga tampoco tarda más como antes porque esa carga es súper rápida, simplemente no 99 00:08:36,380 --> 00:08:37,820 sucede al instante, es 100 00:08:37,820 --> 00:08:39,830 por eso que necesitábamos Este enfoque. 101 00:08:39,830 --> 00:08:41,240 Pero ahora cargamos 102 00:08:41,240 --> 00:08:43,440 las fuentes, ¿cómo podemos usarlas ahora? 103 00:08:43,460 --> 00:08:48,980 Bueno, digamos que queremos cambiar nuestro inicio de un nuevo título de juego aquí para usar nuestra fuente. Ahora para eso, tenemos que ir a 104 00:08:48,980 --> 00:08:57,390 la pantalla de inicio del juego, que es donde vive este título al final, aquí, comenzar un nuevo juego, tiene el estilo del 105 00:08:57,390 --> 00:09:03,540 título y, por lo tanto, en la hoja de estilo aquí en el título, ahora podemos establecer 106 00:09:03,630 --> 00:09:08,050 familia de fuentes para cambiar la familia de fuentes y establecer esto 107 00:09:08,050 --> 00:09:09,270 en open-sans-bold, por 108 00:09:09,270 --> 00:09:15,180 ejemplo, y, por supuesto, el identificador que usa aquí debe ser un identificador que cargó aquí. 109 00:09:15,210 --> 00:09:17,800 Entonces, aquí tengo open-sans-bold y open sans, puedo 110 00:09:17,850 --> 00:09:25,180 usar estos dos identificadores en mi código en cualquier lugar de la aplicación cuando quiero asignar una fuente personalizada y eso es justo 111 00:09:25,180 --> 00:09:27,240 lo que estoy haciendo aquí. 112 00:09:27,240 --> 00:09:32,940 Ahora puede ver que tiene una fuente diferente que está en negrita y, por cierto, si está usando fuentes personalizadas 113 00:09:32,940 --> 00:09:36,180 y desea una fuente en negrita, debe cargarla con la familia 114 00:09:36,180 --> 00:09:42,180 de fuentes, no puede establecer el peso de la fuente. React Native es compatible con esto, pero para las fuentes personalizadas, la exposición por 115 00:09:42,180 --> 00:09:42,840 el momento no 116 00:09:42,840 --> 00:09:47,790 es compatible con esto, en su lugar, simplemente tiene que usar una familia de fuentes separada que no es realmente un problema como puede ver.