Actualmente en nuestro componente de elemento de producto, aquí en la carpeta de componentes, los botones son parte del componente, al igual
que el componente de ajuste envolvente.
No podemos cambiar tanto el componente táctil porque pertenece a nuestro contenido aquí y eso tampoco es
un gran problema porque en la pantalla de administración aquí, también quiero que los elementos sean táctiles
pero quiero ir a mi pantalla de edición en ese caso.
También quiero tener dos botones: uno para editar y
otro para eliminar, pero, por supuesto, los subtítulos y las acciones deberían ser diferentes.
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
más genérica, para que podamos usarlo para ver los detalles en la pantalla de descripción general
de productos y para editar o eliminar en la pantalla del producto del usuario. También hay una forma alternativa de manejar
esto.
Entonces, por ejemplo, cuando presionamos este componente en general, lo renombraré en select para tener un nombre más genérico que tenga sentido
en una variedad más amplia de casos de uso y también cambiaré
la forma en que recibimos estos botones aquí.
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
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
del botón de importación y ahora ir a los lugares
donde usamos el artículo del producto, que
sería la pantalla de vista general de productos, por ejemplo.
Allí ahora tenemos que importar el componente del botón y asegurarnos de que importa
sus colores, así que
importe los colores de colores constantes y ahora vaya al elemento de su producto y cámbielo de un componente de cierre automático
a un componente que haya cerrado y
abierto con su propias etiquetas de componentes. Entre estas etiquetas, ahora puede volver a agregar estos
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
lógica aquí porque ahora estamos pasando dinámicamente esto en el componente del artículo del producto pero,
por lo tanto, podemos pasar diferentes botones dependiendo de dónde
usemos ese componente del artículo del producto. Así que ahora aquí agregaré un nuevo
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
detalles, lo cortaré y lo agregaré aquí y espero obtener
la ID y el título aquí como argumento para poder reenviar la ID y el título aquí de esta
manera y ahora seleccionar el controlador de elementos es lo que quiero
activar aquí en select, recuerde que cambié el nombre de esto en el artículo del producto , este toque ahora se activa
solo en select, por lo que deberá cambiar el nombre de
esto en los lugares donde usa ese componente como aquí y luego aquí, ejecuto mi controlador de elemento select
aquí y reenvío itemData. articulo. id y itemData. articulo. título aquí para
que estos datos terminen en esta función. Estoy haciendo esto porque ahora puedo usar el
mismo controlador de elementos aquí en este botón de detalles de vista, esencialmente puedo simplemente copiar esta función anónima y agregarla
aquí a este controlador onPress de este
botón, así que ahora reutilizamos eso y lo agregamos
a carrito, bueno, enviamos esto,
esto ahora se elimina aquí del componente del artículo del producto porque ya no
tenemos ese accesorio, sino que está aquí, este accesorio que toma esta función anónima que al final debería enviar
esta acción.
Entonces, el cambio principal es que muevo los botones fuera del componente, del componente del elemento del producto al componente
de la pantalla de resumen de productos y eso nos permite hacer lo mismo que antes, si lo
guardo, eso debería funcionar como antes de. Podemos tocar un artículo, podemos ver
los detalles, podemos tocar el carrito y todo funciona, pero ahora también
podemos personalizarlo en la pantalla del producto del usuario.
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
colores constantes porque los necesitaremos para los botones de colores constantes y luego aquí en el artículo del producto , en lugar
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
nuestro propio componente personalizado
y nuevamente, agreguemos nuestros botones aquí, pero en lugar
de ver los detalles, ahora
Digo editar y eliminar y, por el momento, puedo eliminar todas las demás lógicas porque, por el
momento, no tenemos lógica para editar y eliminar, pero eso es
algo que podemos agregar más adelante.
Y aquí para seleccionar, también es solo una función vacía por el momento.
Esto tiene la ventaja de que ahora tenemos nuestros artículos como antes, pero en la sección de administración, ahora tenemos
editar y eliminar y esto nos
permite hacer cosas diferentes al reutilizar el componente del artículo del producto, que por supuesto es
bastante bueno.