Comencemos con el diálogo de confirmación aquí en la pantalla de edición del producto. Simplemente podemos importar la API de alerta
de React Native que nos permite mostrar una buena alerta y luego agregar un nuevo método aquí tal vez, todos podríamos hacerlo
en línea, pero para tener un código un poco más estructurado donde tengo mi controlador de eliminación.
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
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
título de si
está
seguro de mensaje, ¿realmente desea eliminar este elemento y luego
una matriz con todos los botones
que queremos presentar donde el botón número uno tiene un texto de no y un estilo predeterminado.
Solo hay tres estilos predeterminados o estilos preconfigurados entre los que puede elegir y ningún controlador especial
en este primer botón.
El segundo botón tiene sí, allí quiero
tener un estilo destructivo para marcar esto, ya
que esto eliminará algo y el controlador onPress aquí está al final sosteniendo una función que realmente
despachará la acción de eliminación.
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
el componente incorrecto que acabo de ver.
Cortemos esto, no está
dentro de la pantalla de edición de productos,
no necesitamos importar la alerta allí, es
de la pantalla de productos de usuario de la que estoy hablando. Allí debemos importar la alerta, allí debemos
agregar este controlador y ahora el controlador de eliminación debe asignarse a este botón de
eliminación aquí, por lo que aquí solo podemos señalar el controlador de eliminación y esta función anónima
se puede cortar desde allí y se puede movido aquí y reemplazar este controlador onPress para este botón y
ahora con eso, deberíamos obtener esta ventana emergente, este diálogo de confirmación antes de que realmente eliminemos algo.
Entonces, si hago clic en Eliminar, ahora pregunto, si
presiono
no, no pasa nada,
solo si hago clic en Sí, eliminamos esto. Un pequeño error, por supuesto, es que
los datos del artículo que necesitamos
deben estar disponibles.
Entonces, aquí reenviamos la ID que queremos eliminar, por lo que,
en realidad, para el controlador de eliminación, necesitamos la ID del producto al que estamos aplicando este controlador para
que aquí tenga esa ID disponible y eso significa que cuando se llama al controlador de eliminación allá
abajo, debemos asegurarnos de que obtenga la identificación.
Entonces, hay dos formas de hacerlo, una función anónima
en la que ejecutamos el controlador de eliminación manualmente y reenviamos itemData. articulo. id o alternativa
a eso, pasando el controlador de eliminación de esta manera pero usando bind para preconfigurar cualquier argumento
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
importa, pero el segundo argumento ahora es el
primer argumento que obtendrá el controlador de eliminación, así que
aquí pasamos itemData. articulo. carné de identidad. Ahora con eso, nos
aseguramos de que podamos presionar sí y funcionará, si ahora volvemos aquí a admin, hacemos clic en eliminar, presionamos
sí, esto realmente funciona y si presionamos no, no pasa nada, sí lo elimina.
Así que eso es
lo primero y para asegurarnos de que naveguemos hacia atrás, si guardamos esto, ahora tenemos que ir a
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,
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
administración y por ahora presento un producto vacío, por supuesto recibo una
advertencia, pero esto generalmente funciona, esto retrocede y si edito un producto, esto
también funciona.
Así que ahora con esto, hemos terminado con respecto a toda esa gestión de
entrada, lo que ahora quiero hacer antes de que realmente termine todo esto es que ahora
quiero optimizar un poco más
el producto y la forma en que ' reutilizando nuestra tarjeta, mira aquí con la sombra y así
sucesivamente porque la
estamos usando en múltiples componentes y si te encuentras usando algo en múltiples componentes, siempre querrás pensar
si puedes optimizar esto un poco
más y, de hecho, aquí , tenemos potencial de optimización.
Entonces, ¿cómo podemos optimizar esto?
Bueno, podríamos crear un componente separado aquí en nuestra carpeta UI de la carpeta
de componentes que denominamos carrito. js, donde acabamos de guardar este look de carrito. Un componente de
carrito puede ser un componente muy simple al final. Importamos React de React aquí porque necesitamos crear un componente e importamos
una vista de React Native, así como así y ahora aquí, creamos nuestro componente de carrito donde simplemente obtenemos nuestros accesorios, devolvemos algunos
jsx y exportamos este componente en el final, aunque también tendremos que configurar algunos estilos porque esa es
la idea central detrás de
este componente, se trata de darnos algunos estilos preconfigurados. Así que también agregaré mis estilos constantes con
Stylesheet. crear
allí y ahora, ¿cuál es el código jsx que quiero devolver aquí?
Bueno, esa es una vista, una vista que realmente envolverá lo que pasemos allí, así
que entre las etiquetas de mi componente, así que solo apoya a los niños allí,
pero ahora esa vista puede obtener un estilo predeterminado aquí, que nombraré carrito y eso debería sean los estilos con
los que de otra manera copio.
Entonces, aquí, el estilo de mi carrito en este componente del carrito es exactamente el que tengo aquí, el artículo del producto,
es este material de
sombras aquí, la elevación, el radio del borde y el color de fondo. Puedes cortar todo eso y moverlo al carrito
aquí.
Ahora para poder configurar esto un poco, en realidad mejoraré esto y estableceré
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.
Así que ahora incluso podemos establecer un accesorio de estilo cuando usamos nuestro carrito y
pasamos nuestros propios estilos que se fusionarán con estos estilos de tarjeta predeterminados porque esto ahora me
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
y reemplace esta
vista aquí, esta vista exterior con
tarjeta y, por supuesto, también reemplace la etiqueta de cierre y aún pase aquí las especificaciones de mi
producto, así que esta altura y el margen .
Esto se fusionará con el otro aspecto de la tarjeta y todo entre las etiquetas
de apertura y cierre de la tarjeta simplemente funcionará, paso esto a mi tarjeta aquí con
la ayuda de los accesorios de los niños. Ahora, lo mismo para el artículo
de pedido, solo tenemos que importar la tarjeta y ahora ir a la carpeta de la interfaz de usuario, a la tarjeta
aquí y luego usar la tarjeta en lugar de esa vista,
esa vista exterior aquí, reemplazarla con una tarjeta y deshacerse de estos estilos de tarjeta aquí,
el material de sombra, la elevación, el radio del borde y el color de fondo y
solo mantienen los estilos especiales en los que desea fusionarse. Y ahora lo último, el último lugar donde podemos usar esto es
la pantalla del carrito, allí también tengo mi resumen que usa estos estilos de tarjeta.
Una vez más, podemos importar el componente de la tarjeta desde la carpeta de componentes, la carpeta de
la interfaz de usuario allí y allá, desde el carrito. js y ahora use el componente de tarjeta en lugar de ver
en el lugar donde queremos
estos estilos de tarjeta, por lo que aquí sería la vista que tenía
los estilos de resumen, reemplazaré esto con tarjeta. Y en los estilos de resumen, mantenemos todo
lo específico de esta pantalla o de este componente, pero podemos eliminar el color de la sombra, el radio
de la sombra, la elevación, el color de fondo del radio del borde, todo eso se puede eliminar.
Ahora guardemos eso y verá que, por supuesto, la aplicación aún funciona y se
ve de la
misma manera que antes si agrego esto al carrito, por ejemplo, y ordeno esto y veo mis pedidos,
todo esto se ve como lo hacía antes, pero ahora lo hace con un código un poco más óptimo en
el que reutilizamos nuestros estilos y tenemos un componente de presentación separado
para que nuestros otros componentes puedan ser un poco más ágiles y no nos repitamos
a menudo al configurar ese aspecto de carro. Otra ventaja es que no podemos escribir mal, si establecemos el
radio de sombra en 8 en un componente y 10 en otro, entonces nuestra aplicación podría parecer un poco inconsistente.
Evitamos esto al tener algunos componentes centrados en el estilo central que configuran estos estilos centrales que luego usamos en
otros componentes como lo estamos haciendo aquí.