Entonces, comencemos con la implementación de la autenticación y un paso muy importante para eso es que agreguemos una nueva pantalla,
la pantalla de autenticación, que es la pantalla que debe presentar un formulario de inicio de sesión o registro que el usuario
puede usar para iniciar sesión o registrarse y, por lo
tanto, aquí en la pantalla de autenticación, importaré reaccionar desde reaccionar
y también importaré algunas cosas desde React Native porque desde allí, desde React Native, quiero tener la vista de desplazamiento
porque crearemos un formulario y quiero asegúrese de que los usuarios de todos los tamaños de dispositivo
puedan interactuar con él.
Agregaré una hoja de estilo aquí y eso debería ser todo por ahora,
siempre podemos agregar más si necesitamos más.
También podemos incluir una vista y el teclado evitando la vista, supongo que para asegurarnos de que todas
las entradas estén siempre accesibles.
Ahora hablando de entradas, por supuesto, agregaremos un formulario y, por lo tanto, reutilizaré el componente de entrada que creamos en
la sección de formularios que puedo encontrar en la carpeta de la interfaz de usuario de componentes.
Así que asegúrese de mirar esta sección para saber qué hace este componente y cómo podemos
administrar un formulario con él.
Con eso, podemos crear el componente de pantalla de autenticación aquí que recibe accesorios y también podemos crear ese objeto
de estilos con la hoja de estilos, el método de
creación allí y, por supuesto, exportar la pantalla de autenticación, de esta manera.
Ahora, obviamente, la pregunta ahora también es, ¿cómo presentamos esta pantalla de autenticación? ¿Cómo nos aseguramos de ver esto
si no hemos iniciado sesión?
Ahora, eso es algo que refinaremos a lo largo de este módulo, pero para comenzar, podemos ir al
navegador y asegurarnos de que cuando se inicie la aplicación, veamos esa pantalla de autenticación y para esto podemos usar
un nuevo navegador especial que no tenemos utilizado antes de lo cual está específicamente diseñado, casi podría decirse para este
caso de uso de autenticación y que la función de crear navegador de conmutador que nos ayuda
allí, por lo que crea dicho navegador de conmutador. Lo especial de este navegador es que siempre
muestra exactamente una pantalla y no puede volver a otra pantalla si luego navega a una diferente.
Por lo tanto, retroceder no está explícitamente permitido, que es exactamente lo que queremos porque no debería poder
volver a la pantalla de inicio de sesión si acaba de iniciar sesión.
Por lo tanto, aquí, en la parte inferior del archivo, crearé un nuevo navegador, tal vez mi navegador principal,
el nombre depende totalmente de usted, por supuesto, con el interruptor de creación del navegador y, como antes, este navegador toma
un argumento donde configuramos así que, un objeto donde lo configuramos y allí, quiero vincular mi pantalla de autenticación y,
por supuesto, mi pila de tienda a partir de entonces. Ahora, para tener un buen encabezado, también crearé
mi navegador de autenticación aquí, que es un navegador de pila creado con el navegador Crear pila y allí, simplemente mapearé la pantalla
de autenticación en la que acabo de comenzar a trabajar y para
esto, por supuesto, necesita importarlo, así que en ese ShopNavigator. js, podemos importar la pantalla de autenticación de la pantalla de autenticación del
usuario de
esta manera y con esa importación agregada, si bajamos, asignamos esto aquí a la autenticación en el navegador de autenticación y
el navegador de autenticación se asigna a la autenticación aquí en el navegador del interruptor y Por supuesto, la tienda está
asignada al navegador de la tienda y ahora es el navegador principal que envolvemos con el
contenedor de creación de aplicaciones y, por lo tanto, si guardamos esto, representaremos la pantalla de autenticación
como la primera pantalla
que en este momento no mostrará ninguna válida jsx, por lo que obtenemos un error, pero podemos trabajar en eso, por supuesto, porque el objetivo
ahora es mostrar esta pantalla de autenticación donde podamos iniciar sesión y hacer lo nuestro. Así que aquí, quiero presentar estas entradas y en realidad también importaré
el componente de la tarjeta desde la tarjeta UI de componentes para que esta bonita tarjeta se vea aquí y tenga mis entradas
allí y, por supuesto, esto es totalmente opcional, pero aquí,
agregaré aquí, agregaré la tarjeta y en la tarjeta, podemos agregar la vista de desplazamiento para poder
desplazarnos dentro de esa tarjeta, por supuesto, también puede agregar la vista de
desplazamiento alrededor de la tarjeta para que pueda desplazarse en el pantalla pero lo haré así, también agregaré mi propio estilo
aquí a la tarjeta que nombraré contenedor de autenticación tal vez, el nombre depende totalmente de usted y también envolveré una vista de
todo eso aquí como envoltura ver donde agregaré un estilo que nombraré pantalla. En realidad, aquí ya podemos usar el teclado para evitar la vista, supongo que con
un comportamiento de relleno y luego este desplazamiento vertical del teclado desactivado, digamos 50. Así que ahora dentro de esa vista de desplazamiento
aquí que tenemos en nuestra tarjeta, podemos comenzar a agregar las entradas, la entrada personalizada
que construimos anteriormente en el curso. Por ejemplo, aquí, una entrada con el correo electrónico de identificación y
una etiqueta de correo electrónico porque allí quiero obtener la dirección de correo electrónico del usuario y, por lo tanto, el tipo de dirección de correo electrónico del teclado
que es compatible tanto en iOS como en Android.
También debería ser necesario y quiero usar el validador de correo electrónico, estas son dos de las
funcionalidades de validación que incorporé a la entrada anteriormente en este curso, también se debe desactivar el uso de mayúsculas
automáticas, así que no lo pondré en mayúsculas porque la dirección de correo electrónico realmente
no es útil y el mensaje de error que quiero mostrar si tenemos algo mal allí es ingresar una dirección de correo electrónico válida, algo así.
Ahora, cuando el valor cambia, así que al cambiar el valor, queremos hacer algo, pero por
ahora no haré nada aquí, solo proporcionaré una función vacía para que no obtengamos un error y el valor
inicial que quiero mostrar. aquí, bueno, eso es solo
una cadena vacía al final porque no quiero proporcionar ningún otro valor inicial.
Ahora, por supuesto, no es la única entrada, así que repetiré esto porque también necesito
una entrada de contraseña aquí con una etiqueta de contraseña y el tipo de teclado aquí debería ser predeterminado porque quiero tener la palabra clave de texto normal
pero
quiero oscurezca la entrada para que no podamos verla y eso se
puede hacer agregando a la entrada de texto segura aquí.
Por supuesto, este no es un accesorio compatible con mi componente personalizado, pero
tenga en cuenta que en este componente, reenviamos todos los accesorios a la entrada de texto incorporada y la entrada de
texto integrada admite esta propiedad de entrada de texto segura aquí, así que es por eso que
puede configurar esto. Aquí la validación
tampoco debería verificar que se trata de una dirección de correo electrónico, pero
asegúrese de que tengamos una longitud mínima de, digamos, cinco caracteres. La capitalización automática también se puede desactivar aquí, el mensaje de
error sería ingresar una contraseña válida y con eso, acabo de ver que aquí, por supuesto, tengo un error tipográfico,
que debería ser una dirección de correo electrónico, aquí una contraseña y la dejaré aquí como están las cosas.
Ahora para poder enviar esto,
también necesito un botón, así que aquí importaré el botón de React Native y agregaré dos botones en la tarjeta y, por
lo
tanto, también dentro de la vista de desplazamiento. El primer botón tiene un título de inicio
de sesión, digamos, y luego lo cambiaremos para iniciar sesión o registrarse dependiendo del modo en
que nos encontremos y el color se importe o se agregue con la ayuda de los colores constantes
que debe Importar y en estos colores constantes, utilizaré colores. primario y onPress en este momento simplemente pueden apuntar a una función
vacía y repetiré esto porque quiero tener un segundo botón donde digo cambiar para
registrarse y, por supuesto, esto también luego indicará cambiar para iniciar sesión si estamos en señal arriba y tal vez
podamos usar nuestro color de acento. Si ahora guardamos eso, deberíamos tener una pantalla de
inicio de sesión básica, aquí está, no se ve como debería
verse, pero tenemos nuestras entradas
aquí, tenemos estos dos botones, también en Android una vez que
esto se carga,
aquí vamos y ahora, por supuesto, me gustaría diseñar esto apropiadamente.
Así que vamos a la hoja
de estilo y tenga en cuenta que tengo dos estilos al final asignados: pantalla y contenedor de autenticación, así que aquí en los
estilos que quiero agregar tanto la pantalla como el contenedor de
autenticación, estos son los dos estilos con los que planeo trabajar. Ahora para la pantalla, estableceré flex en uno
y luego justificaré mi contenido en el centro y alinearé los elementos en el centro para centrarlos tanto
en el eje
vertical como en el horizontal y en el contenedor de autenticación, quiero establecer
un ancho digamos 80% para no tomar el ancho completo disponible y un ancho máximo en
realidad de 400 píxeles en caso de que 80% sea más que eso, lo restringimos a 400 píxeles y tal vez una altura de digamos 50% pero una altura máxima de También 400.
Veamos cómo se ve eso. Si
guardamos esto, esto es lo
que obtengo aquí.
Ahora puedo desplazarme allí porque configuré dicha vista de desplazamiento y, de hecho, ese no es el comportamiento
que quiero.
No estableceré una altura
aquí, solo agregaré una altura máxima para que esté limitada a una altura
determinada, pero de manera predeterminada solo toma la altura necesaria y, por lo tanto, prefiero agregar
algo de relleno para que tengamos algo espacio alrededor de las entradas y no se sienta en
el
borde de la tarjeta, por lo que se ve mucho mejor y veamos cómo se ve eso en Android, sí,
en general se ve bien.
Si toco allí, esto también se desplaza
hacia arriba, por lo que el teclado que evita la vista está haciendo su trabajo, pero por supuesto, todavía recibo un error aquí
que al cambiar la entrada está causando un error porque sí, agregué un cambio de
valor aquí, eso debería ser en cambio de entrada, no en cambio de valor.
Eso es una pequeña solución, pero nos dirigimos en la dirección correcta.
Sin embargo, ahora no he terminado, quiero tener un
título de encabezado y qué tal un poco de color de fondo aquí, eso también sería bueno probablemente.
Entonces, para eso, con respecto al título del encabezado, por supuesto, podemos agregar AuthScreen. navigationOptions y trabajar con algunas opciones estáticas
por ahora porque solo quiero agregar un título de encabezado aquí y configurar
esto para autenticar o simplemente autenticar, algo así y para el
fondo, bueno,
por supuesto, podríamos dar nuestra opinión aquí que contiene todo un color
de fondo, pero en realidad quiero mostrarle un nuevo componente que no hemos usado hasta
ahora y para esto, necesitamos instalar un paquete nuevo y ese es el paquete expo-lineal-gradiente que instaló
con npm install --save gradiente expo-lineal.
Este es un paquete que nos permite agregar un
gradiente lineal con facilidad,
por lo que de una manera muy simple y después de que se haya instalado,
solo necesita importar desde expo-linear-gradient e importar un componente que esto expone, el componente de gradiente lineal
Ahora, ese es un componente que puede usar en su página y aquí lo usaré dentro del teclado evitando
la vista, un degradado lineal como este y envolviendo todo el otro contenido como este aquí y ahora puede configurar eso
y
allá, yo queremos asegurarnos de que esto tenga una tecla de colores que nos permita establecer los colores
entre los cuales debería hacer la transición porque un gradiente es simplemente un gradiente entre
varios colores, al menos dos, pero puede agregar más y ahora puede agregar colores, como
rojo o agregando los códigos hexadecimales y quiero hacer la transición entre #ffedff y digamos otro código hexadecimal, # ffe3ff y, por
supuesto, puede experimentar con diferentes colores aquí.
Ahora también necesitamos agregar un estilo aquí y nombraré este gradiente de estilos que ahora podemos agregar aquí y este
gradiente tendrá un ancho de 100% y una altura de 100%, por lo que tomará todo el ancho y alto
puede obtener, así es como se ve, pero ahora tenemos un problema,
por supuesto, nuestro
contenido ya no está centrado. Para garantizar que este sea
el caso, ahora necesitamos agregar contenido justificado y alinear elementos nuevamente y, por lo tanto,
aquí
en la pantalla circundante, podemos deshacernos de eso.
Ahora tenemos el mismo aspecto que antes,
obviamente, por lo tanto, también podemos lograr esto no configurando el ancho y la altura, sino simplemente flexionando uno.
Así que ahora con esta configuración aquí y es importante que la pantalla no intente centrarse porque
de lo contrario el
gradiente estará centrado, pero con esta configuración, ahora tenemos este aspecto con este agradable gradiente y para ver el título de nuestro encabezado
aquí, simplemente debemos asegurarnos de que en la configuración de navegación, en el navegador de la tienda, asignemos nuestros accesorios de
navegación predeterminados al navegador de autenticación.
Así que agregaré el segundo argumento para crear el navegador de pila y las opciones de navegación predeterminadas solo apuntan a
las opciones de navegación predeterminadas que configuran el color del encabezado, el color del título del encabezado, etc.
Por supuesto, asegúrese de que no tiene ningún error tipográfico aquí en las opciones de navegación de la pantalla de autenticación en la
pantalla de autenticación como yo.
Entonces, con eso arreglado, esta es la configuración que tenemos aquí, por supuesto,
puedes experimentar con los colores y usar diferentes colores si lo
prefieres, estoy contento con eso y ahora lo único que quiero arreglar aquí es mi estilo para los botones,
algunos espacios alrededor de ellos serían agradables y eso se puede agregar fácilmente envolviendo los botones en las vistas aquí, ambos botones en realidad.
Así que haré esto aquí y ahora le doy a cada vista un estilo aquí, tal vez un contenedor de botones de estilos, haga esto en la primera vista y en la segunda vista y
ahora podemos darle un estilo a ese contenedor
de botones allí abajo en la hoja de estilos y aquí puede establecer un margen
superior, por ejemplo, de 10 para asegurarse de que cada botón tenga un pequeño margen en la parte superior para que
los botones no se sienten directamente uno al lado del otro, lo que creo que realmente ayudaría
a nuestros botones.
Así que esto se ve
bien en iOS, también vamos a verlo en Android,
sí, esto no se ve tan mal.
Entonces, con eso, tenemos esa configuración básica, ahora asegurémonos de que esto también haga algo útil y que
realmente intentemos iniciar sesión con eso.