1 00:00:02,220 --> 00:00:06,510 Asegurémonos de poder ir a la pantalla de detalles del producto, esta 2 00:00:06,510 --> 00:00:09,870 pantalla aquí y, para empezar, en el componente de la 3 00:00:09,870 --> 00:00:13,170 pantalla de detalles del producto, configuraré un componente importando 4 00:00:13,170 --> 00:00:15,590 React from React. Luego, allí, probablemente 5 00:00:15,620 --> 00:00:21,150 también necesitemos algunas cosas de React Native, por ejemplo, realmente no puede hacer daño 6 00:00:21,210 --> 00:00:26,940 tener una vista y un texto aquí y también una hoja de estilo y también el 7 00:00:27,150 --> 00:00:32,880 componente de imagen, por cierto, el orden de estas importaciones aquí Por supuesto que no importa. 8 00:00:32,890 --> 00:00:38,430 También quiero tener un botón allí porque quiero tener un botón para agregar al carrito aquí 9 00:00:38,610 --> 00:00:47,250 también y, de hecho, también una vista de desplazamiento porque esta página de detalles podría tener una descripción del producto muy larga o podría verse en 10 00:00:47,250 --> 00:00:52,440 un dispositivo muy pequeño y por lo tanto, definitivamente debe ser desplazable para que siempre 11 00:00:52,440 --> 00:00:55,950 podamos ver todo el contenido. Con eso aquí, 12 00:00:55,950 --> 00:01:03,940 agregaré el componente de pantalla de detalles de mi producto, nuevamente un componente funcional donde recibimos accesorios, configuraré mi hoja 13 00:01:04,210 --> 00:01:10,420 de estilo aquí con la hoja de estilo. créelo y guárdelo en una constante de estilos y, 14 00:01:10,420 --> 00:01:17,440 por supuesto, exporte la pantalla de detalles del producto por defecto. Con eso, comencemos de manera simple y regresemos una vista 15 00:01:17,500 --> 00:01:26,340 aquí con un texto donde decimos la pantalla de detalles del producto que está justo allí para que podamos ver que navegamos con éxito allí y para 16 00:01:26,340 --> 00:01:29,570 que realmente podamos usar esto porque tenemos que devolver 17 00:01:29,610 --> 00:01:34,500 jsx a tener un componente válido porque lo primero que quiero hacer es ajustar la 18 00:01:34,500 --> 00:01:39,750 navegación y para eso en el ShopNavigator. js en la carpeta de navegación, podemos importar 19 00:01:39,750 --> 00:01:42,290 la pantalla de detalles del producto aquí 20 00:01:42,420 --> 00:01:51,020 desde nuestra carpeta de pantallas, la carpeta de la tienda y allí la pantalla de detalles del producto, así que ese es el archivo 21 00:01:51,020 --> 00:01:51,760 en 22 00:01:51,770 --> 00:01:58,750 el que acabamos de trabajar, por supuesto, y asignar esto a un identificador aquí, yo ' Lo nombraré detalle 23 00:01:58,750 --> 00:01:59,830 del producto aquí. 24 00:01:59,830 --> 00:02:03,640 Estas teclas, como aprendió en la sección de navegación, siempre dependen de usted, 25 00:02:03,640 --> 00:02:06,070 por lo que ahora hemos asignado esta pantalla. 26 00:02:06,220 --> 00:02:09,570 Esta será nuestra pantalla de inicio porque este es el primer 27 00:02:09,580 --> 00:02:14,170 par clave-valor, esta es una pantalla a la que podemos ir, podemos navegar y para ir 28 00:02:14,170 --> 00:02:20,440 allí, necesitamos ir a la pantalla de vista general de nuestros productos y cuando hacemos clic en ver detalle, esta es al 29 00:02:20,440 --> 00:02:24,700 final la señal de que queremos ir a la pantalla de detalles del producto. 30 00:02:24,700 --> 00:02:32,140 Entonces, aquí en esta función, podemos llamar a la navegación de accesorios, esta función de navegación que aprendió en 31 00:02:32,140 --> 00:02:35,260 la sección de navegación y luego, le 32 00:02:35,320 --> 00:02:40,170 mostré una sintaxis donde pasa un objeto Javascript donde configura un nombre 33 00:02:40,180 --> 00:02:46,340 de ruta, que podría ser detalles del producto y eso lo llevará a la pantalla. 34 00:02:46,340 --> 00:02:47,920 Así que ahora guardamos esto y 35 00:02:47,930 --> 00:02:55,430 hacemos clic en ver detalles, de hecho vamos a la pantalla de detalles del producto. Ahora, como una anotación en la sección de navegación, también le 36 00:02:55,430 --> 00:02:55,980 mostré, 37 00:02:55,990 --> 00:03:02,270 por supuesto, que la sintaxis alternativa a eso es que simplemente pasa el nombre de pantalla como primer argumento 38 00:03:02,270 --> 00:03:03,970 para navegar, por lo que 39 00:03:03,980 --> 00:03:09,080 puede hacerlo también y simplemente funcionará como bien. Si también probamos esto en 40 00:03:09,080 --> 00:03:11,750 Android, así es como podemos llegar allí. 41 00:03:11,940 --> 00:03:19,410 Ahora, obviamente, el objetivo no es solo ir allí, sino también reenviar nuestros datos o nuestra ID del producto al menos para que podamos 42 00:03:19,410 --> 00:03:25,200 cargar los datos del producto dentro del componente. Por lo tanto, como segundo argumento aquí, paso un objeto 43 00:03:25,710 --> 00:03:30,380 Javascript que será mi parámetro para esta acción de navegación y allí puede tener los pares 44 00:03:30,510 --> 00:03:36,060 clave-valor que desee, agregaré un campo de ID de producto aquí, nuevamente este nombre es totalmente depende de usted 45 00:03:36,090 --> 00:03:42,120 y esto será itemData. articulo. id porque itemData. el elemento apunta a 46 00:03:42,120 --> 00:03:48,480 un solo producto que tiene el aspecto que configuramos aquí en los modelos y este tiene un ID de identificación, por 47 00:03:48,480 --> 00:03:55,350 lo que, por supuesto, podemos acceder a esto aquí y reenviarlo. Con eso, en la pantalla de detalles del producto, 48 00:03:55,380 --> 00:04:01,410 podemos extraer esto, por supuesto, eso también es algo que aprendiste antes y que puedes practicar aquí. 49 00:04:01,410 --> 00:04:11,880 Podemos obtener nuestra identificación de producto aquí simplemente llamando a props navigation get param ID de producto y esto extraerá 50 00:04:11,880 --> 00:04:17,160 nuestra identificación de producto de los parámetros que recibimos. 51 00:04:17,180 --> 00:04:22,580 Ahora podemos usar esa ID para obtener nuestro producto y, por supuesto, nuestros productos se almacenan en Redux. 52 00:04:22,640 --> 00:04:29,510 Entonces, al final, necesitamos importar el selector de uso aquí desde React Redux, para que podamos usarlo para seleccionar un solo 53 00:04:29,510 --> 00:04:30,830 producto, nuestro producto 54 00:04:30,830 --> 00:04:37,220 seleccionado, por supuesto, este nombre constante también depende de usted, ahora se selecciona con la ayuda de selector de 55 00:04:37,220 --> 00:04:43,010 uso que recibe nuestro estado, nuestro estado Redux y luego podemos profundizar en el segmento de productos, 56 00:04:43,070 --> 00:04:51,420 nuevamente ese nombre de segmento es el que usa aquí en productos reductores combinados en mi caso y allí podemos obtener acceso a todos los 57 00:04:51,470 --> 00:04:54,650 productos disponibles pero Por supuesto, aquí no quiero cargar 58 00:04:54,680 --> 00:04:59,230 todos los productos disponibles, pero en su lugar, puedo usar el método find 59 00:04:59,240 --> 00:05:06,650 para encontrar un solo producto con esa función que paso para encontrar cuál se ejecuta en cada elemento de la matriz donde 60 00:05:06,650 --> 00:05:12,560 obtenemos el producto donde esta función devuelve verdadero y debería devolver verdadero si la ID del producto que 61 00:05:12,560 --> 00:05:18,290 estoy viendo es igual a la ID del producto que extraje de los parámetros de la ruta. 62 00:05:18,290 --> 00:05:23,470 Así es como seleccionamos un solo producto y este producto único se puede usar aquí, 63 00:05:23,470 --> 00:05:32,930 por lo que aquí podríamos obtener el producto seleccionado. título por ejemplo. Si ahora guardamos eso y vemos los detalles, de hecho 64 00:05:32,930 --> 00:05:33,860 aquí veo 65 00:05:33,860 --> 00:05:37,970 una camisa roja, si hago eso para la alfombra azul, veo la alfombra 66 00:05:37,970 --> 00:05:41,590 azul aquí, así que está funcionando. Sería bueno ver que 67 00:05:41,720 --> 00:05:43,110 también en 68 00:05:43,280 --> 00:05:53,810 el encabezado y hay dos opciones, ahora podríamos usar accesorios. navegación establece el parámetro aquí y también envuelve esto en la llamada de efecto de uso, por 69 00:05:53,810 --> 00:05:55,030 supuesto, sería mejor establecer 70 00:05:55,030 --> 00:06:01,880 nuestro título con establecer parámetro y usarlo aquí en las opciones de navegación que tenemos que agregar a los detalles de los 71 00:06:01,880 --> 00:06:07,690 productos para extraerlo o realmente un poco más fácil, vamos a la descripción general del producto, que es donde 72 00:06:07,700 --> 00:06:12,710 vamos a esa página y, además de pasar el ID del producto, también pasamos el título 73 00:06:12,710 --> 00:06:17,000 del producto porque aquí lo tenemos fácilmente disponible y lo obtenemos con la ayuda 74 00:06:17,000 --> 00:06:20,120 de itemData. articulo. título. 75 00:06:20,150 --> 00:06:25,400 Ahora configuramos este parámetro también y esto hace que sea muy fácil extraerlo en la 76 00:06:25,820 --> 00:06:31,490 pantalla de detalles del producto, allí en las opciones de navegación, ahora podemos agregar opciones de 77 00:06:33,930 --> 00:06:40,440 navegación en la pantalla de detalles del producto y esta es ahora la forma funcional porque necesitamos extraer esto 78 00:06:41,730 --> 00:06:48,390 de forma dinámica desde nuestros parámetros de ruta. Entonces, aquí obtenemos este objeto de datos de navegación que 79 00:06:48,420 --> 00:06:55,590 también tiene un accesorio de navegación, necesitamos devolver nuestro objeto Javascript, nuestro objeto de configuración de opciones de navegación aquí, esto debería ser 80 00:06:55,620 --> 00:07:07,770 opciones, por supuesto, y allí, podemos establecer el título del encabezado en navData. navegación. El título del producto getParam o lo que 81 00:07:07,830 --> 00:07:11,170 haya elegido como identificador para esto. 82 00:07:11,190 --> 00:07:17,060 Así que aquí estoy usando el título del producto porque en la pantalla de resumen del producto, configuro esto como título del producto. 83 00:07:19,600 --> 00:07:25,600 Con eso, estamos configurando este encabezado, veamos si eso funciona, si tratamos de ir a esa pantalla, 84 00:07:25,900 --> 00:07:27,130 se ve bien, 85 00:07:27,130 --> 00:07:34,560 ahora también vemos el título del producto aquí en el encabezado. Eso esta funcionando. 86 00:07:34,560 --> 00:07:39,420 Ahora mencioné anteriormente que no solo deberíamos poder ir presionando ver detalles, sino también 87 00:07:39,420 --> 00:07:41,840 presionar el producto en general y para 88 00:07:42,170 --> 00:07:47,930 eso, podemos ir al artículo del producto y, por supuesto, tenemos el botón de ver detalles, pero 89 00:07:47,930 --> 00:07:51,310 ahora podemos envolver todo el elemento, por supuesto, en 90 00:07:51,440 --> 00:08:01,000 un toque y allí podemos usar opacidad táctil y envolver todo este elemento con opacidad táctil, así que envuelva esto alrededor de toda nuestra vista aquí, estos 91 00:08:01,160 --> 00:08:04,430 botones todavía se activarán de forma independiente, pero ahora 92 00:08:04,430 --> 00:08:09,110 también podemos presionar en cualquier otro lugar y allí en Press, ahora también 93 00:08:09,130 --> 00:08:09,900 quiero 94 00:08:09,920 --> 00:08:15,710 activar lo mismo, lo hace el botón de ver detalles, quiero activar la función que recibimos en 95 00:08:15,740 --> 00:08:22,730 ver detalles, así que simplemente enviaré esto a ver detalles. Y con ese simple cambio, podemos presionar en cualquier 96 00:08:22,730 --> 00:08:28,970 lugar de este elemento para llevarlo a la pantalla de detalles, también en Android, donde sin embargo se 97 00:08:28,970 --> 00:08:34,080 ve un poco feo y, en general, sería bueno tener este efecto dominó allí. 98 00:08:34,220 --> 00:08:36,980 Ahora también aprendió cómo puede implementar esto, 99 00:08:37,070 --> 00:08:44,760 necesitamos importar comentarios nativos táctiles para eso y la API de la plataforma, por lo que este objeto de plataforma 100 00:08:44,760 --> 00:08:52,980 y ahora aquí en el elemento del producto, podemos configurar nuestro componente táctil aquí o lo que quiera nombrarlo , debería 101 00:08:52,980 --> 00:08:58,650 tener un carácter en mayúscula para que podamos usarlo como un elemento jsx y esto 102 00:08:58,660 --> 00:09:00,710 por defecto apunta a una 103 00:09:00,720 --> 00:09:10,050 opacidad táctil, digamos, pero si el sistema operativo de la plataforma es igual a Android y la versión de la plataforma es mayor o igual 104 00:09:10,050 --> 00:09:13,240 que 21, que es la versión de Android 105 00:09:13,440 --> 00:09:22,410 necesitamos admitir el efecto dominó, podemos establecer cmp táctil igual a la retroalimentación nativa táctil y ahora podemos reemplazar la opacidad táctil allí con 106 00:09:22,410 --> 00:09:23,100 cmp 107 00:09:24,210 --> 00:09:28,120 táctil por lo que con esa variable que contiene dos 108 00:09:28,220 --> 00:09:34,040 tipos diferentes de componentes dependiendo de dónde se está ejecutando y ahora si haga esto, 109 00:09:34,850 --> 00:09:40,330 todavía tenemos ese efecto de opacidad aquí, pero tenemos un efecto dominó en Android. 110 00:09:40,340 --> 00:09:48,980 Sin embargo, solo allí abajo, no en la imagen y tampoco respetando nuestras esquinas redondeadas como puede 111 00:09:48,980 --> 00:09:49,930 ver. 112 00:09:50,390 --> 00:09:52,770 Ahora, para solucionar el problema que no 113 00:09:52,850 --> 00:09:56,500 está en la imagen, todo lo que tenemos que hacer es 114 00:09:56,690 --> 00:10:01,990 cambiar la configuración allí, solo tenemos que agregar el accesorio de primer plano de uso aquí. 115 00:10:02,050 --> 00:10:07,570 Ahora, en la opacidad táctil, esto no tendrá ningún efecto, pero en la retroalimentación nativa táctil, esto 116 00:10:07,570 --> 00:10:12,850 asegura que el efecto dominó no se aplique al fondo, sino en primer plano, lo 117 00:10:12,910 --> 00:10:19,180 que significa también a los elementos que se colocan encima de nuestro toque o dentro de Nuestro componente táctil. 118 00:10:19,180 --> 00:10:25,360 Por lo tanto, ahora, esto también está en la imagen y para respetar las esquinas, las esquinas 119 00:10:25,360 --> 00:10:27,560 redondeadas, en realidad lo haré 120 00:10:27,670 --> 00:10:33,840 de manera un poco diferente, agregaré un componente táctil dentro de mi vista circundante en lugar de 121 00:10:35,550 --> 00:10:42,860 afuera, así y ahora aquí agregaré un desbordamiento oculto en ese estilo de producto que está en esa vista que 122 00:10:42,870 --> 00:10:48,260 ahora está alrededor de mi componente táctil. Con eso, sin embargo, mi sombra se pierde como se 123 00:10:48,260 --> 00:10:55,710 puede ver y ahora incluso recibo un error de que necesito un solo hijo React. Por lo tanto, modifiquemos esto un poco 124 00:10:55,710 --> 00:11:01,590 y agreguemos una vista adicional aquí, una vista adicional que envuelve todo, todo 125 00:11:01,590 --> 00:11:11,370 mi componente táctil dentro de esa vista externa y en esa vista adicional, agregaré un estilo de estilos tocables o lo 126 00:11:11,370 --> 00:11:19,090 que sea desea nombrarlo y este estilo táctil ahora se agrega aquí en mi hoja de estilo. 127 00:11:19,180 --> 00:11:21,260 Esto ahora obtiene el accesorio 128 00:11:21,370 --> 00:11:28,090 oculto de desbordamiento, por lo que agregamos esto aquí y ahora también recibe el mismo radio de borde que tenemos en 129 00:11:28,090 --> 00:11:36,000 todo el carrito, por lo que el radio de borde de 10 aquí y esto ahora se asegurará de que mantengamos nuestra sombra, para que 130 00:11:36,000 --> 00:11:41,220 aún funciona porque el desbordamiento oculto habría recortado esto y ahora para deshacernos de ese otro 131 00:11:41,220 --> 00:11:47,230 error aquí también, simplemente podemos ajustar otra vista alrededor de todo el contenido dentro del componente táctil para 132 00:11:47,240 --> 00:11:52,890 que cumplamos este criterio de tener solo un elemento secundario en el componente táctil y ahora con 133 00:11:52,890 --> 00:11:58,620 eso, tenemos el mismo comportamiento que antes en iOS. Por cierto, el carrito no activa esta 134 00:11:58,620 --> 00:12:01,940 navegación de detalles que es buena y en Android, ahora 135 00:12:02,070 --> 00:12:06,780 también tenemos ese efecto dominó que respeta nuestras esquinas redondeadas que nos lleva 136 00:12:07,050 --> 00:12:12,270 a la vista de detalles y al carrito tampoco hace lo que no debería . 137 00:12:12,270 --> 00:12:15,050 Entonces con eso, ahora tenemos la navegación que necesitamos, 138 00:12:15,060 --> 00:12:17,210 tenemos el aspecto que necesitamos aquí. 139 00:12:17,490 --> 00:12:23,490 Ahora podemos ir a la página de detalles y ahora deberíamos asegurarnos de que esta página de detalles también tenga el aspecto que 140 00:12:23,490 --> 00:12:24,020 debería tener.