Por supuesto, depende de usted cómo desea diseñar este texto de confirmación aquí o en realidad no
debe ser solo texto, debe ser una vista con el texto allí que genera nuestro número y luego un botón para
iniciar el juego y definitivamente puede pausar el video en este punto y crea tu propio estilo allí,
tu propio diseño.
Tengo un cierto diseño en mente que ciertamente diferirá del tuyo, pero no hay
una decisión incorrecta o correcta aquí, así que definitivamente toma esto como otra oportunidad para crear tu
propio diseño para esto y un botón que en este momento no hace nada pero eso
es lo que permitiría al usuario iniciar el juego y después de una breve pausa que puede usar para
pausar el video, implementaré mi solución junto con usted.
Así es como creo que esto se vería bien.
Quiero tener una vista para poder configurar un contenedor general alrededor de eso o, de hecho, tal vez no una vista, pero
¿por qué no usamos nuestra tarjeta aquí?
Eso parece una buena idea.
Ahora esa tarjeta, si la miramos, no tiene margen y quiero tener un espacio entre esa tarjeta
en la parte superior y mi tarjeta de resumen.
Por lo tanto, aquí, le daré a este un estilo separado aquí en mi hoja de estilo, en
la pantalla de inicio del juego, nombraré este contenedor de resumen, el nombre como
siempre depende de usted y quiero tener un margen en la parte superior de digamos 20, un buen espacio aquí y agregue esto a través del accesorio de estilo a la tarjeta aquí
y allá, quiero decir que seleccionó y luego, en una nueva línea, genera el número de una manera bien presentada, tal vez el
número en una especie de cuadro con un borde separado con esquinas redondeadas para que
sea claramente visible o también más grande que el otro texto y, por
lo tanto, aquí, agregaré una vista con un texto allí y en ese texto, tendré el número seleccionado,
pero ahora eso ver y el texto debería tener un estilo especial y como planeo
reutilizarlo, lo tomaré
y lo externalizaré a un nuevo componente y lo nombraré contenedor de números. En este componente, importaré React from React e importaré la vista y el texto de React
Native y luego tendré el componente de contenedor de números aquí, exportaré el contenedor de números predeterminado y, por supuesto, también necesitaremos una hoja de estilos
aquí, así que configuremos una hoja de estilos también con Stylesheet. crear allí y luego en este componente, devolveré este
elemento de vista aquí con el número seleccionado que ahora, sin embargo, debe pasarse y espero que
lo coloque entre las etiquetas de apertura y cierre de mi propio componente con
la ayuda de accesorios niños.
Ahora, este contenedor, por supuesto, es algo que puede configurar
libremente, agregaré solo un estilo de contenedor, el nombre del contenedor aquí, donde creo que un ancho de borde de dos podría verse
bien, por lo que es un borde un poco más ancho. Un color de borde donde realmente quiero usar mi color primario o mi
color de acento, veremos cuál se ve mejor.
Entonces, importemos colores de constantes / Colores y para el color del borde, luego usemos el acento de colores por
ahora y veamos cómo se ve. Un poco de relleno para que el número
no esté directamente en los bordes
de esa caja circundante, no se sienta directamente al lado del borde, un radio de borde de 10 para
tener
algunos bordes redondeados, algunas esquinas redondeadas discúlpeme, por cierto si lo desea desea apuntar a esquinas individuales,
puede hacerlo con el radio del borde superior izquierdo, el radio superior derecho, el extremo superior y el inicio superior también tiene en cuenta la
configuración del usuario con respecto a si se trata de un idioma de izquierda a derecha o de
derecha a izquierda para que pueda apuntar a todos también esquinas o establezca un radio para todas las esquinas con radio de borde
y también agregue un pequeño margen aquí, margen vertical de 10 tal vez para tener algo de espacio en la parte superior e
inferior alrededor de este contenedor aquí y también importante, centre el texto allí alinee el centro de elementos y justifique el
centro de contenido aprovechando el comportamiento de la caja flexible. Y con eso, también quiero dar el número en sí, por lo que el texto
tiene un cierto estilo y ese estilo es que le doy al texto también ese color de acento y quiero usar un tamaño de fuente de 22 para tener que
destacar realmente y más tarde , también usaremos una fuente personalizada. Y luego, esta vista aquí obtiene el estilo
de contenedor y el texto aquí, por supuesto, recibe el estilo de número. Con esa configuración, podemos usar el contenedor de números en la pantalla
de inicio del juego, por lo que simplemente agregamos esa importación y lo que estamos haciendo
aquí es bastante normal, que tienes múltiples componentes de los cuales compones tu aplicación.
Así que ahora podemos usar el contenedor de números en el componente de la pantalla de inicio del juego, agregarlo aquí debajo
de este texto y en el contenedor de números, obtenemos el contenido aquí con props children, lo imprimimos con props children,
eso significa que tenemos que pasarlo entre las etiquetas
de apertura y cierre, así que aquí, reenviamos el número seleccionado.
Ahora, esa es solo mi sugerencia de cómo podríamos diseñar esto, pero me gusta
el estilo y luego, por el momento, agregaré un botón aquí que es una etiqueta de cierre automático, el botón
incorporado con un título de inicio del juego, todo mayúsculas para que realmente se destaque y guarde esto y ahora, si elegimos un número aquí, esto es
lo que obtenemos y no parece demasiado feo, diría. Aún así, hay dos cosas que quiero
cambiar, este texto aquí debe estar centrado y este cuadro con el número no debe ser
tan ancho como el cuadro que lo rodea, pero debe ser tan ancho como el número lo necesite.
Ahora para hacer que ambos funcionen, iré a mi tarjeta que contiene todo el contenido aquí y con eso, quiero
decir que voy al estilo en la pantalla de
inicio del juego
que también uso en esa tarjeta, ese es mi contenedor de resumen y allí puede alinear los elementos allí para que estén centrados, en lugar de
usar el valor predeterminado que sería estirado y ahora esto se centra automáticamente y el cuadro es tan
ancho como el número lo requiere.
Ahora que no se ve muy mal, una
última cosa que acabo de notar es que cuando confirmamos una entrada, también quiero usar la API del
teclado para descartar el teclado, de modo que tan pronto como presionamos confirmar aquí, también cerremos el teclado y ahora
tenemos una buena salida aquí.
Ahora con eso, tenemos una apariencia de base sólida, diría, podemos elegir un
número, estamos haciendo una validación aproximada para asegurarnos de que tenemos un número válido y el siguiente paso es hacer
que este botón de inicio del juego funcione y cambiamos lo que vemos en la pantalla aquí para que el juego
esté ejecutando la pantalla donde la computadora ahora está haciendo conjeturas y luego nos aseguramos de darle al usuario la
oportunidad de decir si los números deberían ser mayores o
menores y luego punto están terminados y muestran un juego en pantalla.