Ahora tenemos el aspecto de la tarjeta, ahora como siguiente paso arreglemos los botones y eso es algo que ya te mostré, así
que definitivamente tienes la oportunidad de pausar el video y hacerlo por tu cuenta.
Quiero asegurarme de que los botones tengan el mismo tamaño, no deben ocupar el ancho completo
disponible, pero deben tener el mismo tamaño, lo que garantiza que el texto encaje allí y que tengan el
mismo tamaño.
Entonces, tienes la oportunidad de pausar el video, luego haremos esto juntos. ¿Tuviste éxito?
Asegurémonos de que los botones tengan el mismo tamaño y para esto en la pantalla de inicio del juego donde tengo
los botones, aprendiste que la solución es envolver los botones en una vista. Por lo tanto, debe agregar su propio componente de vista
alrededor de los botones
y ahora puede asignar un estilo a estos botones, así que a ambos botones aquí y usaré un objeto de botón
en mi objeto de estilos allí abajo,
así que agreguemos un botón aquí y simplemente dale un ancho y aquí, un ancho que elegiré es digamos 80.
Veamos cómo se ve esto, si guardo esto, un poco demasiado pequeño como parece ya que hay un salto de línea
en este botón.
Así que vamos con 120, ahora eso es demasiado, así que
¿qué tal 100 y eso me parece bastante bueno?
Ahora, además, y eso no era una tarea para un usuario, no se
preocupe si no lo hizo, quiero cambiar sus colores y uno de los colores debería ser
nuestro color principal y también quiero establecer un acento, algo colores secundarios, por así decirlo, que podemos usar.
Entonces, para eso, en el componente de pantalla de inicio del juego, en el botón en sí, hay un accesorio de
color que puede configurar para
controlar el color y para Android, ese es el color de fondo, para iOS que será el color del
texto y ahora el reinicio botón, allí quiero configurar un color de # 717fc, creo que es
un color agradable y para el
botón principal, el botón de confirmación, usaré mi tema principal y quiero usar el mismo color que uso en
el encabezado .
Entonces, allí tengo este código hexadecimal utilizado como color de fondo, ahora
usaré el mismo color aquí para este segundo botón. Con eso podemos guardar esto y ahora tenemos
estos dos colores de botones aquí, que se ve bastante bien en mi opinión.
Ahora, una desventaja de este enfoque o una cosa que podemos mejorar es que estoy usando este código hexadecimal aquí, lo estoy usando
en el encabezado y es probable que más adelante en la aplicación
queramos usar el mismo color en otros lugares también .
Por lo tanto, sería bueno si pudiéramos configurar esto como un tipo de
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
el color en un lugar si alguna vez queremos use un color diferente y no
tenemos que hacerlo en docenas de componentes.
Y para eso usaré un enfoque en el que agregaré una nueva carpeta en el nivel raíz y
las nombraré constantes y, como siempre, puedes nombrar estas carpetas como
quieras y allí quiero tener colores. archivo js. Una vez más, este nombre
también se puede nombrar como quieras porque lo que hará este archivo es exportar un objeto Javascript predeterminado, exportará un objeto
Javascript y allí, puedes tener los pares clave-valor que desees y estableceré un color primario, por lo que solo es primario como
nombre de clave y este debería ser este código hexadecimal que acabo de copiar, por lo que
este color de encabezado también es acentuado o secundario, lo que quieras
nombrar, iré con color de acento y eso debería sea este otro color que usé
en el primer botón, así que este código hexadecimal aquí, lo usaré aquí.
Ahora, estos colores se definen aquí y ahora podemos simplemente importarlos desde este archivo y cada vez que los cambiemos
aquí, están cambiando en todas partes en esta aplicación y, por lo tanto, podemos intercambiarlos fácilmente durante el desarrollo.
Así que ahora, en la pantalla de inicio del juego, podemos seguir adelante e importar colores de constantes / Colores como este y
le di una C mayúscula para indicar que se trata de una colección de valores, puedes nombrar esto como quieras,
también puede
usar una c minúscula, ese nombre no importa y
ahora puede usar colores aquí para asignar sus colores.
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
el botón de confirmación, iré con colores. primario y lo mismo
en el encabezado. Por supuesto, ahora también queremos usar ese color
y no codificarlo aquí, sino importar colores de constantes / colores y con eso importado, también puede usarlo en una hoja
de estilo, no solo en jsx, puede usarlo en cualquier lugar en ese archivo después
de todo, así que
ahora aquí, me referiré a Colors. primario. Y si guarda eso, nuevamente tenemos
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
acento no debería ser este color sino azul, simplemente cámbielo aquí, su aplicación es reconstruido y tienes un botón azul.
Entonces, esa es la gran ventaja de administrar sus colores u otras constantes centrales en dichos archivos, podría tener
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
o relleno para que pueda no tiene que usar manualmente los mismos valores una y otra vez,
estos son todos
los enfoques que puede usar para facilitar su vida como desarrollador y tener un
código donde pueda intercambiar valores rápidamente si lo necesita.
Por ahora, solo administraré mis colores allí porque esa es una de las cosas que es más
molesto de copiar y es un enfoque realmente genial, por lo tanto, administrarlo en dicho archivo.