Ahora que trabajamos en el texto
aquí, ahora podemos volver a la aplicación. js y deshazte de este cambio temporal aquí donde siempre
mostramos el
juego en la pantalla, ya no queremos hacerlo, en lugar de eso, queremos comenzar con la pantalla
normal de inicio del juego nuevamente y además de este cambio, ahora también desea hacer un ajuste adicional y ese es el botón de
inicio del juego.
Estamos usando el botón normal aquí, que por supuesto es algo que puede hacer, pero a veces también desea crear
su propio botón, desea tener un control total sobre cómo se ve su botón y para esto, por supuesto,
puede crear el suyo propio botón y eso es exactamente lo que vamos a hacer ahora.
Por lo tanto, en la carpeta de componentes, agregaré mi propio botón y
puede
asignarle el nombre que desee, podría nombrarlo, pero
ese ya es el nombre del incorporado y, por supuesto, aún podría nombrar el suyo como esto, para evitar cualquier conflicto
de nombres o confusión, nombraré mi botón como botón principal porque será mi principal, mi botón principal que usaré para las grandes
acciones en este juego,
como comenzar un nuevo juego.
Ahora ese es el nombre del archivo, tendremos un componente React regular, por
lo tanto, importamos React.
Importamos una vista aquí, ciertamente necesitaremos algo de texto,
sin duda necesitaremos una hoja de estilo de React Native como esta y luego
aquí, tenemos el componente del botón principal que recibe accesorios y que al final devolverá
algo de jsx. Tendremos nuestros estilos objeto con Stylesheet. crear y,
como siempre, exportaremos nuestro botón principal.
Y ahora la pregunta es, ¿cómo construyes tu propio botón?
Ahora puede sonar muy complejo hacer eso, pero en realidad no lo es. Su propio botón también es solo una
combinación de vista y texto y muy importante, también un componente táctil, como resaltado táctil u opacidad táctil
o retroalimentación nativa táctil o incluso táctil sin retroalimentación si
no desea dar retroalimentación visual. Así que aquí iré con una opacidad táctil y
necesitamos eso para dar retroalimentación al usuario sobre el hecho de que se presionó el botón y para registrar un evento
onPress y, aparte de eso, construiremos nuestro botón con una vista que diseñamos de cierta manera
y un texto allí.
Así que ahora aquí en el botón principal, podemos devolver nuestra opacidad táctil y allí, tener una vista que podemos usar para luego diseñar el
botón y allí, tal vez un texto para un texto que debería tener un botón.
Ahora digamos que nuestro botón debe ser utilizable de modo que pasemos un texto directamente entre
las etiquetas de apertura y
cierre de nuestro componente, por lo tanto, aquí podemos usar accesorios para niños
como el texto que quiero mostrar en el botón y luego aquí en esta vista, yo Tendremos un estilo de, digamos, botón de estilos, en este texto interno aquí,
podríamos tener un estilo de texto de botón de estilos y estos nombres dependen de usted, por supuesto, y en la opacidad táctil, agregaré el oyente
onPress y nosotros Tendré que hacer algo allí.
Entonces, ahora tenemos el esqueleto de nuestro botón,
ahora podemos comenzar a agregarle algunos estilos.
Ahora, por supuesto, puede diseñar ese botón de la forma que desee, tengo un
cierto estilo en mente aquí
que agregaré, pero nuevamente, definitivamente juegue con eso y aplique sus propios estilos.
Entonces, para el botón en sí, que es la vista alrededor del texto, quiero darle al botón un cierto color
de fondo y también podría asegurarse de que esto se pueda configurar desde fuera,
por supuesto, puede ser realmente creativo aquí. Codificaré un color aquí, por supuesto, usando mis colores constantes aquí. Así que importaré colores de
constantes / Colores, colores como este y luego usaré colores primarios, tal vez el color primario.
Entonces, ese es el color de fondo que debería tener este botón, de nuevo, también puedes asegurarte de
que este estilo esté configurado dinámicamente con la ayuda de algún accesorio que obtengas
del exterior, pero aquí, lo codificaré aquí.
Además de eso, el botón debe tener algo de relleno para que el texto no se
asiente directamente en los bordes
del contenedor del botón, por lo que en el cuadro alrededor del texto, pero hay algo de espacio y puede usar
el mismo relleno en todas las direcciones pero quiero usar un
relleno vertical de 12, por lo que no hay mucho relleno en la parte superior e inferior y un relleno horizontal de
digamos 30, así que mucho más relleno a izquierda y derecha.
Ese es el botón, ahora para el texto del botón, también existe el
color blanco que debería verse bien en nuestro color primario, también podría usar el negro porque
nuestro color primario en realidad es un color donde, como puede ver, tanto blanco como blanco el negro realmente funciona,
por lo que puede usar cualquiera
de los dos, pero iré con el blanco aquí para el botón y agregaré una familia de fuentes de sans abiertos para
usar esta fuente personalizada también, como aprendió, debe configurar esto en cada texto, no hay herencia, no hay una fuente
global que pueda configurar, cada texto que debe usar esta fuente necesita obtenerla y agregaré un tamaño de
fuente de digamos 18 para tener un texto más grande aquí en este botón . Ahora, cuando se presiona el botón, entonces, por supuesto,
normalmente no quiero manejar este evento de presión dentro del botón, sino dentro
del componente donde usamos el botón.
Por lo tanto, simplemente quiero reenviarlo
y para eso, simplemente podemos esperar obtener una referencia de función, una función de controlador de eventos en digamos onPress
prop de nuestro botón personalizado, pero podría nombrar este accesorio
de cualquier manera, podría nombrarlo en Click porque en Al final, eres tú quien usa tu
propio botón
y allí solo tienes que asegurarte de pasar una referencia de función de ajuste, un puntero de ajuste en
una función de controlador de eventos a onPress o lo que sea que le pongas en tu propio botón.
Así que este nombre
depende de usted, ahora usemos el botón principal y usémoslo en
la pantalla de inicio del juego. Allí podemos simplemente importarlo,
así que importa el botón principal de los componentes / MainButton y este botón principal ahora se usa aquí para comenzar un nuevo
juego.
Así que reemplazaré el botón aquí con el botón
principal, pero tenga en cuenta que en este botón, configuré el contenido, el texto que se mostrará de modo que en realidad
sea el contenido que se pasa entre las etiquetas de apertura y cierre de nuestro botón y, por lo tanto, hacia atrás en la pantalla de
inicio del juego,
el título aquí ya no se pasa en un accesorio de título, sino que ahora tenemos una etiqueta de apertura
y cierre para nuestro propio botón y agregamos el juego de inicio allí.
Ahora onPress sigue siendo un accesorio que dejamos aquí porque en el botón principal, reenvío el evento onPress, por así
decirlo, a la función que obtengo en mi propio accesorio onPress aquí, por lo
tanto, tenemos que configurar el accesorio onPress en nuestro propio botón y, por lo tanto, con eso, deberíamos tener un buen
botón principal aquí, un buen botón cuando comenzamos un nuevo juego.
Intentemos esto aquí, así
es como se ve y eso se ve bastante bien en mi opinión, un buen botón.
Sin embargo, no
he terminado, quiero tener esquinas redondeadas en ese botón y para eso, de
vuelta en el archivo del botón principal, podemos, por supuesto, simplemente ir a esta propiedad del
botón aquí en la hoja de estilo, que es el objeto de estilo que se aplica a nuestro vista y allí, podemos agregar un radio
de borde de 25 y si lo hacemos, verá que si ahora obtengo este botón, ahora tiene este aspecto agradable aquí.
También le permite mostrarlo en Android, ahora tiene esquinas redondeadas y tiene este agradable efecto de opacidad cuando lo toca
y,
por cierto, como ya se mencionó anteriormente, puede cambiar este efecto de opacidad yendo al componente de
opacidad táctil y allí, puede establezca la opacidad activa al nivel de opacidad que desea tener cuando se presiona, por
ejemplo, si usa
un valor bastante alto aquí, entonces este efecto es menos fuerte, ahora es solo ligeramente
transparente cuando lo tocamos y no tan transparente como antes de. Pero eso es totalmente de usted lo
que
quiere aquí, iré por. 6 aquí para tener un efecto
ligeramente más fuerte, pero de nuevo eso es algo que puedes configurar y, en general, mi sugerencia sería que juegues con
eso y veas cómo puedes diseñar ese botón, cómo puedes realmente ajustarlo a tus necesidades. Ahora con el botón personalizado agregado, también quiero
usarlo en el juego
sobre la pantalla,
así que allí, también importaré el botón principal de componentes / MainButton como este y luego simplemente agregaré
ese botón principal aquí cuando muestremos nuestro nuevo botón de juego ahí abajo.
Utilice el botón principal en su lugar, por lo tanto, elimine el accesorio de título porque
no es así como estamos configurando el
título en nuestro propio botón personalizado, sino que tenemos que pasarlo aquí entre las etiquetas de apertura y cierre de nuestras etiquetas de componentes personalizados.
Por lo tanto, ahora aquí, esto también debería verse mejor si terminamos rápidamente un juego aquí, tratando de que la computadora adivine
33, aquí estamos
y ahora vemos el botón agradable aquí también.
También vemos la salida correcta aquí con respecto al número de rondas
que tomó
y el número que teníamos que adivinar, y podemos comenzar un nuevo juego a partir de entonces
y volver a pasar por eso muy rápido, sí, todo se ve muy bien.
Lo que me queda por hacer ahora es trabajar en estos dos botones, inferior y superior.
Parecen un poco aburridos,
diría, ciertamente podemos hacer que se vean más emocionantes. Ahora, una forma de hacer que se vean un poco más
emocionantes es que también usemos nuestro botón personalizado allí.
Entonces, por supuesto, aquí en la pantalla del juego, también podemos importar el botón principal de los componentes / MainButton, por lo que nuestro
propio botón personalizado y usarlo en lugar del botón que estamos usando actualmente, que está
integrado en uno. Así que use
nuestro propio botón aquí, por lo tanto, por supuesto, mueva el título entre las
etiquetas de apertura y cierre, así que aquí está más abajo y luego aquí para el segundo botón, eso
es mayor y ahora esto debería verse un poco mejor si comenzamos un nuevo juego aquí .
Ahora usamos nuestros botones personalizados aquí, aunque ahora también vemos un problema,
simplemente son demasiado grandes, están demasiado cerca el uno del otro, sin
embargo, podemos cambiar eso yendo al contenedor de botones y dándole un poco más ancho, quizás
establezca el ancho máximo al 90% aquí en realidad.
Entonces, si intentamos esto de nuevo, sí, eso se ve un poco mejor, hay al menos algo de espacio entre los botones
y por ahora esto funcionará porque por ahora, no estamos optimizando para todos los tamaños de pantalla.
También aumentemos este ancho aquí a 400 para que tengamos suficiente ancho, en realidad
usamos 400 píxeles y ahora esto se ve bien aquí en iOS y
también en Android. Ahora eso se ve un
poco mejor como mencioné, pero no sería bueno si tuviéramos íconos allí, en lugar de texto porque el texto, por supuesto, funciona, pero un ícono
también podría funcionar y no hemos usado
íconos hasta ahora sin embargo, a menudo los necesitas en aplicaciones móviles. Definitivamente es algo que también debe tener en
cuenta, debe saber cómo trabajar con iconos, cómo agregar iconos dentro de su aplicación y eso
es lo que haremos a continuación.