1
00:00:02,380 --> 00:00:08,420
Comencemos con el diálogo de confirmación aquí en la pantalla de edición del producto. Simplemente podemos importar la API de alerta

2
00:00:08,450 --> 00:00:16,490
de React Native que nos permite mostrar una buena alerta y luego agregar un nuevo método aquí tal vez, todos podríamos hacerlo

3
00:00:16,490 --> 00:00:22,830
en línea, pero para tener un código un poco más estructurado donde tengo mi controlador de eliminación.

4
00:00:23,020 --> 00:00:28,600
Por cierto, la forma en que nombra sus funciones depende totalmente de usted, simplemente me gusta este nombre de controlador aquí si lo asigno a mis

5
00:00:28,600 --> 00:00:35,950
emisores de eventos en el código jsx, por así decirlo, y allí podemos llamar a la alerta. alerta para mostrar una alerta con el

6
00:00:35,980 --> 00:00:37,690
título de si

7
00:00:37,720 --> 00:00:38,960
está

8
00:00:39,880 --> 00:00:45,670
seguro de mensaje, ¿realmente desea eliminar este elemento y luego

9
00:00:45,670 --> 00:00:48,940
una matriz con todos los botones

10
00:00:48,940 --> 00:00:58,020
que queremos presentar donde el botón número uno tiene un texto de no y un estilo predeterminado.

11
00:00:58,060 --> 00:01:02,800
Solo hay tres estilos predeterminados o estilos preconfigurados entre los que puede elegir y ningún controlador especial

12
00:01:02,800 --> 00:01:03,930
en este primer botón.

13
00:01:04,030 --> 00:01:07,180
El segundo botón tiene sí, allí quiero

14
00:01:07,190 --> 00:01:10,640
tener un estilo destructivo para marcar esto, ya

15
00:01:10,640 --> 00:01:17,900
que esto eliminará algo y el controlador onPress aquí está al final sosteniendo una función que realmente

16
00:01:17,900 --> 00:01:20,540
despachará la acción de eliminación.

17
00:01:20,610 --> 00:01:28,110
Así que ahora es el controlador de eliminación que quiero ejecutar cuando hacemos clic en ese botón de eliminación y, por lo tanto, por supuesto, estoy en

18
00:01:28,110 --> 00:01:30,080
el componente incorrecto que acabo de ver.

19
00:01:30,210 --> 00:01:31,610
Cortemos esto, no está

20
00:01:31,800 --> 00:01:33,740
dentro de la pantalla de edición de productos,

21
00:01:33,750 --> 00:01:35,440
no necesitamos importar la alerta allí, es

22
00:01:35,460 --> 00:01:41,310
de la pantalla de productos de usuario de la que estoy hablando. Allí debemos importar la alerta, allí debemos

23
00:01:41,700 --> 00:01:47,380
agregar este controlador y ahora el controlador de eliminación debe asignarse a este botón de

24
00:01:47,400 --> 00:01:53,730
eliminación aquí, por lo que aquí solo podemos señalar el controlador de eliminación y esta función anónima

25
00:01:53,980 --> 00:02:00,790
se puede cortar desde allí y se puede movido aquí y reemplazar este controlador onPress para este botón y

26
00:02:00,790 --> 00:02:07,320
ahora con eso, deberíamos obtener esta ventana emergente, este diálogo de confirmación antes de que realmente eliminemos algo.

27
00:02:07,330 --> 00:02:09,790
Entonces, si hago clic en Eliminar, ahora pregunto, si

28
00:02:09,790 --> 00:02:10,210
presiono

29
00:02:10,210 --> 00:02:11,640
no, no pasa nada,

30
00:02:11,650 --> 00:02:16,060
solo si hago clic en Sí, eliminamos esto. Un pequeño error, por supuesto, es que

31
00:02:16,060 --> 00:02:17,920
los datos del artículo que necesitamos

32
00:02:20,570 --> 00:02:21,790
deben estar disponibles.

33
00:02:21,830 --> 00:02:24,920
Entonces, aquí reenviamos la ID que queremos eliminar, por lo que,

34
00:02:24,920 --> 00:02:30,180
en realidad, para el controlador de eliminación, necesitamos la ID del producto al que estamos aplicando este controlador para

35
00:02:30,410 --> 00:02:35,360
que aquí tenga esa ID disponible y eso significa que cuando se llama al controlador de eliminación allá

36
00:02:35,360 --> 00:02:37,980
abajo, debemos asegurarnos de que obtenga la identificación.

37
00:02:38,510 --> 00:02:40,150
Entonces, hay dos formas de hacerlo, una función anónima

38
00:02:40,400 --> 00:02:46,100
en la que ejecutamos el controlador de eliminación manualmente y reenviamos itemData. articulo. id o alternativa

39
00:02:46,100 --> 00:02:55,000
a eso, pasando el controlador de eliminación de esta manera pero usando bind para preconfigurar cualquier argumento

40
00:02:55,000 --> 00:03:01,150
que obtenga esta función. Bind siempre necesita valor para esta palabra clave dentro de la función que ejecutará. Allí podemos pasar esto, no

41
00:03:01,150 --> 00:03:04,170
importa, pero el segundo argumento ahora es el

42
00:03:04,360 --> 00:03:08,290
primer argumento que obtendrá el controlador de eliminación, así que

43
00:03:08,620 --> 00:03:15,640
aquí pasamos itemData. articulo. carné de identidad. Ahora con eso, nos

44
00:03:15,640 --> 00:03:22,530
aseguramos de que podamos presionar sí y funcionará, si ahora volvemos aquí a admin, hacemos clic en eliminar, presionamos

45
00:03:22,600 --> 00:03:27,700
sí, esto realmente funciona y si presionamos no, no pasa nada, sí lo elimina.

46
00:03:27,700 --> 00:03:29,020
Así que eso es

47
00:03:29,230 --> 00:03:34,450
lo primero y para asegurarnos de que naveguemos hacia atrás, si guardamos esto, ahora tenemos que ir a

48
00:03:34,750 --> 00:03:41,680
la pantalla de edición del producto y allí en nuestro controlador de envío, sin importar si enviamos la actualización o creamos la acción del producto,

49
00:03:41,680 --> 00:03:51,870
en el fin Quiero llamar también a los accesorios de navegación volver a volver a la pantalla anterior. Y si ahora guardamos esto y vamos a la pantalla de

50
00:03:53,430 --> 00:03:58,920
administración y por ahora presento un producto vacío, por supuesto recibo una

51
00:04:01,990 --> 00:04:07,750
advertencia, pero esto generalmente funciona, esto retrocede y si edito un producto, esto

52
00:04:07,750 --> 00:04:08,890
también funciona.

53
00:04:08,950 --> 00:04:13,470
Así que ahora con esto, hemos terminado con respecto a toda esa gestión de

54
00:04:13,510 --> 00:04:18,920
entrada, lo que ahora quiero hacer antes de que realmente termine todo esto es que ahora

55
00:04:18,920 --> 00:04:20,850
quiero optimizar un poco más

56
00:04:21,040 --> 00:04:26,800
el producto y la forma en que ' reutilizando nuestra tarjeta, mira aquí con la sombra y así

57
00:04:27,040 --> 00:04:28,270
sucesivamente porque la

58
00:04:28,270 --> 00:04:33,940
estamos usando en múltiples componentes y si te encuentras usando algo en múltiples componentes, siempre querrás pensar

59
00:04:33,940 --> 00:04:35,920
si puedes optimizar esto un poco

60
00:04:35,980 --> 00:04:39,370
más y, de hecho, aquí , tenemos potencial de optimización.

61
00:04:39,490 --> 00:04:42,600
Entonces, ¿cómo podemos optimizar esto?

62
00:04:42,720 --> 00:04:48,720
Bueno, podríamos crear un componente separado aquí en nuestra carpeta UI de la carpeta

63
00:04:49,080 --> 00:04:55,800
de componentes que denominamos carrito. js, donde acabamos de guardar este look de carrito. Un componente de

64
00:04:55,800 --> 00:05:05,140
carrito puede ser un componente muy simple al final. Importamos React de React aquí porque necesitamos crear un componente e importamos

65
00:05:05,260 --> 00:05:13,990
una vista de React Native, así como así y ahora aquí, creamos nuestro componente de carrito donde simplemente obtenemos nuestros accesorios, devolvemos algunos

66
00:05:14,030 --> 00:05:21,000
jsx y exportamos este componente en el final, aunque también tendremos que configurar algunos estilos porque esa es

67
00:05:21,000 --> 00:05:23,390
la idea central detrás de

68
00:05:23,400 --> 00:05:30,370
este componente, se trata de darnos algunos estilos preconfigurados. Así que también agregaré mis estilos constantes con

69
00:05:30,680 --> 00:05:31,750
Stylesheet. crear

70
00:05:31,770 --> 00:05:36,710
allí y ahora, ¿cuál es el código jsx que quiero devolver aquí?

71
00:05:36,760 --> 00:05:41,920
Bueno, esa es una vista, una vista que realmente envolverá lo que pasemos allí, así

72
00:05:41,950 --> 00:05:46,870
que entre las etiquetas de mi componente, así que solo apoya a los niños allí,

73
00:05:46,930 --> 00:05:53,690
pero ahora esa vista puede obtener un estilo predeterminado aquí, que nombraré carrito y eso debería sean los estilos con

74
00:05:53,690 --> 00:05:56,090
los que de otra manera copio.

75
00:05:56,110 --> 00:06:01,780
Entonces, aquí, el estilo de mi carrito en este componente del carrito es exactamente el que tengo aquí, el artículo del producto,

76
00:06:01,780 --> 00:06:02,880
es este material de

77
00:06:02,900 --> 00:06:09,540
sombras aquí, la elevación, el radio del borde y el color de fondo. Puedes cortar todo eso y moverlo al carrito

78
00:06:09,540 --> 00:06:10,260
aquí.

79
00:06:11,580 --> 00:06:16,890
Ahora para poder configurar esto un poco, en realidad mejoraré esto y estableceré

80
00:06:16,890 --> 00:06:27,540
el estilo en un objeto donde fusionaré en mis valores de carrito de estilos y cualquier valor que obtenga en el accesorio de estilo aquí, como este.

81
00:06:27,540 --> 00:06:32,970
Así que ahora incluso podemos establecer un accesorio de estilo cuando usamos nuestro carrito y

82
00:06:32,970 --> 00:06:39,240
pasamos nuestros propios estilos que se fusionarán con estos estilos de tarjeta predeterminados porque esto ahora me

83
00:06:39,300 --> 00:06:50,780
permite usar el carrito aquí en el artículo del producto, por ejemplo, importando el carrito de , y ahora un nivel más arriba en la carpeta UI, en el archivo del carrito

84
00:06:51,000 --> 00:06:52,460
y reemplace esta

85
00:06:52,500 --> 00:06:54,830
vista aquí, esta vista exterior con

86
00:06:54,860 --> 00:07:01,410
tarjeta y, por supuesto, también reemplace la etiqueta de cierre y aún pase aquí las especificaciones de mi

87
00:07:01,410 --> 00:07:08,360
producto, así que esta altura y el margen .

88
00:07:08,360 --> 00:07:11,570
Esto se fusionará con el otro aspecto de la tarjeta y todo entre las etiquetas

89
00:07:11,570 --> 00:07:15,030
de apertura y cierre de la tarjeta simplemente funcionará, paso esto a mi tarjeta aquí con

90
00:07:15,020 --> 00:07:18,820
la ayuda de los accesorios de los niños. Ahora, lo mismo para el artículo

91
00:07:18,830 --> 00:07:25,280
de pedido, solo tenemos que importar la tarjeta y ahora ir a la carpeta de la interfaz de usuario, a la tarjeta

92
00:07:26,240 --> 00:07:29,690
aquí y luego usar la tarjeta en lugar de esa vista,

93
00:07:29,700 --> 00:07:34,570
esa vista exterior aquí, reemplazarla con una tarjeta y deshacerse de estos estilos de tarjeta aquí,

94
00:07:34,590 --> 00:07:39,330
el material de sombra, la elevación, el radio del borde y el color de fondo y

95
00:07:39,330 --> 00:07:45,640
solo mantienen los estilos especiales en los que desea fusionarse. Y ahora lo último, el último lugar donde podemos usar esto es

96
00:07:45,660 --> 00:07:49,440
la pantalla del carrito, allí también tengo mi resumen que usa estos estilos de tarjeta.

97
00:07:49,770 --> 00:07:56,870
Una vez más, podemos importar el componente de la tarjeta desde la carpeta de componentes, la carpeta de

98
00:07:56,920 --> 00:08:04,930
la interfaz de usuario allí y allá, desde el carrito. js y ahora use el componente de tarjeta en lugar de ver

99
00:08:05,320 --> 00:08:07,290
en el lugar donde queremos

100
00:08:07,300 --> 00:08:11,380
estos estilos de tarjeta, por lo que aquí sería la vista que tenía

101
00:08:11,380 --> 00:08:16,590
los estilos de resumen, reemplazaré esto con tarjeta. Y en los estilos de resumen, mantenemos todo

102
00:08:16,650 --> 00:08:22,170
lo específico de esta pantalla o de este componente, pero podemos eliminar el color de la sombra, el radio

103
00:08:22,170 --> 00:08:27,260
de la sombra, la elevación, el color de fondo del radio del borde, todo eso se puede eliminar.

104
00:08:27,290 --> 00:08:32,480
Ahora guardemos eso y verá que, por supuesto, la aplicación aún funciona y se

105
00:08:32,480 --> 00:08:33,800
ve de la

106
00:08:34,630 --> 00:08:41,320
misma manera que antes si agrego esto al carrito, por ejemplo, y ordeno esto y veo mis pedidos,

107
00:08:41,320 --> 00:08:48,760
todo esto se ve como lo hacía antes, pero ahora lo hace con un código un poco más óptimo en

108
00:08:48,760 --> 00:08:53,610
el que reutilizamos nuestros estilos y tenemos un componente de presentación separado

109
00:08:53,650 --> 00:08:59,170
para que nuestros otros componentes puedan ser un poco más ágiles y no nos repitamos

110
00:08:59,170 --> 00:09:05,710
a menudo al configurar ese aspecto de carro. Otra ventaja es que no podemos escribir mal, si establecemos el

111
00:09:05,710 --> 00:09:11,220
radio de sombra en 8 en un componente y 10 en otro, entonces nuestra aplicación podría parecer un poco inconsistente.

112
00:09:11,260 --> 00:09:17,830
Evitamos esto al tener algunos componentes centrados en el estilo central que configuran estos estilos centrales que luego usamos en

113
00:09:17,830 --> 00:09:20,410
otros componentes como lo estamos haciendo aquí.