1 00:00:02,180 --> 00:00:07,440 En la pantalla de detalles del producto, ya comenzamos a trabajar en eso, pero realmente no estamos 2 00:00:07,850 --> 00:00:10,240 produciendo nada útil allí, ahora es el momento 3 00:00:10,250 --> 00:00:11,600 de cambiar esto. 4 00:00:11,690 --> 00:00:17,570 Para eso, reemplazaré el código jsx que actualmente estamos usando allí con una vista de desplazamiento porque, como mencioné 5 00:00:17,570 --> 00:00:19,790 anteriormente, mostraremos nuestra imagen allí, nuestra 6 00:00:19,790 --> 00:00:23,510 descripción del producto y esta podría ser una descripción muy larga o 7 00:00:23,510 --> 00:00:25,790 simplemente estamos viendo esto en un dispositivo 8 00:00:25,850 --> 00:00:28,410 más pequeño o en modo horizontal, por lo 9 00:00:28,640 --> 00:00:33,020 que definitivamente queremos tener algún contenido desplazable allí y, por cierto, no necesitamos una 10 00:00:33,100 --> 00:00:36,420 lista plana aquí porque el contenido no será infinitamente largo, 11 00:00:36,440 --> 00:00:42,020 sabemos bastante bien que no lo hará tenga tanta antelación, por lo que la vista de desplazamiento 12 00:00:42,020 --> 00:00:50,210 está perfectamente bien y en esa vista de desplazamiento, ahora puede agregar un componente de imagen que genera esa imagen de producto en la parte superior, 13 00:00:50,220 --> 00:01:01,560 digamos y debajo de eso, tal vez podamos agregar nuestro botón para permitirnos agregue esto a un carrito y debajo de eso, podemos tener nuestro texto, como mostrar el precio y luego tal vez el texto 14 00:01:01,560 --> 00:01:04,260 para la descripción. Entonces, para la imagen, necesitamos 15 00:01:04,270 --> 00:01:08,980 configurar el accesorio de origen y ese es un objeto que tiene una propiedad URI y, por supuesto, tenemos nuestro producto 16 00:01:09,330 --> 00:01:14,530 seleccionado aquí, por lo que la fuente es simplemente Producto seleccionado. imageUrl porque el producto seleccionado es 17 00:01:14,620 --> 00:01:20,680 del tipo que definimos en nuestro modelo de productos. En el botón aquí, podemos agregar un título de 18 00:01:20,680 --> 00:01:26,530 agregar al carrito porque eso es al final lo que este botón debería hacer y onPress no hace 19 00:01:26,620 --> 00:01:32,970 nada por el momento, pero luego lo agregaremos al carrito. Luego, aquí quiero generar el precio, no necesitamos 20 00:01:33,010 --> 00:01:34,390 emitir el 21 00:01:34,390 --> 00:01:37,600 título porque eso ya es parte del encabezado, 22 00:01:37,600 --> 00:01:43,630 por lo que vemos el título allí, pero aquí quiero emitir el precio en dólares 23 00:01:43,630 --> 00:01:47,810 haciendo referencia al producto seleccionado. precio a fijo 2 que 24 00:01:48,100 --> 00:01:50,410 hice antes y luego allí abajo también 25 00:01:50,410 --> 00:01:56,170 la descripción, así que aquí hemos seleccionado Producto. descripción, como esta. 26 00:01:56,200 --> 00:01:56,560 Bien, 27 00:01:56,590 --> 00:01:57,670 eso se ve bien, ahora 28 00:01:57,670 --> 00:01:59,380 es tiempo de un poco de estilo, por supuesto. 29 00:01:59,380 --> 00:02:04,270 Por ejemplo, para la imagen definitivamente tendremos que establecer un ancho y una altura porque es una 30 00:02:04,270 --> 00:02:09,350 imagen de red, así que aquí agregaré el estilo de imagen que debo agregar a mi hoja de estilo. 31 00:02:09,460 --> 00:02:15,040 Ahora, para los textos aquí, este texto debe tener un estilo de precio que 32 00:02:15,580 --> 00:02:24,490 quizás tengamos que agregar y luego esto aquí, este texto debe tener un estilo de descripción tal vez, suena como un nombre apropiado. 33 00:02:24,490 --> 00:02:31,690 Ahora en la hoja de estilo, tenemos que agregar todas estas cosas, así que comencemos por la imagen. 34 00:02:31,980 --> 00:02:34,580 Allí agregaré un ancho del 100%, esto realmente 35 00:02:34,580 --> 00:02:38,730 debería tomar el ancho completo disponible y una altura de 300 tal vez y, 36 00:02:38,740 --> 00:02:40,570 por supuesto, puedes jugar con 37 00:02:40,570 --> 00:02:46,810 eso, también puedes usar un valor porcentual para eso o usar las API de dimensiones para tipo de calcular esto dinámicamente. 38 00:02:48,000 --> 00:02:52,970 A partir de entonces, quiero tener mi precio, ese texto de 39 00:02:53,080 --> 00:03:01,810 precio debe tener un tamaño de fuente de 20 porque la gente, por supuesto, debería poder verlo, un color de 40 00:03:01,870 --> 00:03:09,670 ese grisáceo, este color grisáceo oscuro que usé anteriormente y una alineación de texto del centro para que 41 00:03:09,670 --> 00:03:11,780 siempre esté centrado, también 42 00:03:11,850 --> 00:03:20,640 un margen en el eje vertical de 20 tal vez, así que alrededor de él, de 20 y luego, la descripción. 43 00:03:21,240 --> 00:03:30,660 La descripción en realidad puede tener un tamaño de fuente de digamos 14, veamos si eso funciona y allí, también use 44 00:03:30,680 --> 00:03:38,810 el centro de alineación de texto, algo así. Si guardamos eso, echemos un vistazo 45 00:03:38,810 --> 00:03:47,420 a eso, no se ve tan mal. Ahora para el botón, quiero establecer un color diferente, así que agregaré color aquí 46 00:03:47,450 --> 00:03:56,170 y estableceré los colores que necesitamos importar, por supuesto, desde nuestra carpeta de constantes, Colores. primaria y ahora si guardamos esto, 47 00:03:56,200 --> 00:04:03,500 esto se ve bastante bien. En Android, ves que el botón se encuentra directamente debajo de la imagen 48 00:04:03,680 --> 00:04:06,300 y que es un botón de ancho completo. 49 00:04:06,320 --> 00:04:07,900 Es lo mismo aquí para iOS, 50 00:04:07,910 --> 00:04:08,830 allí simplemente no 51 00:04:08,840 --> 00:04:13,940 lo vemos, pero si toco aquí, también verá que se presiona este botón y eso no es lo que quiero aquí. 52 00:04:14,150 --> 00:04:14,590 Entonces, 53 00:04:14,600 --> 00:04:23,310 lo que haré es envolver este botón en una vista que le daré un estilo de digamos acciones, a pesar de que es solo 54 00:04:23,310 --> 00:04:28,160 una acción aquí, tal vez podría tener varios botones aquí para diferentes cosas. 55 00:04:28,350 --> 00:04:32,890 Así que agregaré mi clave de acciones aquí a la hoja de 56 00:04:33,030 --> 00:04:40,530 estilo y allí, podemos establecer un margen en el eje vertical de 10 hacia arriba y hacia abajo y alinear sus 57 00:04:41,930 --> 00:04:43,260 elementos en el 58 00:04:43,430 --> 00:04:50,740 centro que, debido a que la dirección de flexión predeterminada es columna, centra horizontalmente y ahora tenemos más espacio aquí 59 00:04:50,740 --> 00:04:53,750 y lo vemos aún mejor en Android, 60 00:04:53,780 --> 00:05:00,100 más espacio y el botón ahora no se estira como debería ser, su configuración de alineación predeterminada 61 00:05:00,100 --> 00:05:05,230 ya no solo toma el ancho que necesita y está alineado en el centro. 62 00:05:05,240 --> 00:05:06,310 Así que esta 63 00:05:06,440 --> 00:05:07,050 es 64 00:05:07,070 --> 00:05:11,480 la configuración con la que iré, por supuesto, aún puede ajustar esto de diferentes 65 00:05:11,480 --> 00:05:13,150 maneras si lo desea, para 66 00:05:13,160 --> 00:05:18,360 mí esto no se ve tan mal, veamos también como un elemento diferente, tal vez también este, 67 00:05:18,440 --> 00:05:20,820 sí , todo eso se ve bastante bien. 68 00:05:20,870 --> 00:05:25,790 Ahora, para un texto más largo aquí, verán que no es tan hermoso, debería haber más espacio. 69 00:05:26,240 --> 00:05:34,700 Entonces, en realidad en la descripción, también agregaré un pequeño margen horizontal de digamos 20 para que tengamos espacio alrededor de 70 00:05:34,700 --> 00:05:42,600 esto, de modo que si volvemos a ver esto, ves que esto salta automáticamente a una nueva línea que 71 00:05:42,600 --> 00:05:43,890 debería . 72 00:05:44,970 --> 00:05:45,290 Bien, 73 00:05:45,360 --> 00:05:46,290 eso se ve 74 00:05:46,290 --> 00:05:48,380 bien, ahora tenemos la pantalla de detalles del producto. 75 00:05:48,480 --> 00:05:53,970 Ahora, antes de continuar, quiero traer mis propias fuentes y usarlas porque no estoy contento con las fuentes 76 00:05:53,970 --> 00:05:54,420 predeterminadas.