1 00:00:02,310 --> 00:00:08,400 Por supuesto, depende de usted cómo desea diseñar este texto de confirmación aquí o en realidad no 2 00:00:08,400 --> 00:00:15,630 debe ser solo texto, debe ser una vista con el texto allí que genera nuestro número y luego un botón para 3 00:00:15,630 --> 00:00:21,780 iniciar el juego y definitivamente puede pausar el video en este punto y crea tu propio estilo allí, 4 00:00:21,780 --> 00:00:23,050 tu propio diseño. 5 00:00:23,100 --> 00:00:27,510 Tengo un cierto diseño en mente que ciertamente diferirá del tuyo, pero no hay 6 00:00:27,510 --> 00:00:32,430 una decisión incorrecta o correcta aquí, así que definitivamente toma esto como otra oportunidad para crear tu 7 00:00:32,430 --> 00:00:36,990 propio diseño para esto y un botón que en este momento no hace nada pero eso 8 00:00:36,990 --> 00:00:42,520 es lo que permitiría al usuario iniciar el juego y después de una breve pausa que puede usar para 9 00:00:42,520 --> 00:00:45,370 pausar el video, implementaré mi solución junto con usted. 10 00:00:45,420 --> 00:00:49,020 Así es como creo que esto se vería bien. 11 00:00:49,050 --> 00:00:55,640 Quiero tener una vista para poder configurar un contenedor general alrededor de eso o, de hecho, tal vez no una vista, pero 12 00:00:55,650 --> 00:00:57,720 ¿por qué no usamos nuestra tarjeta aquí? 13 00:00:57,720 --> 00:00:59,680 Eso parece una buena idea. 14 00:00:59,730 --> 00:01:04,980 Ahora esa tarjeta, si la miramos, no tiene margen y quiero tener un espacio entre esa tarjeta 15 00:01:04,980 --> 00:01:07,950 en la parte superior y mi tarjeta de resumen. 16 00:01:08,070 --> 00:01:15,540 Por lo tanto, aquí, le daré a este un estilo separado aquí en mi hoja de estilo, en 17 00:01:15,540 --> 00:01:21,570 la pantalla de inicio del juego, nombraré este contenedor de resumen, el nombre como 18 00:01:21,570 --> 00:01:35,400 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í 19 00:01:35,400 --> 00:01:44,710 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 20 00:01:44,710 --> 00:01:51,160 número en una especie de cuadro con un borde separado con esquinas redondeadas para que 21 00:01:51,310 --> 00:01:56,740 sea claramente visible o también más grande que el otro texto y, por 22 00:01:56,740 --> 00:02:04,070 lo tanto, aquí, agregaré una vista con un texto allí y en ese texto, tendré el número seleccionado, 23 00:02:04,620 --> 00:02:11,030 pero ahora eso ver y el texto debería tener un estilo especial y como planeo 24 00:02:11,030 --> 00:02:12,690 reutilizarlo, lo tomaré 25 00:02:12,800 --> 00:02:24,080 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 26 00:02:25,300 --> 00:02:33,850 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 27 00:02:34,090 --> 00:02:41,880 aquí, así que configuremos una hoja de estilos también con Stylesheet. crear allí y luego en este componente, devolveré este 28 00:02:42,360 --> 00:02:49,320 elemento de vista aquí con el número seleccionado que ahora, sin embargo, debe pasarse y espero que 29 00:02:49,530 --> 00:02:55,140 lo coloque entre las etiquetas de apertura y cierre de mi propio componente con 30 00:02:55,320 --> 00:02:57,800 la ayuda de accesorios niños. 31 00:02:57,870 --> 00:03:02,270 Ahora, este contenedor, por supuesto, es algo que puede configurar 32 00:03:02,370 --> 00:03:11,590 libremente, agregaré solo un estilo de contenedor, el nombre del contenedor aquí, donde creo que un ancho de borde de dos podría verse 33 00:03:11,650 --> 00:03:20,650 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 34 00:03:20,680 --> 00:03:23,670 color de acento, veremos cuál se ve mejor. 35 00:03:23,770 --> 00:03:33,400 Entonces, importemos colores de constantes / Colores y para el color del borde, luego usemos el acento de colores por 36 00:03:33,400 --> 00:03:39,670 ahora y veamos cómo se ve. Un poco de relleno para que el número 37 00:03:39,670 --> 00:03:42,070 no esté directamente en los bordes 38 00:03:42,080 --> 00:03:49,630 de esa caja circundante, no se sienta directamente al lado del borde, un radio de borde de 10 para 39 00:03:49,630 --> 00:03:50,440 tener 40 00:03:50,440 --> 00:03:56,940 algunos bordes redondeados, algunas esquinas redondeadas discúlpeme, por cierto si lo desea desea apuntar a esquinas individuales, 41 00:03:57,120 --> 00:04:06,780 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 42 00:04:06,780 --> 00:04:13,980 configuración del usuario con respecto a si se trata de un idioma de izquierda a derecha o de 43 00:04:13,980 --> 00:04:22,820 derecha a izquierda para que pueda apuntar a todos también esquinas o establezca un radio para todas las esquinas con radio de borde 44 00:04:23,340 --> 00:04:32,120 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 45 00:04:32,300 --> 00:04:40,340 inferior alrededor de este contenedor aquí y también importante, centre el texto allí alinee el centro de elementos y justifique el 46 00:04:40,340 --> 00:04:48,740 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 47 00:04:48,740 --> 00:04:57,230 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 48 00:04:57,230 --> 00:05:04,280 destacar realmente y más tarde , también usaremos una fuente personalizada. Y luego, esta vista aquí obtiene el estilo 49 00:05:04,280 --> 00:05:13,830 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 50 00:05:13,830 --> 00:05:19,740 de inicio del juego, por lo que simplemente agregamos esa importación y lo que estamos haciendo 51 00:05:19,740 --> 00:05:25,000 aquí es bastante normal, que tienes múltiples componentes de los cuales compones tu aplicación. 52 00:05:25,160 --> 00:05:31,560 Así que ahora podemos usar el contenedor de números en el componente de la pantalla de inicio del juego, agregarlo aquí debajo 53 00:05:32,010 --> 00:05:38,160 de este texto y en el contenedor de números, obtenemos el contenido aquí con props children, lo imprimimos con props children, 54 00:05:38,220 --> 00:05:41,190 eso significa que tenemos que pasarlo entre las etiquetas 55 00:05:41,250 --> 00:05:44,370 de apertura y cierre, así que aquí, reenviamos el número seleccionado. 56 00:05:44,580 --> 00:05:48,710 Ahora, esa es solo mi sugerencia de cómo podríamos diseñar esto, pero me gusta 57 00:05:48,900 --> 00:05:54,630 el estilo y luego, por el momento, agregaré un botón aquí que es una etiqueta de cierre automático, el botón 58 00:05:55,080 --> 00:06:02,890 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 59 00:06:02,940 --> 00:06:08,820 lo que obtenemos y no parece demasiado feo, diría. Aún así, hay dos cosas que quiero 60 00:06:08,820 --> 00:06:15,060 cambiar, este texto aquí debe estar centrado y este cuadro con el número no debe ser 61 00:06:15,330 --> 00:06:22,120 tan ancho como el cuadro que lo rodea, pero debe ser tan ancho como el número lo necesite. 62 00:06:22,860 --> 00:06:30,260 Ahora para hacer que ambos funcionen, iré a mi tarjeta que contiene todo el contenido aquí y con eso, quiero 63 00:06:30,260 --> 00:06:33,900 decir que voy al estilo en la pantalla de 64 00:06:34,040 --> 00:06:35,480 inicio del juego 65 00:06:35,750 --> 00:06:45,400 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 66 00:06:45,400 --> 00:06:52,280 usar el valor predeterminado que sería estirado y ahora esto se centra automáticamente y el cuadro es tan 67 00:06:52,280 --> 00:06:54,610 ancho como el número lo requiere. 68 00:06:54,700 --> 00:06:57,360 Ahora que no se ve muy mal, una 69 00:06:57,370 --> 00:07:03,160 última cosa que acabo de notar es que cuando confirmamos una entrada, también quiero usar la API del 70 00:07:03,190 --> 00:07:09,940 teclado para descartar el teclado, de modo que tan pronto como presionamos confirmar aquí, también cerremos el teclado y ahora 71 00:07:10,180 --> 00:07:12,220 tenemos una buena salida aquí. 72 00:07:12,220 --> 00:07:16,180 Ahora con eso, tenemos una apariencia de base sólida, diría, podemos elegir un 73 00:07:16,180 --> 00:07:22,210 número, estamos haciendo una validación aproximada para asegurarnos de que tenemos un número válido y el siguiente paso es hacer 74 00:07:22,210 --> 00:07:28,540 que este botón de inicio del juego funcione y cambiamos lo que vemos en la pantalla aquí para que el juego 75 00:07:28,540 --> 00:07:34,540 esté ejecutando la pantalla donde la computadora ahora está haciendo conjeturas y luego nos aseguramos de darle al usuario la 76 00:07:34,540 --> 00:07:37,850 oportunidad de decir si los números deberían ser mayores o 77 00:07:37,990 --> 00:07:41,770 menores y luego punto están terminados y muestran un juego en pantalla.