Advertisement
  1. Code
  2. React Native

Diseños de aplicaciones nativas de Common React: Página de inicio de sesión

This post is part of a series called Common React Native App Layouts.
Common React Native App Layouts: News Feed

Spanish (Español) translation by Esther (you can also view the original English article)

En esta serie, aprenderás a utilizar React Native para crear diseños de página comúnmente utilizados en aplicaciones para móviles. Los diseños que crearás no serán funcionales, pero el objetivo principal de esta serie es ensuciarse las manos al diseñar el contenido de las aplicaciones de React Native.

Si eres nuevo en el diseño de aplicaciones de React Native o en el estilo en general, mira mi tutorial anterior:

Para seguir con esta serie, te reto a que intentes recrear cada pantalla por ti mismo primero, antes de que leas mis instrucciones paso a paso en el tutorial. ¡Realmente no te beneficiarás mucho de este tutorial con solo leerlo! Inténtalo primero antes de buscar las respuestas aquí Si logras que se parezca a la pantalla original, compara tu implementación con la mía. ¡Entonces decide por ti mismo cuál es mejor!

En esta primera parte de la serie, crearás la siguiente página de acceso:

login page samplelogin page samplelogin page sample

La página de inicio de sesión se utiliza comúnmente como página inicial para las aplicaciones que requieren que los usuarios tengan una cuenta.

Aquí hay un par de ejemplos de este tipo de diseños en la naturaleza:

Soundcloud login pageSoundcloud login pageSoundcloud login page

Configuración del proyecto

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

Una vez configurado el proyecto, abre el archivo index.android.js y sustituye el código predeterminado por el siguiente:

Crea una carpeta src/pages y crea un archivo Login.js dentro de ella.

También necesitarás el paquete de react-native-vector-icons. Esto se utiliza específicamente para hacer el icono de Facebook para el botón de inicio de sesión de Facebook.

Abre el archivo androide/app/build.gradle y añade una referencia al paquete:

Has lo mismo con el archivo androide/settings.gradle añadiendo lo siguiente al final:

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

Por último, inicia el paquete:

Crear la página de inicio de sesión

Bien, ahora que has intentado codificar el diseño tú mismo (sin trampas, ¿verdad?), te mostraré cómo construí mi implementación. Abre el archivo src/pages/Login.js e importa las cosas que necesites:

Además de los componentes predeterminados de React y del paquete react-native-vector-icons, también tienes que incluir tres componentes personalizados:

El primero es el Container (src/componentes/contenedor.js), cuyo trabajo es añadir un margen inferior a lo que envuelve. Suena trivial, y sí, en realidad puedes usar View y añadir los mismos estilos cada vez que quieras usarla. La ventaja que esto ofrece es que no tienes que aplicar los mismos estilos a una View varias veces, y también te permite reutilizar el componente cada vez que necesites añadir un margen inferior a algo.

El componente Button (src/componentes/Button.js), como su nombre indica, se utiliza para crear botones. Si está presente, escupe cualquier componente hijo que se añada en su interior. De lo contrario, se produce un componente Text que muestra el texto dentro del botón. También se añade un estilo por defecto, pero no se usará si noDefaultStyles presente en el accesorio. Los estilos de botones únicos pasados de los accesorios también son opcionales.

Por último, está el componente Label (src/componentes/Label.js), que es básicamente un componente Text con algún estilo predefinido.

Ahora puedes pasar a la página de inicio de sesión actual. Dentro del método render(), envuelve todo en un componente ScrollView. Esto es muy importante si quieres que tu aplicación sea capaz de atender a todo tipo de dimensiones de dispositivos y orientaciones de pantalla.

La mayoría de las veces, no importa la poca altura que creas que va a consumir tu contenido, siempre habrá un dispositivo que no será capaz de mostrarlo completamente. Por lo tanto, la necesidad de barras de desplazamiento para desplazar el contenido

A continuación, inicia los estilos:

Aplica los siguientes estilos al ScrollView flexDirection es opcional, pero es una buena práctica definirlo explícitamente para que los futuros desarrolladores sepan exactamente cómo se presenta el contenido principal de la aplicación con solo echar un vistazo al código.

Mirando la captura de pantalla de antes, la primera pieza de contenido que quieres añadir es la que está en la parte superior, y es el botón de contraseña olvidada. Ten en cuenta que los accesorios de la onPress se suministran porque el underlayColor no se aplicará realmente si no se suministra ninguna función para cuando se pulse el botón.

Los estilos utilizados para ello son bastante auto-explicativos excepto para el alignSelf: 'flex-end'. Esto le dice a React Native que posicione el elemento al final de la línea actual. alignSelf es el equivalente de alignItems para especificar la alineación del elemento en sí y no de sus hijos. El uso de flex-end permite lograr un efecto similar al de float: right en CSS.

A continuación están los dos campos de texto junto con sus etiquetas.

En este punto, la página debería verse ahora así:

login page initial stylinglogin page initial stylinglogin page initial styling

Aquí está el estilo de textInput:

Ahora puedes haber empezado a notar por qué el componente Container es importante. Te permite encapsular estilos predeterminados para que no termines re-declarándolos en cada archivo. Este es un principio básico de React: siempre debes esforzarte por reutilizar los componentes cada vez que veas una oportunidad.

El botón para entrar en Facebook es un poco diferente de los botones que creaste antes. Esta vez tiene un contenido en su interior que muestra un icono junto con un texto. Estos se añaden en lugar de los accesorios de label para personalizar aún más el contenido del botón.

Una vez que se haya añadido eso, la página debería verse ahora así:

login page unstyled facebook login buttonlogin page unstyled facebook login buttonlogin page unstyled facebook login button

Añade los estilos para el botón de inicio de sesión de Facebook:

Realmente no hay nada que valga la pena señalar aquí, excepto por styles.inline, que se utiliza como una clase de ayuda para apilar horizontalmente todos los elementos dentro de ella. Esto logra un efecto similar al de usar <span> en HTML para envolver el texto que se quiere mostrar en línea. En el CSS, esto se puede lograr usando display: inlinedisplay: inline-block.

login page added facebook login button styleslogin page added facebook login button styleslogin page added facebook login button styles

Los últimos elementos de esta pantalla son los botones de inicio de sesión y de cancelar. Necesitan más espacio encima de ellos que los otros elementos, por lo que es mejor envolverlos en un contenedor (footer (pie de página) ) y aplicarle marginTop. Esto tiene más sentido que declarar un nuevo estilo solo para estos botones.

login page added sign in and cancel buttonlogin page added sign in and cancel buttonlogin page added sign in and cancel button

Finalmente, agregue el estilo de los botones de Iniciar sesión y cancelar.

The completed login pageThe completed login pageThe completed login page

Finalmente, ¡no olvides definir el código que se ejecutará cuando se presione cualquiera de los botones!

Conclusión

¡Eso es! En este tutorial has creado con éxito una página de inicio de sesión utilizando tus conocimientos de Flexbox A lo largo del camino, también aprendiste a usar una biblioteca de terceros llamada React Native Vector Icons para añadir fácilmente iconos en tu aplicación. ¿Cómo se comparó mi solución con la tuya? Háslo saber en el foro de discusión de abajo.

En el próximo tutorial de esta serie, aprenderás a crear una pantalla de calendario. Mientras tanto, mira algunos de nuestros otros tutoriales sobre React Native y Flexbox.

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.