Ahora, antes de agregar más lógica, trabajemos en la interfaz de usuario, así que en lo que mostramos.
Entonces, aquí, devolveré una vista al
final y en esa vista quiero tener un texto donde diga que los oponentes adivinan, entonces lo que adivinó la computadora y luego podemos reutilizar el
contenedor de números para presentar muy bien ese número adivinado.
Entonces, esa es una gran ventaja de tener componentes tan reutilizables porque puede reutilizarlos, supongo, así que eso es lo
que estamos haciendo aquí.
Usaremos ese contenedor de números nuevamente, debajo de que los oponentes adivinen el texto aquí para tener nuestro
propio contenedor de números y generen
la suposición actual aquí. La suposición actual es nuestro
estado, recuerde que es lo que inicializamos aquí y lo que pronto podremos cambiar también.
Entonces, eso es lo que se está obteniendo aquí, a continuación, ahora también podemos presentar nuestra tarjeta con dos botones que permiten al usuario dar
una pista a la computadora.
Entonces, aquí, importaré la tarjeta de la tarjeta de componentes para envolver estos botones allí y, por lo tanto, también podemos
importar el botón de React Native porque también lo necesitaremos en
un segundo y luego simplemente tendremos nuestra tarjeta aquí y en esa tarjeta , Quiero tener un botón con un título de inferior y
otro botón donde digamos mayor, estas son dos direcciones en las que podemos dar una pista, entonces el número que
adivinó es demasiado bajo, es demasiado alto,
entonces podemos dar el una sugerencia de computadora con estos botones y onPress, por el momento solo registraré una
función vacía que no hace nada, que por supuesto pronto cambiará
y generará efectivamente un nuevo número aleatorio y con eso, ahora es el momento de agregar Algunos estilos aquí.
Quiero tener un estilo para mi pantalla general y, como antes, obtendré un flex
para tomar todo el espacio disponible en la pantalla debajo del encabezado
que tenemos en la parte superior, agregar un relleno de 10 para tener algo
de espacio alrededor del contenido para que no se asiente directamente en los bordes y también use elementos de alineación aquí para centrar nuestro contenido horizontalmente y esa propiedad de
pantalla se usa en la vista circundante aquí para agregar estilos de pantalla allí para que
el contenido en esta pantalla general esté bien posicionado. Ahora, para estos botones, sería bueno que estuvieran sentados uno al lado
del otro, por lo que en la tarjeta podemos agregar un estilo, tal vez usar el contenedor de botones como nombre aquí y, por lo
tanto, agregar el mismo nombre aquí en nuestra hoja de estilo porque eso es
lo que nos referimos y establecemos la dirección de flexión aquí para remar y podemos establecer una dirección de flexión aquí porque estoy haciendo
esto en
mi tarjeta, pero si echamos un vistazo, en esa tarjeta, distribuimos estos estilos en una vista y un view usa flexbox para que podamos
establecer una dirección de flexión aquí y eso es lo que estoy haciendo allí, configurar la dirección de flexión
para remar para colocar los elementos uno al lado del otro horizontalmente. justifyContent con espacio alrededor, tal vez, para tener
el espacio libre alrededor de los botones, a la izquierda y a la derecha distribuidos equitativamente y también agregar un margen superior de
20 para que esta tarjeta con nuestros botones no se encuentre directamente al lado del número adivinado, pero hay algo de
espacio intermedio y también puede darle un ancho de 300 y un ancho máximo del 80% para asegurarse de
que esto nunca pueda exceder los límites de la vista principal. Ahora, si guardamos esto, sería bueno ver eso y para
eso, necesitamos una forma de ir a la pantalla del juego.
Ahora estamos usando la pantalla de inicio del juego en el componente de la aplicación, por lo que también tendremos que usar la
pantalla del juego allí y administrar el número seleccionado en ese componente de la aplicación porque ese es el único componente que está en
la pantalla todo el tiempo, además del encabezado,
pero el componente de la aplicación también es el componente que mantendrá la pantalla de inicio del juego y la pantalla del
juego pronto y, por lo
tanto, es el componente donde también podemos pasar datos a la pantalla de inicio del juego y a la
pantalla del juego.
Así que importaremos la pantalla del juego aquí desde la pantalla del juego de pantallas y, por supuesto, quiero renderizar la pantalla de mi juego aquí, pero
no si la pantalla de inicio del juego todavía es visible, quiero tener cualquiera de las dos y nota
al margen, también hay una diferente forma de cargar diferentes componentes y profundizaremos en eso
en un módulo separado en el módulo de navegación.
Ahora, si bien cubriremos diferentes soluciones de navegación más adelante, hay una forma de representar cualquiera de las
dos pantallas en este momento,
también tenemos una forma de representar solo una de estas dos pantallas en este momento
y para eso, no necesitamos una herramienta especial
o algo así, podemos usar la lógica normal de React, podemos procesar este contenido condicionalmente.
Todo lo que necesitamos hacer para eso es que necesitamos administrar algún estado en
el componente de nuestra aplicación, también necesitamos administrar el número seleccionado aquí.
Entonces agregaré el estado de uso aquí y luego simplemente usaré mi estado aquí e inicializaré esto sin ningún valor al final y allí, quiero obtener el
número
seleccionado o el número de usuario y establecer el número de usuario como una función de actualización aquí e inicialmente eso no está definido y
ahora aquí necesito una
función en la que podamos
cambiar esto, como el controlador de inicio
del juego,
que suena como
un nombre apropiado porque tendremos ese número si el usuario presiona el botón de inicio del juego aquí en
la pantalla de inicio del juego.
Entonces, el controlador de inicio del juego obtendrá el número seleccionado como entrada, eso es una suposición que tenemos que hacer
aquí y establecer el número de usuario para que sea ese número seleccionado aquí. Ahora, cuando ese sea el caso, siempre que tengamos un
número de usuario, sabemos que el juego se está ejecutando y sabemos que podemos mostrar
la pantalla del juego en lugar de la pantalla de inicio del juego.
Entonces, aquí podemos usar una variable de contenido, por ejemplo, y decir que nuestro contenido predeterminado es la pantalla de inicio del juego
y que
es el código React normal, como lo conoce también en React For Web, puede almacenar componentes como este en variables y luego
simplemente mostrar la variable hacia abajo allí, también es lo que ya hacemos
en la pantalla de inicio del juego con la salida confirmada. Por lo tanto, la pantalla de inicio de juegos es
nuestra salida
predeterminada, pero ahora podemos agregar una comprobación de if y verificar si el contenido es
true-ish, eso es lo que comprueba esta comprobación, por lo que será false-ish inicialmente si
no está definido, pero ahora si es cierto, puede establecer el número de usuario, así que verifiqué si el número de usuario
es verdadero-ish, si eso es verdadero-ish,
entonces sabemos que se seleccionó un número, será indefinido y por lo tanto falso inicialmente pero si es verdadero-ish, si
un se eligió el
número, luego configuraremos el contenido aquí para que sea la pantalla del juego y luego rendericemos lo que esté en el contenido
allí abajo y esa será la pantalla del juego o la pantalla de inicio del juego.
Entonces, cuando hacemos clic en iniciar juego aquí con otro elegido, esto debería cambiar aquí si y eso es lo importante, si nos aseguramos de
que el controlador de inicio del
juego se pueda activar desde dentro de la pantalla de inicio del juego. Ahora para eso, usamos un patrón React predeterminado
de pasar una referencia a este controlador a ese componente, tal vez en el accesorio onStartGame, que me
suena como un nombre apropiado. Reenviamos el controlador de inicio del
juego, solo la referencia sin paréntesis aquí, solo una referencia, un puntero en esta función y onStartGame ahora
es una propiedad que podemos usar en la pantalla de inicio del juego.
Así que aquí en la pantalla de inicio del juego, cuando hacemos clic en el botón de inicio del juego aquí, quiero activar ese accesorio
al final.
Entonces, aquí tengo onPress y, al final, quiero ejecutar onStartGame y reenviar aquí el número seleccionado actualmente, que se
administra en la pantalla de inicio del juego.
Así que aquí, reenvío esto a onStartGame y onStartGame está vinculado al controlador de inicio del juego que
espera y luego recibe ese número seleccionado.
Así es como nos aseguramos de que al hacer clic en ese botón para iniciar la pantalla del juego se active este método o esta función aquí
y cuando se activa
esta función, establecemos el número de usuario, esto asegura que el contenido sea la
pantalla del juego y, por lo tanto, deberíamos ver La pantalla del juego. Ahora, una pieza que falta es que
en la pantalla del juego, necesito la elección del usuario para generar mi número aleatorio inicial y excluir esa elección del
usuario correctamente para ese primer número aleatorio y, por lo tanto, debemos pasar una propiedad
llamada elección del usuario a la pantalla del juego. Entonces, podemos agregar el accesorio de elección del usuario aquí
y pasar el número de usuario, que es el estado que estamos administrando en el componente de la aplicación,
que es el número seleccionado que estamos almacenando en el estado
aquí, pasarlo a la pantalla del juego.
Así que espero que el flujo de datos sea claro, obtenemos ese número seleccionado de la pantalla de inicio del juego cuando se presiona ese botón,
se presiona el botón de inicio del juego, luego lo almacenamos
en el estado del componente de la aplicación aquí en el estado de número de uso con el ayuda para establecer
el número de usuario y luego usamos ese número de usuario para pasarlo a la pantalla del juego, que solo se muestra si
tenemos números de usuario, por lo que si el juego se está ejecutando, si el juego se inició de modo que
en la pantalla del juego, podemos usar el número de usuario que se recibe en el accesorio de elección del usuario para luego generar el
nuevo número aleatorio que la computadora adivinó donde esta elección del usuario, este número de usuario está excluido, de modo que para la primera suposición
de la computadora, la computadora no puede adivina al instante el número de usuario. Hablamos mucho, guardemos todo eso y
echemos un vistazo.
Ingresemos 55 y confirmemos y haga clic en iniciar juego y no podemos encontrar una variable en iniciar juego.
Entonces, el problema aquí es que ejecuto, sí, eso debería ser accesorios en el juego de inicio aquí, en el botón
de inicio del juego en el componente de inicio del juego porque, por supuesto, es una
propiedad que estamos obteniendo, no es
una función definida aquí, está
definida en los accesorios, es este accesorio al final.
Pequeño error, intentemos nuevamente después de
arreglar esto, haga clic en iniciar juego
y se ve bien.
Ahora vemos que
los oponentes adivinan y podemos dar algunas pistas
aquí que en este momento no tienen ningún efecto pero que pronto tendrán un efecto y, por lo tanto, estamos en la siguiente pantalla, estamos
en la pantalla del juego.
Ahora asegurémonos de que realmente podamos darle algunas pistas a la computadora y asegurarnos de que la computadora tenga
la oportunidad de resolver esto y adivinar nuestro número.