Entonces, ahora que tenemos un encabezado, podemos
continuar y continuar con la parte donde los usuarios pueden ingresar un número que la computadora debe adivinar
a partir de entonces. Y para esto aquí en la aplicación. js, debajo del encabezado,
por supuesto, quiero tener el área de entrada del usuario. Ahora, como antes, manejaré esto en un
componente separado y no aquí en la aplicación. js para mantener todos los componentes relativamente esbeltos y podríamos
crear este componente aquí en la carpeta de componentes, eso no estaría mal, pero como
ahora trabajaré en un componente que es esencialmente responsable de todo lo que vemos en la pantalla además del encabezado, trato
este componente como una especie de componente especial, lo llamaré una pantalla y lo guardaré en
una carpeta de pantallas porque el juego terminado esencialmente tendrá tres pantallas diferentes: una para configurar
e iniciar el juego, una cuando el juego está corriendo y uno cuando el
juego termina y quiero tener estos componentes especiales que técnicamente son componentes totalmente normales pero que cumplen un propósito
especial, quiero que se almacenen en una carpeta separada y esa es solo mi decisión personal de diseño
aquí, usted no No es necesario almacenarlos. Técnicamente no hay razón para hacerlo o no, React
Native simplemente no le importa.
Así que aquí lo guardaré allí y nombraré esta StartGameScreen. j para dejar en claro en
el nombre que este es un componente especial para mí, pero como dije, técnicamente es un componente
normal y, por lo tanto, importamos React from React y también importaremos algunas cosas de React Native, por
supuesto, y nosotros Ya puedo decir que sin duda necesitaremos una vista porque probablemente no puedas construir
ningún componente, bueno, puedes pero no tantos componentes que puedes construir sin vistas.
Importaremos la vista aquí y definitivamente también necesitaremos una hoja de estilo para algunos estilos y veremos qué
más necesitamos, sin duda también necesitaremos un texto, así que ya podemos agregarlo. Ahora con esto, crearé una nueva constante
aquí, inicie la pantalla del juego, que es un componente funcional similar a
este, donde tendremos un objeto de estilos con Stylesheet. crear, así y donde luego exporto la pantalla de inicio del juego de esa
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
en React Native se ven básicamente así, importa React, importa algunas cosas de React Native, define su
componente, el nombre difiere, por supuesto, tiene su objeto de estilos y lo exporta, eso es casi siempre lo
mismo, por lo
que podría guardarlo como una plantilla si lo desea. Sin embargo, no quiero hacerlo aquí, así que
continuaré trabajando en el componente en sí y la pregunta ahora es, ¿qué representamos en esta
pantalla de inicio del juego? ¿Cómo debería ser? Al final, tendré
una vista envolvente que rodea toda mi pantalla porque creo que eso tiene
sentido, nos permite configurar un estilo general. Agregaré nuevamente una propiedad de pantalla aquí a este objeto de hoja de estilo que
puedo hacer, no chocará con el de la aplicación. js, también podríamos haber elegido
diferentes nombres, estos dos simplemente no están relacionados porque estos son objetos independientes de
JavaScript al final administrados en archivos independientes. Para que podamos repetir nombres aquí o elegir nombres diferentes, buscaré un nombre
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
para que ocupe todo el espacio que pueda obtener, lo que significa que, dado que lo agregaré debajo del encabezado,
ocupará todo el espacio debajo del encabezado, tanto vertical como horizontalmente y además de esto
, También quiero agregar algo de relleno aquí de 10 para que el contenido no se asiente directamente en los
bordes de esta pantalla, pero hay un poco de espacio a la izquierda, derecha, arriba y abajo y
agregaré elementos de alineación al centro.
Tenga en cuenta que, por defecto, cada vista usa flexbox y por defecto usa la columna de dirección de flexión,
alinee los elementos y los coloca a lo largo del eje transversal, por
lo que dado que la dirección predeterminada es columna, el eje transversal se deja
de izquierda a derecha, por
lo que es un eje horizontal, entonces esto alineará los elementos en el centro horizontalmente pero no verticalmente.
Allí usamos el valor predeterminado de justifyContent flex start, pero como
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
cerró mi etiqueta aquí, lo que por supuesto no quiero hacer, así
que déjenme revertir esto
y ahora tenemos esa vista para nuestro pantalla de juego Ahora para ver si funciona,
solo mostraré un texto aquí, la pantalla
del juego, solo un marcador de posición ficticio. Vuelva a formatear eso y ahora en la aplicación. js, usemos
esa pantalla importando la pantalla de inicio de juegos desde la carpeta de pantallas
y allí, inicie la pantalla del
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
funciona.
Estamos usando este segundo componente separado que ahora usaremos como componente de pantalla completa básicamente o casi a pantalla
completa, la
parte debajo del encabezado al final.