1
00:00:02,340 --> 00:00:08,370
Ahora que sacamos estos elementos básicos del camino y antes de sumergirnos más profundamente en React Native y

2
00:00:08,370 --> 00:00:13,920
también cómo podemos diseñar nuestras aplicaciones de una manera un poco más hermosa porque obviamente nuestro

3
00:00:13,950 --> 00:00:18,260
estilo aquí definitivamente todavía tiene un potencial al alza para ponerlo así,

4
00:00:18,420 --> 00:00:23,790
antes de sumergirnos en todo eso, permíteme mostrarte otro componente emocionante que está integrado en

5
00:00:23,790 --> 00:00:29,970
React Native y que también muestra cuán fácilmente puedes agregar funciones geniales a las aplicaciones React Native y

6
00:00:30,150 --> 00:00:32,010
ese es el componente modal.

7
00:00:32,010 --> 00:00:38,310
Lo encontrará, por supuesto, en los documentos oficiales en esa guía de componentes y

8
00:00:38,310 --> 00:00:42,650
API aquí y allá, encontrará un modal allí abajo.

9
00:00:43,420 --> 00:00:50,470
Ahora está bajo otros y aquí, este modal es un componente agradable que le permite agregar una

10
00:00:50,740 --> 00:00:55,780
superposición tan agradable, superposición de pantalla completa con un poco de esfuerzo.

11
00:00:55,900 --> 00:01:00,490
Ahora agreguemos un modal para alojar nuestra entrada de objetivo, ahora la entrada de objetivo está

12
00:01:00,490 --> 00:01:04,020
aquí en la parte superior y eso está bien, pero realmente quiero

13
00:01:04,540 --> 00:01:10,480
moverlo a un modal para que lo tengamos en una superposición de pantalla completa al final y solo tenemos un botón

14
00:01:10,660 --> 00:01:12,790
aquí en la parte superior, por

15
00:01:12,790 --> 00:01:16,480
lo que en lugar de la entrada de objetivo que abre ese modal.

16
00:01:16,630 --> 00:01:19,000
Así que vamos a la entrada de

17
00:01:19,000 --> 00:01:19,780
objetivos

18
00:01:19,810 --> 00:01:25,000
y allí, quiero envolver esto en un modal. Así que importaré modal de React

19
00:01:25,000 --> 00:01:27,600
Native porque es un envío de

20
00:01:27,640 --> 00:01:34,020
componentes con React Native y allí, quiero usar ese modal alrededor de mi vista aquí, así

21
00:01:34,040 --> 00:01:38,080
que por ahora y ahora, guardemos eso y veamos si

22
00:01:38,180 --> 00:01:41,150
eso ya cambia algo un poco sí,

23
00:01:41,180 --> 00:01:42,740
nuestro estilo está

24
00:01:42,740 --> 00:01:46,700
apagado, estamos perdiendo ese relleno que configuramos originalmente, ¿verdad?

25
00:01:46,710 --> 00:01:52,370
En la aplicación js, tenemos ese relleno general en nuestra vista de

26
00:01:52,370 --> 00:01:58,430
pantalla, que es esa vista externa, ciertamente ya no se aplica en las dos plataformas, en los dos dispositivos porque

27
00:01:58,430 --> 00:02:03,800
nuestro contenido está muy fuera de esta pantalla, por lo que modal ya está haciendo algo y

28
00:02:03,800 --> 00:02:08,480
por supuesto, realmente no estamos viendo mucho. Ahora para modal, por lo que para

29
00:02:09,020 --> 00:02:14,030
este componente modal, puede establecer una clave visible que defina si esto es actualmente visible

30
00:02:14,030 --> 00:02:19,730
o no, y que toma un valor booleano si configuramos esto como falso, por ejemplo, y luego

31
00:02:19,730 --> 00:02:21,020
si observamos nuestras

32
00:02:21,080 --> 00:02:25,880
aplicaciones, Por supuesto visto la pantalla vacía. Por cierto, en caso de que Android no

33
00:02:25,900 --> 00:02:32,660
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,

34
00:02:32,660 --> 00:02:37,080
el proceso de inicio de npm, presione una vez más para reiniciar esto en Android

35
00:02:37,100 --> 00:02:39,650
Entonces, ahora tenemos una pantalla vacía cuando esto se establece

36
00:02:39,650 --> 00:02:42,410
en falso, ahora obviamente estamos codificando esta no es la solución.

37
00:02:42,410 --> 00:02:47,990
En cambio en la aplicación. js, ahora quiero tener un botón que nos permita abrir ese modal y

38
00:02:47,990 --> 00:02:49,340
luego cerraremos el modal desde

39
00:02:49,350 --> 00:02:55,760
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,

40
00:02:55,760 --> 00:03:00,530
por supuesto, también podemos deshacernos de estas importaciones que no estamos usando aquí en

41
00:03:00,560 --> 00:03:01,480
este momento,

42
00:03:01,550 --> 00:03:06,400
así que simplemente deje el botón importar aquí junto con las otras importaciones que estamos

43
00:03:06,490 --> 00:03:12,260
usando y ahora aquí en la parte superior , podemos agregar el botón, aunque es una etiqueta de

44
00:03:12,260 --> 00:03:22,160
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

45
00:03:22,160 --> 00:03:22,750
y

46
00:03:22,750 --> 00:03:24,040
aquí está y

47
00:03:24,140 --> 00:03:31,000
ahora, cuando presionamos ese botón, queremos mostrar ese modal, ¿verdad? Ahora para eso, necesitamos gestionar más

48
00:03:31,000 --> 00:03:31,920
estado.

49
00:03:31,990 --> 00:03:38,350
Así que aquí, además de administrar los objetivos del curso, ahora también administraré si estamos actualmente en modo de

50
00:03:38,410 --> 00:03:41,220
agregar curso o si no lo estamos.

51
00:03:41,260 --> 00:03:48,220
Inicialmente, no lo somos, por lo que el estado inicial que configuro es falso y nombraré

52
00:03:48,220 --> 00:03:50,100
mi estado aquí y,

53
00:03:50,140 --> 00:03:55,460
por supuesto, depende totalmente de usted, lo nombraré como AddMode y setIsAddMode.

54
00:03:55,660 --> 00:03:56,860
Una vez más, estos

55
00:03:56,860 --> 00:04:03,220
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

56
00:04:03,220 --> 00:04:08,110
dar al estado que estamos controlando un nombre apropiado y luego básicamente tomamos ese nombre y agregamos un

57
00:04:08,110 --> 00:04:12,430
conjunto delante para dejar en claro que esta es la función para cambiar ese estado.

58
00:04:12,430 --> 00:04:17,230
Entonces setIsAddMode es lo que al final necesitamos llamar cuando se presiona este botón y aquí

59
00:04:17,230 --> 00:04:22,750
podemos usar una función en línea o una función con nombre y simplemente agregar el controlador aquí, lo

60
00:04:22,750 --> 00:04:23,700
que desee.

61
00:04:24,130 --> 00:04:28,450
Iré con la función en línea y llamaré a setAddMode y estableceré esto en verdadero

62
00:04:28,480 --> 00:04:35,800
aquí cuando se llame a este botón para que abramos el modal. Ahora podemos tomar el estado de AddMode que estamos cambiando y

63
00:04:35,800 --> 00:04:43,760
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

64
00:04:43,760 --> 00:04:50,120
accesorio depende de usted porque está en nuestro propio componente y le paso isAddMode, así que ese es

65
00:04:50,120 --> 00:04:51,680
el estado que estamos

66
00:04:51,680 --> 00:04:54,800
controlando, al modo visible, por lo que el

67
00:04:54,800 --> 00:04:59,660
valor almacenado en isAddMode se pasa como un valor para el apoyo visible.

68
00:04:59,660 --> 00:05:03,710
Ahora, en la entrada de objetivos, podemos usar ese accesorio visible,

69
00:05:03,710 --> 00:05:06,670
así que aquí podemos usar accesorios visibles, ahora

70
00:05:06,740 --> 00:05:12,080
refiriéndonos al accesorio visible que obtuvimos en la entrada del objetivo, que luego enviamos

71
00:05:12,230 --> 00:05:17,170
al accesorio visible del modal. Si ahora guardamos eso y echamos un vistazo

72
00:05:17,310 --> 00:05:22,440
a nuestra aplicación, si presiono agregar nuevo objetivo aquí, de hecho, verá ese contenido modal aquí nuevamente.

73
00:05:22,590 --> 00:05:25,020
Ahora, obviamente, no se ve tan hermoso

74
00:05:25,020 --> 00:05:26,590
aquí, así que deberíamos

75
00:05:26,700 --> 00:05:33,450
cambiar esto y otra cosa que quiero cambiar es que una animación sería agradable aquí para abrir el modal, ¿verdad?

76
00:05:33,450 --> 00:05:40,740
Entonces, agreguemos el tipo de animación, que es una buena propiedad que podemos establecer aquí y puede establecer esto en una cadena y

77
00:05:40,740 --> 00:05:45,210
allí tiene tres opciones: ninguna es la predeterminada, pero puede configurar esto para deslizar

78
00:05:45,420 --> 00:05:48,450
y ahora el modal debería aparecer deslizando arriba.

79
00:05:48,490 --> 00:05:51,760
Entonces, si presiona agregar nuevo objetivo, ahora esto se desliza

80
00:05:51,760 --> 00:05:53,430
hacia arriba, también en Android.

81
00:05:53,430 --> 00:05:59,130
Entonces, esa es una experiencia de usuario mucho mejor, diría, el siguiente paso es asegurarnos de que nuestro contenido en

82
00:05:59,130 --> 00:06:04,410
el modal se presente de una manera más agradable, tal vez centrado aquí en el medio del modal.