1 00:00:02,120 --> 00:00:08,560 Actualmente en nuestro componente de elemento de producto, aquí en la carpeta de componentes, los botones son parte del componente, al igual 2 00:00:08,580 --> 00:00:10,660 que el componente de ajuste envolvente. 3 00:00:12,480 --> 00:00:18,990 No podemos cambiar tanto el componente táctil porque pertenece a nuestro contenido aquí y eso tampoco es 4 00:00:18,990 --> 00:00:25,200 un gran problema porque en la pantalla de administración aquí, también quiero que los elementos sean táctiles 5 00:00:25,590 --> 00:00:30,210 pero quiero ir a mi pantalla de edición en ese caso. 6 00:00:30,360 --> 00:00:33,530 También quiero tener dos botones: uno para editar y 7 00:00:33,540 --> 00:00:37,710 otro para eliminar, pero, por supuesto, los subtítulos y las acciones deberían ser diferentes. 8 00:00:38,370 --> 00:00:46,150 Ahora podríamos pasar este texto de subtítulos aquí como accesorios y cambiar el nombre de los accesorios que activamos cuando se presionan los botones de una manera 9 00:00:46,150 --> 00:00:50,880 más genérica, para que podamos usarlo para ver los detalles en la pantalla de descripción general 10 00:00:50,920 --> 00:00:59,500 de productos y para editar o eliminar en la pantalla del producto del usuario. También hay una forma alternativa de manejar 11 00:00:59,500 --> 00:01:00,320 esto. 12 00:01:00,370 --> 00:01:07,720 Entonces, por ejemplo, cuando presionamos este componente en general, lo renombraré en select para tener un nombre más genérico que tenga sentido 13 00:01:07,720 --> 00:01:12,000 en una variedad más amplia de casos de uso y también cambiaré 14 00:01:12,770 --> 00:01:15,810 la forma en que recibimos estos botones aquí. 15 00:01:15,890 --> 00:01:22,310 Los cortaré desde aquí y en su lugar, la salida apoya a los niños aquí, que es ese accesorio especial que se refiere a lo 16 00:01:22,310 --> 00:01:29,560 que pasemos entre la etiqueta de apertura y cierre de nuestro propio componente. Ahora con eso, también puedo deshacerme de la importación de colores aquí y 17 00:01:29,560 --> 00:01:32,540 del botón de importación y ahora ir a los lugares 18 00:01:32,830 --> 00:01:35,180 donde usamos el artículo del producto, que 19 00:01:35,230 --> 00:01:38,010 sería la pantalla de vista general de productos, por ejemplo. 20 00:01:38,290 --> 00:01:44,100 Allí ahora tenemos que importar el componente del botón y asegurarnos de que importa 21 00:01:44,110 --> 00:01:46,150 sus colores, así que 22 00:01:48,490 --> 00:01:57,630 importe los colores de colores constantes y ahora vaya al elemento de su producto y cámbielo de un componente de cierre automático 23 00:01:57,630 --> 00:02:00,450 a un componente que haya cerrado y 24 00:02:00,450 --> 00:02:06,090 abierto con su propias etiquetas de componentes. Entre estas etiquetas, ahora puede volver a agregar estos 25 00:02:06,090 --> 00:02:13,680 dos botones y ahora, por supuesto, no use accesorios en la vista de detalles y accesorios en agregar al carrito aquí, sino que agregue su 26 00:02:13,680 --> 00:02:18,690 lógica aquí porque ahora estamos pasando dinámicamente esto en el componente del artículo del producto pero, 27 00:02:18,690 --> 00:02:21,950 por lo tanto, podemos pasar diferentes botones dependiendo de dónde 28 00:02:21,960 --> 00:02:26,970 usemos ese componente del artículo del producto. Así que ahora aquí agregaré un nuevo 29 00:02:29,840 --> 00:02:39,030 controlador, seleccione el controlador de elementos, por ejemplo, que es solo una función almacenada en una constante como esta y allí quiero hacer lo que hice anteriormente en ver 30 00:02:39,140 --> 00:02:42,280 detalles, lo cortaré y lo agregaré aquí y espero obtener 31 00:02:42,350 --> 00:02:48,440 la ID y el título aquí como argumento para poder reenviar la ID y el título aquí de esta 32 00:02:48,440 --> 00:02:52,350 manera y ahora seleccionar el controlador de elementos es lo que quiero 33 00:02:52,610 --> 00:02:59,860 activar aquí en select, recuerde que cambié el nombre de esto en el artículo del producto , este toque ahora se activa 34 00:02:59,870 --> 00:03:03,590 solo en select, por lo que deberá cambiar el nombre de 35 00:03:03,590 --> 00:03:09,770 esto en los lugares donde usa ese componente como aquí y luego aquí, ejecuto mi controlador de elemento select 36 00:03:09,770 --> 00:03:17,360 aquí y reenvío itemData. articulo. id y itemData. articulo. título aquí para 37 00:03:17,360 --> 00:03:23,690 que estos datos terminen en esta función. Estoy haciendo esto porque ahora puedo usar el 38 00:03:23,690 --> 00:03:31,760 mismo controlador de elementos aquí en este botón de detalles de vista, esencialmente puedo simplemente copiar esta función anónima y agregarla 39 00:03:31,760 --> 00:03:34,560 aquí a este controlador onPress de este 40 00:03:34,610 --> 00:03:37,970 botón, así que ahora reutilizamos eso y lo agregamos 41 00:03:38,060 --> 00:03:39,740 a carrito, bueno, enviamos esto, 42 00:03:39,890 --> 00:03:45,320 esto ahora se elimina aquí del componente del artículo del producto porque ya no 43 00:03:45,320 --> 00:03:52,340 tenemos ese accesorio, sino que está aquí, este accesorio que toma esta función anónima que al final debería enviar 44 00:03:52,340 --> 00:03:53,510 esta acción. 45 00:03:53,900 --> 00:04:00,170 Entonces, el cambio principal es que muevo los botones fuera del componente, del componente del elemento del producto al componente 46 00:04:00,170 --> 00:04:05,930 de la pantalla de resumen de productos y eso nos permite hacer lo mismo que antes, si lo 47 00:04:05,930 --> 00:04:11,330 guardo, eso debería funcionar como antes de. Podemos tocar un artículo, podemos ver 48 00:04:11,330 --> 00:04:15,420 los detalles, podemos tocar el carrito y todo funciona, pero ahora también 49 00:04:15,740 --> 00:04:18,890 podemos personalizarlo en la pantalla del producto del usuario. 50 00:04:19,250 --> 00:04:28,410 Entonces también copiaré estos botones y pasaré a la pantalla del producto del usuario y allí, importaremos el botón de React Native, importaremos nuestros 51 00:04:28,470 --> 00:04:36,870 colores constantes porque los necesitaremos para los botones de colores constantes y luego aquí en el artículo del producto , en lugar 52 00:04:37,320 --> 00:04:47,480 de configurar esto, necesitamos analizar nuestro accesorio de selección cuando se toca el elemento en general, pero ahora también agregamos etiquetas de apertura y cierre para 53 00:04:47,480 --> 00:04:49,450 nuestro propio componente personalizado 54 00:04:49,550 --> 00:04:53,240 y nuevamente, agreguemos nuestros botones aquí, pero en lugar 55 00:04:53,240 --> 00:04:55,380 de ver los detalles, ahora 56 00:04:55,490 --> 00:05:01,940 Digo editar y eliminar y, por el momento, puedo eliminar todas las demás lógicas porque, por el 57 00:05:02,060 --> 00:05:06,380 momento, no tenemos lógica para editar y eliminar, pero eso es 58 00:05:06,380 --> 00:05:08,630 algo que podemos agregar más adelante. 59 00:05:08,870 --> 00:05:13,630 Y aquí para seleccionar, también es solo una función vacía por el momento. 60 00:05:13,780 --> 00:05:19,690 Esto tiene la ventaja de que ahora tenemos nuestros artículos como antes, pero en la sección de administración, ahora tenemos 61 00:05:19,690 --> 00:05:21,430 editar y eliminar y esto nos 62 00:05:21,550 --> 00:05:26,290 permite hacer cosas diferentes al reutilizar el componente del artículo del producto, que por supuesto es 63 00:05:26,290 --> 00:05:27,330 bastante bueno.