Ahora que sacamos estos elementos básicos del camino y antes de sumergirnos más profundamente en React Native y
también cómo podemos diseñar nuestras aplicaciones de una manera un poco más hermosa porque obviamente nuestro
estilo aquí definitivamente todavía tiene un potencial al alza para ponerlo así,
antes de sumergirnos en todo eso, permíteme mostrarte otro componente emocionante que está integrado en
React Native y que también muestra cuán fácilmente puedes agregar funciones geniales a las aplicaciones React Native y
ese es el componente modal.
Lo encontrará, por supuesto, en los documentos oficiales en esa guía de componentes y
API aquí y allá, encontrará un modal allí abajo.
Ahora está bajo otros y aquí, este modal es un componente agradable que le permite agregar una
superposición tan agradable, superposición de pantalla completa con un poco de esfuerzo.
Ahora agreguemos un modal para alojar nuestra entrada de objetivo, ahora la entrada de objetivo está
aquí en la parte superior y eso está bien, pero realmente quiero
moverlo a un modal para que lo tengamos en una superposición de pantalla completa al final y solo tenemos un botón
aquí en la parte superior, por
lo que en lugar de la entrada de objetivo que abre ese modal.
Así que vamos a la entrada de
objetivos
y allí, quiero envolver esto en un modal. Así que importaré modal de React
Native porque es un envío de
componentes con React Native y allí, quiero usar ese modal alrededor de mi vista aquí, así
que por ahora y ahora, guardemos eso y veamos si
eso ya cambia algo un poco sí,
nuestro estilo está
apagado, estamos perdiendo ese relleno que configuramos originalmente, ¿verdad?
En la aplicación js, tenemos ese relleno general en nuestra vista de
pantalla, que es esa vista externa, ciertamente ya no se aplica en las dos plataformas, en los dos dispositivos porque
nuestro contenido está muy fuera de esta pantalla, por lo que modal ya está haciendo algo y
por supuesto, realmente no estamos viendo mucho. Ahora para modal, por lo que para
este componente modal, puede establecer una clave visible que defina si esto es actualmente visible
o no, y que toma un valor booleano si configuramos esto como falso, por ejemplo, y luego
si observamos nuestras
aplicaciones, Por supuesto visto la pantalla vacía. Por cierto, en caso de que Android no
se actualice después de configurarlo como falso, simplemente cierre la aplicación aquí con la ayuda del cajón de aplicaciones y luego, en su proceso,
el proceso de inicio de npm, presione una vez más para reiniciar esto en Android
Entonces, ahora tenemos una pantalla vacía cuando esto se establece
en falso, ahora obviamente estamos codificando esta no es la solución.
En cambio en la aplicación. js, ahora quiero tener un botón que nos permita abrir ese modal y
luego cerraremos el modal desde
dentro del modal cuando presionemos el botón Agregar allí. Ahora ya estamos importando el botón aquí en la aplicación. js y ahora que veo esto,
por supuesto, también podemos deshacernos de estas importaciones que no estamos usando aquí en
este momento,
así que simplemente deje el botón importar aquí junto con las otras importaciones que estamos
usando y ahora aquí en la parte superior , podemos agregar el botón, aunque es una etiqueta de
cierre automático y establecer el título para agregar un nuevo objetivo, tal vez, algo así. Si hacemos eso, por supuesto deberíamos ver ese botón aquí en la parte superior
y
aquí está y
ahora, cuando presionamos ese botón, queremos mostrar ese modal, ¿verdad? Ahora para eso, necesitamos gestionar más
estado.
Así que aquí, además de administrar los objetivos del curso, ahora también administraré si estamos actualmente en modo de
agregar curso o si no lo estamos.
Inicialmente, no lo somos, por lo que el estado inicial que configuro es falso y nombraré
mi estado aquí y,
por supuesto, depende totalmente de usted, lo nombraré como AddMode y setIsAddMode.
Una vez más, estos
nombres dependen de usted, solo estoy teniendo una convención aquí que también encontrará en los documentos oficiales de React donde aquí tratamos de
dar al estado que estamos controlando un nombre apropiado y luego básicamente tomamos ese nombre y agregamos un
conjunto delante para dejar en claro que esta es la función para cambiar ese estado.
Entonces setIsAddMode es lo que al final necesitamos llamar cuando se presiona este botón y aquí
podemos usar una función en línea o una función con nombre y simplemente agregar el controlador aquí, lo
que desee.
Iré con la función en línea y llamaré a setAddMode y estableceré esto en verdadero
aquí cuando se llame a este botón para que abramos el modal. Ahora podemos tomar el estado de AddMode que estamos cambiando y
pasarlo a la entrada de objetivo para luego cambiar la visibilidad del modal allí. Entonces, aquí podríamos agregar un accesorio visible, pero ese nombre de
accesorio depende de usted porque está en nuestro propio componente y le paso isAddMode, así que ese es
el estado que estamos
controlando, al modo visible, por lo que el
valor almacenado en isAddMode se pasa como un valor para el apoyo visible.
Ahora, en la entrada de objetivos, podemos usar ese accesorio visible,
así que aquí podemos usar accesorios visibles, ahora
refiriéndonos al accesorio visible que obtuvimos en la entrada del objetivo, que luego enviamos
al accesorio visible del modal. Si ahora guardamos eso y echamos un vistazo
a nuestra aplicación, si presiono agregar nuevo objetivo aquí, de hecho, verá ese contenido modal aquí nuevamente.
Ahora, obviamente, no se ve tan hermoso
aquí, así que deberíamos
cambiar esto y otra cosa que quiero cambiar es que una animación sería agradable aquí para abrir el modal, ¿verdad?
Entonces, agreguemos el tipo de animación, que es una buena propiedad que podemos establecer aquí y puede establecer esto en una cadena y
allí tiene tres opciones: ninguna es la predeterminada, pero puede configurar esto para deslizar
y ahora el modal debería aparecer deslizando arriba.
Entonces, si presiona agregar nuevo objetivo, ahora esto se desliza
hacia arriba, también en Android.
Entonces, esa es una experiencia de usuario mucho mejor, diría, el siguiente paso es asegurarnos de que nuestro contenido en
el modal se presente de una manera más agradable, tal vez centrado aquí en el medio del modal.