Entonces, ahora que la lógica general del juego funciona, concentrémonos más en terminar ese estilo y también en agregar
nuestras propias fuentes personalizadas y una pequeña imagen agradable en el juego sobre la pantalla porque
trabajar con imágenes y trabajar con fuentes personalizadas es algo típico en la actualidad. desarrollo de la aplicación, por supuesto,
rara vez desea atenerse a las fuentes predeterminadas del sistema y rara vez tiene una aplicación sin imágenes.
Entonces, comencemos con las fuentes personalizadas y en una exposición React Native, agregar fuentes es super trivial.
En la carpeta de su proyecto, en
la carpeta de activos, creemos una carpeta de fuentes. Sin embargo, puede almacenarlo en cualquier lugar, pero
me gusta mantenerlo en la carpeta de activos para mantener mis activos como fuentes e imágenes organizadas.
Entonces, aquí en la carpeta de fuentes, como era de esperar, quiero administrar mis fuentes y
para eso, adjunto encontrará un archivo zip con dos fuentes que puede extraer y luego arrastrar
y soltar aquí, eso es OpenSans-Bold y OpenSans-Regular, así que
Estas dos fuentes se adjuntan a este video en un archivo zip, se extraen y se arrastran a la
carpeta de fuentes.
Ahora con eso, estas fuentes están generalmente disponibles, pero para usarlas, aún necesita configurar más.
Necesitas ir a tu aplicación. js y básicamente le indica a React Native y expo que
carguen estas fuentes, para usarlas. Para eso en la aplicación. js y estoy usando la aplicación. js porque ese es el
primer archivo que se carga o se ejecuta, por ejemplo, cuando se inicia la
aplicación y desea cargar sus fuentes cuando se inicia la aplicación, allí, debe agregar una importación y esa importación es
que importa todo como fuente, aunque ese nombre aquí depende de usted, pero generalmente, usa la fuente aquí, de expo-font.
Entonces expo-font es un paquete que le brinda utilidades de fuente, de modo que las utilidades que le permiten cargar fuentes e importar
todo desde ese paquete y agruparlo en este objeto de fuente, eso es lo que
estamos haciendo aquí. Ahora para
cargar fuentes, agregaré una nueva función fuera del componente funcional porque esta función
no necesita ser recreada para cada ciclo de reproducción de componentes.
Ahora lo llamaré buscar
fuentes, el
nombre depende de usted y
en esta función aquí, llamaré fuente. loadAsync.
Ahora, esta es una función que o un método en el paquete de fuentes que estamos importando
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
sobre todas las fuentes que desea carga. Para ello, use una tecla donde elija
cualquier nombre de su elección, como open-sans y luego podrá usar estas fuentes con estos nombres, así
que aquí open sans porque mi fuente se llama open sans.
Entonces, aquí está abierto y luego agrega require, esa es
una característica del lenguaje que ofrece Javascript donde señala la ruta donde se almacena esta fuente.
Esa es una
ruta relativa, así que aquí apunto a la carpeta
de activos, la carpeta de fuentes y luego es OpenSans-Bold, no en negrita sino regular. ttf y ahora agregaré un segundo elemento
aquí a este objeto que paso para cargar asíncrono y que podría estar abierto sin negrita.
Ahora estos nombres son totalmente suyos y allí quiero cargar la versión en negrita.
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
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
llevará un poco más de tiempo, no muy largo, pero no se cargará instantáneamente y devolveré esta promesa aquí dentro de
las fuentes de búsqueda para que siempre que llamemos a las fuentes de búsqueda, podamos esperar para
que esta promesa se resuelva antes de continuar. Ahora, ¿dónde
queremos obtener nuestras fuentes?
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,
pero el problema es
que continuaríamos renderizando y eventualmente representaríamos nuestro contenido y, en cualquier parte del contenido, usamos texto que intenta usar
una fuente de este tipo, si la fuente aún no se ha cargado
y, como dije, tomará solo un par de milisegundos, pero aún así para el primer ciclo de representación,
la fuente podría no haberse cargado, entonces Obtendríamos un error. Por lo tanto, no se recomienda cargar
nuestras fuentes de esta manera, es muy probable que no funcione.
En cambio, hay un componente especial que puedes usar, que te ayuda a cargar tus fuentes. Importa este componente desde
la expo y el nombre de ese componente es AppLoading.
Ahora, ese es un componente que básicamente prolongará la pantalla de carga predeterminada, la pantalla de inicio que los usuarios
ven de todos modos cuando se inicia la aplicación, prolongará esta pantalla para mantenerse activa hasta que se realice una determinada tarea
de su elección,
como por ejemplo hasta que se recuperen las fuentes hecho.
Entonces, AppLoading es, en el componente de la aplicación, solo tenemos que
asegurarnos ahora de que representamos este componente en lugar de nuestro contenido real, siempre y cuando
no hayamos cargado nuestras
fuentes o mientras no hayamos terminado de cargar lo que sea. Queríamos cargar.
Ahora lo bueno es que podemos usar el estado para eso y comenzar con un valor inicial
de falso porque el estado que quiero administrar aquí es la carga de datos o lo que quieras llamar y configurar los datos cargados.
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
se han cargado y ese es el caso inicialmente y en este caso, ni siquiera
continuaré con
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
quiero
mostrar ningún otro contenido si todavía estamos cargando nuestros datos. Ahora AppLoading es un componente proveniente de
Expo que toma un apoyo asíncrono de inicio donde señalamos la operación que queremos comenzar cuando se procesa por primera
vez y esa es, por supuesto, nuestra función de búsqueda de fuentes.
Así que aquí, estoy apuntando a buscar fuentes, a esta función.
Ahora importante, a) esta
debe ser una función que se pasa aquí yb) debe ser una función que devuelva
una promesa porque la exposición escuchará automáticamente esa promesa por usted
y cuando la promesa se resuelva, sabrá que la carga está hecho y luego llamará a lo que pase
aquí a onFinish.
Entonces, aquí, debe pasar una función que luego establece los datos cargados en verdadero.
Entonces, esta función aquí se ejecutará cuando se realice esta operación y para que la
exposición descubra
cuándo se hace, esto debería devolver una promesa.
Así que ahora estos dos accesorios funcionarán juntos y estamos actualizando los datos cargados, este estado es verdadero y,
por lo tanto, no representa este contenido, sino que procede con la ejecución de este código y
finalmente presenta el
contenido allí cuando se recuperan nuestras fuentes. podría hacer cualquier operación asincrónica aquí, pero generalmente, usa AppLoading para cargar algunos
activos, como fuentes o algo así, por lo
que los activos que deberían estar allí cuando se inicia la aplicación que necesita de inmediato
y que normalmente son fuentes.
Ahora también puede agregar un controlador onError aquí por cierto y aquí, solo voy a consolar el registro del objeto de
error que también
obtenemos aquí en los casos en que falla la carga. Por supuesto, es posible que no solo desee registrar esto, sino
hacer algo más, mostrar contenido alternativo
en su aplicación, algo así. Aquí solo lo registraré porque
esto no debería fallar, las fuentes están disponibles localmente aquí, por lo que deberían poder cargarse sin problemas.
Ahora, si guardamos eso, nuestra aplicación, por supuesto, se reinicia y no vemos diferencia aquí, nuestra pantalla
de carga tampoco tarda más como antes porque esa carga es súper rápida, simplemente no
sucede al instante, es
por eso que necesitábamos Este enfoque.
Pero ahora cargamos
las fuentes, ¿cómo podemos usarlas ahora?
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
la pantalla de inicio del juego, que es donde vive este título al final, aquí, comenzar un nuevo juego, tiene el estilo del
título y, por lo tanto, en la hoja de estilo aquí en el título, ahora podemos establecer
familia de fuentes para cambiar la familia de fuentes y establecer esto
en open-sans-bold, por
ejemplo, y, por supuesto, el identificador que usa aquí debe ser un identificador que cargó aquí.
Entonces, aquí tengo open-sans-bold y open sans, puedo
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
lo que estoy haciendo aquí.
Ahora puede ver que tiene una fuente diferente que está en negrita y, por cierto, si está usando fuentes personalizadas
y desea una fuente en negrita, debe cargarla con la familia
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
el momento no
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.