Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React Native

Diseños Comunes de App React Native: Página de Calendario

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Common React Native App Layouts.
Common React Native App Layouts: Gallery Page

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

En esta serie, aprenderás cómo usar React Native para crear diseños de página comúnmente utilizados en aplicaciones móviles. Los diseños que estarás creando no serán funcionales---en su lugar, el principal enfoque de esta serie es que te ensucies las manos en diseñar contenido en tus apps React Native.

Si eres nuevo diseñando apps React Native o estilizando en general, revisa mi tutorial previo:

Para seguir esta serie, te reto a intentar recrear cada pantalla por ti mismo, antes de que leas mis instrucciones paso a paso en el tutorial. ¡Realmente no te beneficiarás mucho de este tutorial solo leyéndolo! Primero intenta antes de buscar las respuestas aquí. Si tienes éxito en hacer que luzca como la pantalla original, compara tu implementación con la mía. ¡Después decide por ti mismo cuál es mejor!

En esta segunda parte de la serie, crearás la siguiente página de calendario:

calendar page

Las apps de calendario son usadas para dar seguimiento a eventos y citas agregadas por el usuario. Encontrarás diferentes variaciones, pero la mayoría de ellas tendrán los mismos elementos como un calendario físico tendría: el mes y año actuales, los días del mes, y los eventos o citas agregadas por el usuario.

Aquí hay un par de ejemplos de este tipo de diseño:

google calendar
android calendar

Configuración de Proyecto

El primer paso, por supuesto, es configurar un nuevo proyecto React Native:

Una vez que el proyecto es configurado, abre el archivo index.android.js y reemplaza el código por defecto con el siguiente:

Crea una carpeta src/pages y crea un archivo Calendar.js dentro.

También necesitarás el paquete react-native-vector-icons. Esto es usado específicamente para los iconos de navegación así como otros iconos que serán necesarios en la página.

Abre el archivo android/app/build,gradle y agrega una referencia al paquete:

Haz lo mismo con el archivo android/settings.gradle agregando lo siguiente al fondo:

Abre android/app/src/main/java/com/react-native-common-screens/MainApplication.java e importa el paquete:

Por último, inicializa el paquete:

Creando la Página de Calendario

OK, ahora que haz intentado codificar el diseño tu mismo (sin trampa, ¿verdad?), te mostraré cómo construí mi implementación.

Primero, pensé que esto sería lo más difícil de implementar, pero créeme, realmente no es tan complicado mientras ya conozcas los básicos. Hay un par de oportunidades aquí para usar código JavaScript para ayudar con la generación.

Comienza incluyendo todos los componentes y paquetes que necesitarás:

Esta vez hay un nuevo paquete que aún no has instalado, y es lodash. Realmente no necesitarás toda la librería lodash, solo la función range. Esta es usada para generar un arreglo de números basado en un rango específico. Puedes instalar solo esta función ejecutando npm install --save lodash.range en tu terminal.

Agrega el código de inicio para crear páginas:

El encabezado tiene tres elementos en el: el botón para regresar a la página anterior, el título de la página actual, y el texto mostrando una representación amigable para humanos de la fecha actualmente seleccionada.

calendar page initial look

header tiene un flexDirection de row así que cada header_item está apilado horizontalmente. El mismo valor flex es asignado a cada uno de ellos para que consuman cantidades iguales de espacio. text_center y text_right son usados para alinear el texto dentro de esos header_items al centro y derecha. Esto es hecho porque por defecto están alineados hasta la izquierda de su contenedor.

Una vez que los estilos han sido agregados, debería ahora lucir así:

calendar page styled header

Después está el calendario como tal, que es dividido en tres partes: el encabezado, los días de la semana y los días del calendario:

El encabezado del calendario permite al usuario cambiar el año y el mes.

Hay al menos dos maneras en que esto puede ser implementado. El primer método es tratar a cada elemento como un elemento individual y aplicar justifyContent: 'space-between' a su contenedor: El segundo método es agrupar todos los elementos que tiene que ver con el año y agrupar aquellos que tiene que ver con el mes.

El segundo método es el que está aplicado abajo. Semánticamente hablando, esto tiene mucho más sentido porque el botón para navegar hacia atrás un año, el año mismo y el botón para avanzar están todos relacionados, así que puedes tratarlos como una sola cosa poniéndolos en el mismo contenedor. Lo mismo es verdad con los controles de mes.

calendar page added calendar header

Desde ahí, puedes aplicar la misma técnica para esos dos grupos de componentes en la misma línea. Para agregar espacios entre dos botones (atrás y adelante) y la etiqueta, usamos justifyContent: 'space-between'. Usamos alignItems: 'center' para empujar todos los elementos dentro d este hacia el centro. Finalmente, agregamos padding izquierdo y derecho para agregar más espacio entre los dos grupos.

calendar page added calendar header styles

Después, están los días de la semana. Usamos una función para generar estos porque es mejor usar algún código JavaScript para generar todos los elementos.

Así que en lugar de tener siete componentes View o Text generando cada día de la semana, puedes solo tener un arreglo conteniendo los días de la semana. Puedes entonces iterar a través de esos días usando la función Array.map(). Para cada iteración, genera un componente Text que muestra el día.

Nota que en el código de arriba, la función toUpperCase() es usada para convertir todas las letras de cada día a mayúsculas. React Native no viene con la propiedad CSS text-transform, así que esta es la única manera de lograr letras mayúsculas aparte de usar cadenas mayúsculas de manera manual.

calendar page added calendar week days

Aquí está el estilo para el encabezado del calendario:

calendar page styled calendar week days

Los días del calendario también usan una función para generar los días:

La función renderWeeks() usa la función range() en lodash para generar un arreglo conteniendo los días del último mes y los días del mes actual. Esos dos arreglos son entonces combinados.

Sin embargo, no puedes usar directamente el arreglo resultante como la fuente de información para los días del calendario. Eso es porque si simplemente ciclar a través de los elementos y sacas un componente Text para cada día, no habrá ninguna distinción entre cada semana. Ya sabes que para hacer cada día del calendario en línea, necesitas aplicar flexDirection: 'row' a su contenedor. Así que aplicarlo a un contenedor individual resultará en tener todos los días del calendario colocados en una línea individual.

Esto significa que necesitas tener un contenedor separado para cada semana. La pregunta es cómo. De nuevo, hay al menos dos maneras de lograr esto.

El primer método es tener una variable que almacene cuántos días se han producido y después agregar una declaración condicional que generará un <View> de apertura cada vez que la variable contenga 0 y un </View> de cierre cada vez que sea 7. Una vez que es 7, se reiniciala a 0. Este es el método más sencillo.

Pero usaré un método diferente aquí. Debajo, la función getWeeksArray() es usada para implementarla. Esta función acepta el arreglo de días y los agrupa en arreglos conteniendo siete días cada uno. Desde ahí, puedes ciclar a través de cada uno de esos arreglos para generar el contenedor de la semana. Después para cada iteración, ciclas de nuevo a través de los días dentro de la semana para generar los días. Esto es lo que hace la función renderDays().

Aquí está la función getWeeksArray():

Y aquí está la función renderDays():

calendar page added calendar days

Agrega el estilo para cada semana (week_days) y día (day y day_text):

calendar page add calendar days styling

Después está la nota agregada por el usuario para el día actualmente seleccionado y la fecha y hora seleccionada. De nuevo, es mejor agrupar elementos de acuerdo a su propósito en vez de cómo son colocados en la página. Ciertamente todos estos elementos están relacionados, así que los colocamos dentro del mismo contenedor. Pero en un vistazo más cercano, comenzarás a ver que puedes agruparlos más allá: la nota actual y la fecha seleccionada. Con eso en mente, aquí está el marcado con el que terminarás:

calendar page add notes

La fecha seleccionada ocupa menos espacio que la nota, así que puedes aplicar un valor flex más grande a las notas. flex: 3 y flex: 1 son usados en este caso, lo que significa que las notas consumen 3/4 del espacio disponible y la fecha seleccionada consume 1/4. También puedes usar decimales (0.75 y 0.25) si eso tiene más sentido para ti. Lo que es importante es elegir un estándar y apegarse a el. alignItems: 'flex-end' es usado en notes_selected_date de manera que todos sus hijos serán alineados a la derecha. Esto es necesario porque por defecto están alineado a la izquierda.

calendar page added styling to logs

Por último, agregamos los registros, que son muy similares a aquellos en el tutorial anterior, ¡así que te lo dejaré para que descifres cómo se logra!

Aquí están los estilos:

Conclusión

¡Eso es! En este tutorial has creado una página de calendario. Haz hecho un agradable calendario para una app, y he te he mostrado cómo puede ser usado código JavaScript para compensar algunas limitaciones de Flexbox.

Como has visto, necesitamos una manera de limitar el número de días en una fila a solo siete días. Flexbox no tiene una manera específica para esto, así que usamos JavaScript para reconstruir el arreglo original de días de tal manera que estén divididos en grupos conteniendo siete días cada uno. Desde aquí, todo lo que tuvimos que hacer fue envolver cada grupo dentro de un View y después aplicar flexDirection: 'row' para hacer que cada uno de ellos se genere en su propia fila.

En un tutorial futuro, aprenderás cómo implementar el diseño comúnmente usado en páginas de galería. Mientras tanto, revisa algunos de nuestros otros tutoriales sobre React Native y Flexbox.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.