Asegurémonos de poder ir a la pantalla de detalles del producto, esta
pantalla aquí y, para empezar, en el componente de la
pantalla de detalles del producto, configuraré un componente importando
React from React. Luego, allí, probablemente
también necesitemos algunas cosas de React Native, por ejemplo, realmente no puede hacer daño
tener una vista y un texto aquí y también una hoja de estilo y también el
componente de imagen, por cierto, el orden de estas importaciones aquí Por supuesto que no importa.
También quiero tener un botón allí porque quiero tener un botón para agregar al carrito aquí
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
un dispositivo muy pequeño y por lo tanto, definitivamente debe ser desplazable para que siempre
podamos ver todo el contenido. Con eso aquí,
agregaré el componente de pantalla de detalles de mi producto, nuevamente un componente funcional donde recibimos accesorios, configuraré mi hoja
de estilo aquí con la hoja de estilo. créelo y guárdelo en una constante de estilos y,
por supuesto, exporte la pantalla de detalles del producto por defecto. Con eso, comencemos de manera simple y regresemos una vista
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
que realmente podamos usar esto porque tenemos que devolver
jsx a tener un componente válido porque lo primero que quiero hacer es ajustar la
navegación y para eso en el ShopNavigator. js en la carpeta de navegación, podemos importar
la pantalla de detalles del producto aquí
desde nuestra carpeta de pantallas, la carpeta de la tienda y allí la pantalla de detalles del producto, así que ese es el archivo
en
el que acabamos de trabajar, por supuesto, y asignar esto a un identificador aquí, yo ' Lo nombraré detalle
del producto aquí.
Estas teclas, como aprendió en la sección de navegación, siempre dependen de usted,
por lo que ahora hemos asignado esta pantalla.
Esta será nuestra pantalla de inicio porque este es el primer
par clave-valor, esta es una pantalla a la que podemos ir, podemos navegar y para ir
allí, necesitamos ir a la pantalla de vista general de nuestros productos y cuando hacemos clic en ver detalle, esta es al
final la señal de que queremos ir a la pantalla de detalles del producto.
Entonces, aquí en esta función, podemos llamar a la navegación de accesorios, esta función de navegación que aprendió en
la sección de navegación y luego, le
mostré una sintaxis donde pasa un objeto Javascript donde configura un nombre
de ruta, que podría ser detalles del producto y eso lo llevará a la pantalla.
Así que ahora guardamos esto y
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
mostré,
por supuesto, que la sintaxis alternativa a eso es que simplemente pasa el nombre de pantalla como primer argumento
para navegar, por lo que
puede hacerlo también y simplemente funcionará como bien. Si también probamos esto en
Android, así es como podemos llegar allí.
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
cargar los datos del producto dentro del componente. Por lo tanto, como segundo argumento aquí, paso un objeto
Javascript que será mi parámetro para esta acción de navegación y allí puede tener los pares
clave-valor que desee, agregaré un campo de ID de producto aquí, nuevamente este nombre es totalmente depende de usted
y esto será itemData. articulo. id porque itemData. el elemento apunta a
un solo producto que tiene el aspecto que configuramos aquí en los modelos y este tiene un ID de identificación, por
lo que, por supuesto, podemos acceder a esto aquí y reenviarlo. Con eso, en la pantalla de detalles del producto,
podemos extraer esto, por supuesto, eso también es algo que aprendiste antes y que puedes practicar aquí.
Podemos obtener nuestra identificación de producto aquí simplemente llamando a props navigation get param ID de producto y esto extraerá
nuestra identificación de producto de los parámetros que recibimos.
Ahora podemos usar esa ID para obtener nuestro producto y, por supuesto, nuestros productos se almacenan en Redux.
Entonces, al final, necesitamos importar el selector de uso aquí desde React Redux, para que podamos usarlo para seleccionar un solo
producto, nuestro producto
seleccionado, por supuesto, este nombre constante también depende de usted, ahora se selecciona con la ayuda de selector de
uso que recibe nuestro estado, nuestro estado Redux y luego podemos profundizar en el segmento de productos,
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
productos disponibles pero Por supuesto, aquí no quiero cargar
todos los productos disponibles, pero en su lugar, puedo usar el método find
para encontrar un solo producto con esa función que paso para encontrar cuál se ejecuta en cada elemento de la matriz donde
obtenemos el producto donde esta función devuelve verdadero y debería devolver verdadero si la ID del producto que
estoy viendo es igual a la ID del producto que extraje de los parámetros de la ruta.
Así es como seleccionamos un solo producto y este producto único se puede usar aquí,
por lo que aquí podríamos obtener el producto seleccionado. título por ejemplo. Si ahora guardamos eso y vemos los detalles, de hecho
aquí veo
una camisa roja, si hago eso para la alfombra azul, veo la alfombra
azul aquí, así que está funcionando. Sería bueno ver que
también en
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
supuesto, sería mejor establecer
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
productos para extraerlo o realmente un poco más fácil, vamos a la descripción general del producto, que es donde
vamos a esa página y, además de pasar el ID del producto, también pasamos el título
del producto porque aquí lo tenemos fácilmente disponible y lo obtenemos con la ayuda
de itemData. articulo. título.
Ahora configuramos este parámetro también y esto hace que sea muy fácil extraerlo en la
pantalla de detalles del producto, allí en las opciones de navegación, ahora podemos agregar opciones de
navegación en la pantalla de detalles del producto y esta es ahora la forma funcional porque necesitamos extraer esto
de forma dinámica desde nuestros parámetros de ruta. Entonces, aquí obtenemos este objeto de datos de navegación que
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
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
haya elegido como identificador para esto.
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.
Con eso, estamos configurando este encabezado, veamos si eso funciona, si tratamos de ir a esa pantalla,
se ve bien,
ahora también vemos el título del producto aquí en el encabezado. Eso esta funcionando.
Ahora mencioné anteriormente que no solo deberíamos poder ir presionando ver detalles, sino también
presionar el producto en general y para
eso, podemos ir al artículo del producto y, por supuesto, tenemos el botón de ver detalles, pero
ahora podemos envolver todo el elemento, por supuesto, en
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
botones todavía se activarán de forma independiente, pero ahora
también podemos presionar en cualquier otro lugar y allí en Press, ahora también
quiero
activar lo mismo, lo hace el botón de ver detalles, quiero activar la función que recibimos en
ver detalles, así que simplemente enviaré esto a ver detalles. Y con ese simple cambio, podemos presionar en cualquier
lugar de este elemento para llevarlo a la pantalla de detalles, también en Android, donde sin embargo se
ve un poco feo y, en general, sería bueno tener este efecto dominó allí.
Ahora también aprendió cómo puede implementar esto,
necesitamos importar comentarios nativos táctiles para eso y la API de la plataforma, por lo que este objeto de plataforma
y ahora aquí en el elemento del producto, podemos configurar nuestro componente táctil aquí o lo que quiera nombrarlo , debería
tener un carácter en mayúscula para que podamos usarlo como un elemento jsx y esto
por defecto apunta a una
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
que 21, que es la versión de Android
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
cmp
táctil por lo que con esa variable que contiene dos
tipos diferentes de componentes dependiendo de dónde se está ejecutando y ahora si haga esto,
todavía tenemos ese efecto de opacidad aquí, pero tenemos un efecto dominó en Android.
Sin embargo, solo allí abajo, no en la imagen y tampoco respetando nuestras esquinas redondeadas como puede
ver.
Ahora, para solucionar el problema que no
está en la imagen, todo lo que tenemos que hacer es
cambiar la configuración allí, solo tenemos que agregar el accesorio de primer plano de uso aquí.
Ahora, en la opacidad táctil, esto no tendrá ningún efecto, pero en la retroalimentación nativa táctil, esto
asegura que el efecto dominó no se aplique al fondo, sino en primer plano, lo
que significa también a los elementos que se colocan encima de nuestro toque o dentro de Nuestro componente táctil.
Por lo tanto, ahora, esto también está en la imagen y para respetar las esquinas, las esquinas
redondeadas, en realidad lo haré
de manera un poco diferente, agregaré un componente táctil dentro de mi vista circundante en lugar de
afuera, así y ahora aquí agregaré un desbordamiento oculto en ese estilo de producto que está en esa vista que
ahora está alrededor de mi componente táctil. Con eso, sin embargo, mi sombra se pierde como se
puede ver y ahora incluso recibo un error de que necesito un solo hijo React. Por lo tanto, modifiquemos esto un poco
y agreguemos una vista adicional aquí, una vista adicional que envuelve todo, todo
mi componente táctil dentro de esa vista externa y en esa vista adicional, agregaré un estilo de estilos tocables o lo
que sea desea nombrarlo y este estilo táctil ahora se agrega aquí en mi hoja de estilo.
Esto ahora obtiene el accesorio
oculto de desbordamiento, por lo que agregamos esto aquí y ahora también recibe el mismo radio de borde que tenemos en
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
aún funciona porque el desbordamiento oculto habría recortado esto y ahora para deshacernos de ese otro
error aquí también, simplemente podemos ajustar otra vista alrededor de todo el contenido dentro del componente táctil para
que cumplamos este criterio de tener solo un elemento secundario en el componente táctil y ahora con
eso, tenemos el mismo comportamiento que antes en iOS. Por cierto, el carrito no activa esta
navegación de detalles que es buena y en Android, ahora
también tenemos ese efecto dominó que respeta nuestras esquinas redondeadas que nos lleva
a la vista de detalles y al carrito tampoco hace lo que no debería .
Entonces con eso, ahora tenemos la navegación que necesitamos,
tenemos el aspecto que necesitamos aquí.
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
debería tener.