1 00:00:02,260 --> 00:00:08,000 Ahora tenemos el aspecto de la tarjeta, ahora como siguiente paso arreglemos los botones y eso es algo que ya te mostré, así 2 00:00:08,000 --> 00:00:11,860 que definitivamente tienes la oportunidad de pausar el video y hacerlo por tu cuenta. 3 00:00:11,870 --> 00:00:16,430 Quiero asegurarme de que los botones tengan el mismo tamaño, no deben ocupar el ancho completo 4 00:00:16,760 --> 00:00:22,070 disponible, pero deben tener el mismo tamaño, lo que garantiza que el texto encaje allí y que tengan el 5 00:00:22,280 --> 00:00:22,990 mismo tamaño. 6 00:00:23,000 --> 00:00:30,020 Entonces, tienes la oportunidad de pausar el video, luego haremos esto juntos. ¿Tuviste éxito? 7 00:00:30,020 --> 00:00:35,480 Asegurémonos de que los botones tengan el mismo tamaño y para esto en la pantalla de inicio del juego donde tengo 8 00:00:35,480 --> 00:00:43,070 los botones, aprendiste que la solución es envolver los botones en una vista. Por lo tanto, debe agregar su propio componente de vista 9 00:00:43,220 --> 00:00:45,200 alrededor de los botones 10 00:00:45,200 --> 00:00:52,670 y ahora puede asignar un estilo a estos botones, así que a ambos botones aquí y usaré un objeto de botón 11 00:00:52,670 --> 00:00:55,190 en mi objeto de estilos allí abajo, 12 00:00:55,370 --> 00:01:02,730 así que agreguemos un botón aquí y simplemente dale un ancho y aquí, un ancho que elegiré es digamos 80. 13 00:01:02,750 --> 00:01:09,050 Veamos cómo se ve esto, si guardo esto, un poco demasiado pequeño como parece ya que hay un salto de línea 14 00:01:09,260 --> 00:01:10,370 en este botón. 15 00:01:10,370 --> 00:01:16,890 Así que vamos con 120, ahora eso es demasiado, así que 16 00:01:16,920 --> 00:01:22,510 ¿qué tal 100 y eso me parece bastante bueno? 17 00:01:22,530 --> 00:01:26,790 Ahora, además, y eso no era una tarea para un usuario, no se 18 00:01:26,910 --> 00:01:31,840 preocupe si no lo hizo, quiero cambiar sus colores y uno de los colores debería ser 19 00:01:31,950 --> 00:01:37,590 nuestro color principal y también quiero establecer un acento, algo colores secundarios, por así decirlo, que podemos usar. 20 00:01:40,450 --> 00:01:46,810 Entonces, para eso, en el componente de pantalla de inicio del juego, en el botón en sí, hay un accesorio de 21 00:01:46,810 --> 00:01:48,530 color que puede configurar para 22 00:01:48,550 --> 00:01:54,460 controlar el color y para Android, ese es el color de fondo, para iOS que será el color del 23 00:01:54,780 --> 00:02:00,250 texto y ahora el reinicio botón, allí quiero configurar un color de # 717fc, creo que es 24 00:02:00,340 --> 00:02:02,170 un color agradable y para el 25 00:02:02,170 --> 00:02:08,170 botón principal, el botón de confirmación, usaré mi tema principal y quiero usar el mismo color que uso en 26 00:02:08,170 --> 00:02:09,370 el encabezado . 27 00:02:09,370 --> 00:02:12,960 Entonces, allí tengo este código hexadecimal utilizado como color de fondo, ahora 28 00:02:13,030 --> 00:02:19,090 usaré el mismo color aquí para este segundo botón. Con eso podemos guardar esto y ahora tenemos 29 00:02:19,210 --> 00:02:24,050 estos dos colores de botones aquí, que se ve bastante bien en mi opinión. 30 00:02:24,070 --> 00:02:30,660 Ahora, una desventaja de este enfoque o una cosa que podemos mejorar es que estoy usando este código hexadecimal aquí, lo estoy usando 31 00:02:30,670 --> 00:02:34,080 en el encabezado y es probable que más adelante en la aplicación 32 00:02:34,090 --> 00:02:37,330 queramos usar el mismo color en otros lugares también . 33 00:02:37,330 --> 00:02:41,380 Por lo tanto, sería bueno si pudiéramos configurar esto como un tipo de 34 00:02:41,380 --> 00:02:48,340 tema que podría decir, que podríamos usar fácilmente estos colores sin copiar códigos hexadecimales en nuestra aplicación y que también podemos cambiar 35 00:02:48,340 --> 00:02:53,350 el color en un lugar si alguna vez queremos use un color diferente y no 36 00:02:53,350 --> 00:02:55,980 tenemos que hacerlo en docenas de componentes. 37 00:02:56,080 --> 00:03:01,830 Y para eso usaré un enfoque en el que agregaré una nueva carpeta en el nivel raíz y 38 00:03:01,840 --> 00:03:05,440 las nombraré constantes y, como siempre, puedes nombrar estas carpetas como 39 00:03:05,440 --> 00:03:11,640 quieras y allí quiero tener colores. archivo js. Una vez más, este nombre 40 00:03:11,670 --> 00:03:19,020 también se puede nombrar como quieras porque lo que hará este archivo es exportar un objeto Javascript predeterminado, exportará un objeto 41 00:03:19,050 --> 00:03:26,760 Javascript y allí, puedes tener los pares clave-valor que desees y estableceré un color primario, por lo que solo es primario como 42 00:03:26,820 --> 00:03:32,790 nombre de clave y este debería ser este código hexadecimal que acabo de copiar, por lo que 43 00:03:32,790 --> 00:03:37,230 este color de encabezado también es acentuado o secundario, lo que quieras 44 00:03:37,230 --> 00:03:42,330 nombrar, iré con color de acento y eso debería sea este otro color que usé 45 00:03:42,330 --> 00:03:47,070 en el primer botón, así que este código hexadecimal aquí, lo usaré aquí. 46 00:03:47,070 --> 00:03:52,920 Ahora, estos colores se definen aquí y ahora podemos simplemente importarlos desde este archivo y cada vez que los cambiemos 47 00:03:52,920 --> 00:03:58,700 aquí, están cambiando en todas partes en esta aplicación y, por lo tanto, podemos intercambiarlos fácilmente durante el desarrollo. 48 00:03:58,740 --> 00:04:07,800 Así que ahora, en la pantalla de inicio del juego, podemos seguir adelante e importar colores de constantes / Colores como este y 49 00:04:08,050 --> 00:04:15,720 le di una C mayúscula para indicar que se trata de una colección de valores, puedes nombrar esto como quieras, 50 00:04:15,730 --> 00:04:16,900 también puede 51 00:04:16,900 --> 00:04:20,530 usar una c minúscula, ese nombre no importa y 52 00:04:20,590 --> 00:04:23,980 ahora puede usar colores aquí para asignar sus colores. 53 00:04:24,010 --> 00:04:31,570 Entonces, para este botón de reinicio, ahora usaremos un valor dinámico para que podamos alcanzar los colores. acento y aquí para el botón principal, para 54 00:04:32,050 --> 00:04:39,080 el botón de confirmación, iré con colores. primario y lo mismo 55 00:04:39,080 --> 00:04:44,630 en el encabezado. Por supuesto, ahora también queremos usar ese color 56 00:04:45,020 --> 00:04:52,180 y no codificarlo aquí, sino importar colores de constantes / colores y con eso importado, también puede usarlo en una hoja 57 00:04:52,370 --> 00:04:57,680 de estilo, no solo en jsx, puede usarlo en cualquier lugar en ese archivo después 58 00:04:57,680 --> 00:04:59,420 de todo, así que 59 00:04:59,420 --> 00:05:05,680 ahora aquí, me referiré a Colors. primario. Y si guarda eso, nuevamente tenemos 60 00:05:05,720 --> 00:05:13,460 el mismo aspecto que antes pero una vez más de otra manera más elegante en la que si alguna vez decide que su color de 61 00:05:13,460 --> 00:05:19,790 acento no debería ser este color sino azul, simplemente cámbielo aquí, su aplicación es reconstruido y tienes un botón azul. 62 00:05:19,910 --> 00:05:26,630 Entonces, esa es la gran ventaja de administrar sus colores u otras constantes centrales en dichos archivos, podría tener 63 00:05:26,630 --> 00:05:34,910 otro archivo llamado texto, por ejemplo, donde tiene algunos tamaños de fuente centrales u otro espacio de archivos donde almacena valores predeterminados para márgenes 64 00:05:34,940 --> 00:05:41,000 o relleno para que pueda no tiene que usar manualmente los mismos valores una y otra vez, 65 00:05:41,000 --> 00:05:42,550 estos son todos 66 00:05:42,620 --> 00:05:47,690 los enfoques que puede usar para facilitar su vida como desarrollador y tener un 67 00:05:47,690 --> 00:05:50,900 código donde pueda intercambiar valores rápidamente si lo necesita. 68 00:05:50,990 --> 00:05:56,360 Por ahora, solo administraré mis colores allí porque esa es una de las cosas que es más 69 00:05:56,360 --> 00:06:01,490 molesto de copiar y es un enfoque realmente genial, por lo tanto, administrarlo en dicho archivo.