Entonces, con eso, comencemos con nuestra aplicación aquí y hay varias formas de comenzar, por supuesto, quiero comenzar
primero
dejando caer este estilo de contenedor aquí en mi pantalla de inicio y, en cambio, quiero deshacerme del texto y todo aquí
y quiero comenzar agregando mi propio encabezado, por lo que esta barra
en la parte superior de la pantalla.
Ahora podemos construir esa barra por nuestra cuenta aquí, déjenme deshacerme de esa importación que no
necesitamos y la construiré no dentro de este componente de la aplicación sino en
un archivo de componente separado, en un componente personalizado separado porque y eso ya es algo muy importante
para eliminar,
al igual que en React para aplicaciones web, es una buena práctica dividir su aplicación en múltiples componentes que luego componen
juntos porque eso conduce a un código más manejable y reutilizable.
Así que agregaré una nueva carpeta, componentes, aunque el nombre depende de usted, puede nombrar esa carpeta como
desee y allí quiero tener un encabezado. archivo js para contener el componente de encabezado.
Allí, necesitamos importar React from React para que podamos usar React allí
y escribir código jsx y luego también necesitaremos algunos componentes de React Native porque nunca debes olvidar que estos son los
únicos componentes principales que puedes usar en el final.
No puede usar ningún elemento HTML web ni nada de eso,
necesita estas primitivas básicas que React Native le brinda.
Así que definitivamente necesitaremos una vista aquí y también un componente de texto y también un componente de hoja de estilo
y ahora con eso, podemos comenzar a construir nuestro encabezado.
Entonces, para esto, agregaré un encabezado constante que contenga mi componente funcional porque trabajaré con componentes funcionales solo en este
curso, usaremos ganchos en lugares donde necesitamos administrar el estado o los efectos secundarios y aquí,
lo haremos por supuesto, exporte este componente al final y también configure un objeto de estilo con una
hoja de estilo para que podamos diseñarlo al final.
Ahora creemos nuestro componente aquí, devolvamos algo aquí
y lo que quiero devolver
es al final una vista con el texto dentro de él y el texto debería
ser nuestro título.
Por lo tanto, entre la etiqueta de apertura y cierre aquí, generaré el título de accesorios para que nuestro
propio componente pueda recibir el título y lo envíe aquí. Y la vista que rodea el texto se usará para posicionar
el texto y para darle un poco de estilo, por lo que para diseñar nuestro encabezado porque los elementos de texto
en sí mismos también son estilizables, pero no en la misma medida que las vistas, las vistas realmente son un poco más
flexible con respecto a los estilos que puede asignar y con respecto a cómo se comportan
y, por lo tanto, siempre desea usar una vista para dicho contenedor circundante y para este estilo general que podría
tener su componente o partes de su componente.
Así que aquí, agregaré el accesorio de estilo y asignaré un estilo para mi objeto de estilos, un estilo que aún no hemos
creado allí, pero lo nombraré encabezado y también le daré al texto un accesorio de estilo y señalaré título de encabezado de estilos o lo que quiera nombrarlo porque,
como dije, también puede aplicar estilo al texto y aquí quiero tener algunos estilos específicos de texto
más adelante para asegurarme de que el texto se vea bien. Así que ahora aquí en la hoja de estilo, podemos comenzar
a diseñar nuestro encabezado y comenzaré con el encabezado en sí mismo, agregando un accesorio de encabezado y luego este objeto contendrá
estas definiciones de estilo para el encabezado, así que para este componente de vista aquí y allá de Por
supuesto, eres libre de experimentar con lo que quieras. Iré con un ancho del 100% para que tome
el ancho completo del dispositivo que podemos obtener o el ancho completo del componente principal para ser precisos, pero lo agregaré
de modo que el componente principal tome el ancho completo del dispositivo y, por lo tanto, ,
esto también tomará todo el ancho del dispositivo al final. Asigne una altura y allí, puede experimentar con
diferentes valores, encontré que 90 parece bastante decente y, por lo tanto, seguiré con eso.
Nota al margen, por ahora optimizaré para estas pantallas que tengo aquí, en el próximo módulo del
curso, profundizaremos en cómo puede ajustar sus vistas y su código para diferentes dispositivos, tanto en cuanto a su tamaño
como a la plataforma su código se está ejecutando Por ahora, no tendremos ninguna diferencia allí, nos
ajustaremos también en nuestra aplicación para verse bien en estos dos emuladores, pero nuevamente, retomaré esto más adelante.
Entonces, una altura de 90, un relleno hasta la parte superior de 36 para tener algo de espacio en la
parte superior y necesito agregar esto básicamente para hacer frente o cosas como la barra de estado aquí
o esta muesca aquí, por lo tanto, agrego esta parte superior del relleno y también quiero para
agregar un color de fondo aquí y ahora, por supuesto,
es totalmente libre de elegir el color que desee, preparé un color agradable, un código hexadecimal de un color que personalmente me
gusta y ese es # f7287b, que es un color bastante agradable en mi opinión como verás en un segundo.
Ahora también quiero centrar el título y, por lo tanto, usaré alinear elementos y justificar contenido
porque cada vista usa flexbox de forma predeterminada y, por lo tanto, alinear elementos y justificar contenido,
podemos controlar cómo se posicionan los elementos secundarios de la vista dentro de la vista y con el
centro para
alinear elementos y justificar el contenido también establecido en el centro, centramos todos los elementos secundarios o secundarios dentro de la
vista en el centro, tanto horizontal como verticalmente.
Ahora para el título
del encabezado, también quiero configurar algunos estilos para esto.
Entonces, el título del encabezado aquí, debería tener un color negro porque se ajustará a este color aquí y para que podamos leer el
texto y quiero establecer el tamaño de fuente en 18, digamos, para que tengamos esto
arreglado, un poco tamaño de fuente más grande aquí. Con eso, intentemos usar este encabezado y
usémoslo en la aplicación. archivo js aquí. Allí, tenemos esta vista
y esta vista no tiene estilo adjunto.
Voy a cambiar esto y configurar una vista de pantalla aquí y darle a esto una flexión de un atributo.
Ahora podemos asignar esto aquí y Flex One se asegurará de que esta vista tome todo el espacio que
pueda obtener y, dado que es la vista raíz de nuestra aplicación, eso significa que tomará todo el
ancho y la altura que pueda obtener, ocupará todo el espacio pantalla y, por lo tanto, dado que mi encabezado tiene un ancho
del 100%, ya que lo agregaré directamente dentro de esta vista que ahora está configurada para tomar el ancho y la altura
completos, este encabezado también tomará el ancho completo.
Así que ahora solo necesitamos agregar el encabezado aquí,
por supuesto, así que importa el encabezado / components / header, puede
omitir la extensión del archivo y luego simplemente agregar el encabezado como una etiqueta de cierre automático aquí, pero no olvide establecer un
accesorio de título porque recuerde que estamos generando el accesorio de título aquí entre las etiquetas
de texto, por lo que puede agregar un título aquí y lo nombraré adivinar un número porque de eso se trata nuestro juego.
Ahora, si guardamos esto, debería reconstruirse automáticamente y debería ver un encabezado que se ve así en el iPhone y así
en Android y diría que está bien para ambos dispositivos. Una vez más, exploraremos formas de cómo
puede ajustar el aspecto al dispositivo específico en el que se ejecuta su aplicación.