1 00:00:02,220 --> 00:00:04,630 Entonces, ahora que tenemos un encabezado, podemos 2 00:00:04,650 --> 00:00:10,950 continuar y continuar con la parte donde los usuarios pueden ingresar un número que la computadora debe adivinar 3 00:00:10,950 --> 00:00:15,920 a partir de entonces. Y para esto aquí en la aplicación. js, debajo del encabezado, 4 00:00:15,920 --> 00:00:22,790 por supuesto, quiero tener el área de entrada del usuario. Ahora, como antes, manejaré esto en un 5 00:00:22,790 --> 00:00:29,780 componente separado y no aquí en la aplicación. js para mantener todos los componentes relativamente esbeltos y podríamos 6 00:00:29,780 --> 00:00:34,850 crear este componente aquí en la carpeta de componentes, eso no estaría mal, pero como 7 00:00:34,850 --> 00:00:42,110 ahora trabajaré en un componente que es esencialmente responsable de todo lo que vemos en la pantalla además del encabezado, trato 8 00:00:42,140 --> 00:00:47,600 este componente como una especie de componente especial, lo llamaré una pantalla y lo guardaré en 9 00:00:47,600 --> 00:00:53,000 una carpeta de pantallas porque el juego terminado esencialmente tendrá tres pantallas diferentes: una para configurar 10 00:00:53,000 --> 00:00:58,040 e iniciar el juego, una cuando el juego está corriendo y uno cuando el 11 00:00:58,100 --> 00:01:04,520 juego termina y quiero tener estos componentes especiales que técnicamente son componentes totalmente normales pero que cumplen un propósito 12 00:01:04,730 --> 00:01:10,790 especial, quiero que se almacenen en una carpeta separada y esa es solo mi decisión personal de diseño 13 00:01:10,790 --> 00:01:16,790 aquí, usted no No es necesario almacenarlos. Técnicamente no hay razón para hacerlo o no, React 14 00:01:16,790 --> 00:01:18,750 Native simplemente no le importa. 15 00:01:18,770 --> 00:01:24,200 Así que aquí lo guardaré allí y nombraré esta StartGameScreen. j para dejar en claro en 16 00:01:24,200 --> 00:01:30,740 el nombre que este es un componente especial para mí, pero como dije, técnicamente es un componente 17 00:01:30,770 --> 00:01:37,580 normal y, por lo tanto, importamos React from React y también importaremos algunas cosas de React Native, por 18 00:01:37,880 --> 00:01:44,210 supuesto, y nosotros Ya puedo decir que sin duda necesitaremos una vista porque probablemente no puedas construir 19 00:01:44,210 --> 00:01:49,060 ningún componente, bueno, puedes pero no tantos componentes que puedes construir sin vistas. 20 00:01:49,160 --> 00:01:54,620 Importaremos la vista aquí y definitivamente también necesitaremos una hoja de estilo para algunos estilos y veremos qué 21 00:01:54,620 --> 00:02:02,870 más necesitamos, sin duda también necesitaremos un texto, así que ya podemos agregarlo. Ahora con esto, crearé una nueva constante 22 00:02:03,500 --> 00:02:10,130 aquí, inicie la pantalla del juego, que es un componente funcional similar a 23 00:02:10,130 --> 00:02:19,330 este, donde tendremos un objeto de estilos con Stylesheet. crear, así y donde luego exporto la pantalla de inicio del juego de esa 24 00:02:19,450 --> 00:02:27,430 manera y podría guardar esto como una especie de plantilla para cualquier componente nuevo que agregue porque el 90% de los componentes personalizados que construye 25 00:02:27,430 --> 00:02:32,890 en React Native se ven básicamente así, importa React, importa algunas cosas de React Native, define su 26 00:02:32,890 --> 00:02:39,280 componente, el nombre difiere, por supuesto, tiene su objeto de estilos y lo exporta, eso es casi siempre lo 27 00:02:39,310 --> 00:02:40,740 mismo, por lo 28 00:02:40,780 --> 00:02:46,740 que podría guardarlo como una plantilla si lo desea. Sin embargo, no quiero hacerlo aquí, así que 29 00:02:46,740 --> 00:02:52,800 continuaré trabajando en el componente en sí y la pregunta ahora es, ¿qué representamos en esta 30 00:02:52,800 --> 00:02:59,760 pantalla de inicio del juego? ¿Cómo debería ser? Al final, tendré 31 00:02:59,760 --> 00:03:06,960 una vista envolvente que rodea toda mi pantalla porque creo que eso tiene 32 00:03:06,960 --> 00:03:14,040 sentido, nos permite configurar un estilo general. Agregaré nuevamente una propiedad de pantalla aquí a este objeto de hoja de estilo que 33 00:03:14,040 --> 00:03:18,420 puedo hacer, no chocará con el de la aplicación. js, también podríamos haber elegido 34 00:03:18,420 --> 00:03:23,760 diferentes nombres, estos dos simplemente no están relacionados porque estos son objetos independientes de 35 00:03:23,760 --> 00:03:29,790 JavaScript al final administrados en archivos independientes. Para que podamos repetir nombres aquí o elegir nombres diferentes, buscaré un nombre 36 00:03:29,790 --> 00:03:36,390 similar aquí, nombraré esta pantalla y configuraré un estilo general para esta vista circundante aquí. El estilo general es que dije esto para flexionar uno 37 00:03:36,390 --> 00:03:42,810 para que ocupe todo el espacio que pueda obtener, lo que significa que, dado que lo agregaré debajo del encabezado, 38 00:03:42,810 --> 00:03:47,760 ocupará todo el espacio debajo del encabezado, tanto vertical como horizontalmente y además de esto 39 00:03:48,780 --> 00:03:55,350 , También quiero agregar algo de relleno aquí de 10 para que el contenido no se asiente directamente en los 40 00:03:55,350 --> 00:04:01,470 bordes de esta pantalla, pero hay un poco de espacio a la izquierda, derecha, arriba y abajo y 41 00:04:01,470 --> 00:04:03,860 agregaré elementos de alineación al centro. 42 00:04:03,930 --> 00:04:09,900 Tenga en cuenta que, por defecto, cada vista usa flexbox y por defecto usa la columna de dirección de flexión, 43 00:04:09,930 --> 00:04:13,960 alinee los elementos y los coloca a lo largo del eje transversal, por 44 00:04:13,980 --> 00:04:18,240 lo que dado que la dirección predeterminada es columna, el eje transversal se deja 45 00:04:18,240 --> 00:04:20,000 de izquierda a derecha, por 46 00:04:20,070 --> 00:04:25,380 lo que es un eje horizontal, entonces esto alineará los elementos en el centro horizontalmente pero no verticalmente. 47 00:04:25,380 --> 00:04:31,200 Allí usamos el valor predeterminado de justifyContent flex start, pero como 48 00:04:31,200 --> 00:04:39,210 uso el valor predeterminado, no necesito configurarlo. Así que lo dejaremos como está aquí y ahora asignaremos este estilo aquí a esta vista y el formato automático 49 00:04:39,210 --> 00:04:41,600 cerró mi etiqueta aquí, lo que por supuesto no quiero hacer, así 50 00:04:41,760 --> 00:04:42,830 que déjenme revertir esto 51 00:04:43,140 --> 00:04:47,070 y ahora tenemos esa vista para nuestro pantalla de juego Ahora para ver si funciona, 52 00:04:47,070 --> 00:04:49,220 solo mostraré un texto aquí, la pantalla 53 00:04:49,320 --> 00:04:56,110 del juego, solo un marcador de posición ficticio. Vuelva a formatear eso y ahora en la aplicación. js, usemos 54 00:04:56,530 --> 00:05:05,880 esa pantalla importando la pantalla de inicio de juegos desde la carpeta de pantallas 55 00:05:05,880 --> 00:05:09,820 y allí, inicie la pantalla del 56 00:05:09,890 --> 00:05:19,580 juego y luego simplemente agréguela aquí, así. Si guardamos esto, vemos la pantalla del juego aquí y también en Android, por lo que 57 00:05:19,650 --> 00:05:20,250 funciona. 58 00:05:20,250 --> 00:05:27,270 Estamos usando este segundo componente separado que ahora usaremos como componente de pantalla completa básicamente o casi a pantalla 59 00:05:27,360 --> 00:05:28,420 completa, la 60 00:05:28,430 --> 00:05:30,420 parte debajo del encabezado al final.