En la pantalla de detalles del producto, ya comenzamos a trabajar en eso, pero realmente no estamos
produciendo nada útil allí, ahora es el momento
de cambiar esto.
Para eso, reemplazaré el código jsx que actualmente estamos usando allí con una vista de desplazamiento porque, como mencioné
anteriormente, mostraremos nuestra imagen allí, nuestra
descripción del producto y esta podría ser una descripción muy larga o
simplemente estamos viendo esto en un dispositivo
más pequeño o en modo horizontal, por lo
que definitivamente queremos tener algún contenido desplazable allí y, por cierto, no necesitamos una
lista plana aquí porque el contenido no será infinitamente largo,
sabemos bastante bien que no lo hará tenga tanta antelación, por lo que la vista de desplazamiento
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,
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
para la descripción. Entonces, para la imagen, necesitamos
configurar el accesorio de origen y ese es un objeto que tiene una propiedad URI y, por supuesto, tenemos nuestro producto
seleccionado aquí, por lo que la fuente es simplemente Producto seleccionado. imageUrl porque el producto seleccionado es
del tipo que definimos en nuestro modelo de productos. En el botón aquí, podemos agregar un título de
agregar al carrito porque eso es al final lo que este botón debería hacer y onPress no hace
nada por el momento, pero luego lo agregaremos al carrito. Luego, aquí quiero generar el precio, no necesitamos
emitir el
título porque eso ya es parte del encabezado,
por lo que vemos el título allí, pero aquí quiero emitir el precio en dólares
haciendo referencia al producto seleccionado. precio a fijo 2 que
hice antes y luego allí abajo también
la descripción, así que aquí hemos seleccionado Producto. descripción, como esta.
Bien,
eso se ve bien, ahora
es tiempo de un poco de estilo, por supuesto.
Por ejemplo, para la imagen definitivamente tendremos que establecer un ancho y una altura porque es una
imagen de red, así que aquí agregaré el estilo de imagen que debo agregar a mi hoja de estilo.
Ahora, para los textos aquí, este texto debe tener un estilo de precio que
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.
Ahora en la hoja de estilo, tenemos que agregar todas estas cosas, así que comencemos por la imagen.
Allí agregaré un ancho del 100%, esto realmente
debería tomar el ancho completo disponible y una altura de 300 tal vez y,
por supuesto, puedes jugar con
eso, también puedes usar un valor porcentual para eso o usar las API de dimensiones para tipo de calcular esto dinámicamente.
A partir de entonces, quiero tener mi precio, ese texto de
precio debe tener un tamaño de fuente de 20 porque la gente, por supuesto, debería poder verlo, un color de
ese grisáceo, este color grisáceo oscuro que usé anteriormente y una alineación de texto del centro para que
siempre esté centrado, también
un margen en el eje vertical de 20 tal vez, así que alrededor de él, de 20 y luego, la descripción.
La descripción en realidad puede tener un tamaño de fuente de digamos 14, veamos si eso funciona y allí, también use
el centro de alineación de texto, algo así. Si guardamos eso, echemos un vistazo
a eso, no se ve tan mal. Ahora para el botón, quiero establecer un color diferente, así que agregaré color aquí
y estableceré los colores que necesitamos importar, por supuesto, desde nuestra carpeta de constantes, Colores. primaria y ahora si guardamos esto,
esto se ve bastante bien. En Android, ves que el botón se encuentra directamente debajo de la imagen
y que es un botón de ancho completo.
Es lo mismo aquí para iOS,
allí simplemente no
lo vemos, pero si toco aquí, también verá que se presiona este botón y eso no es lo que quiero aquí.
Entonces,
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
una acción aquí, tal vez podría tener varios botones aquí para diferentes cosas.
Así que agregaré mi clave de acciones aquí a la hoja de
estilo y allí, podemos establecer un margen en el eje vertical de 10 hacia arriba y hacia abajo y alinear sus
elementos en el
centro que, debido a que la dirección de flexión predeterminada es columna, centra horizontalmente y ahora tenemos más espacio aquí
y lo vemos aún mejor en Android,
más espacio y el botón ahora no se estira como debería ser, su configuración de alineación predeterminada
ya no solo toma el ancho que necesita y está alineado en el centro.
Así que esta
es
la configuración con la que iré, por supuesto, aún puede ajustar esto de diferentes
maneras si lo desea, para
mí esto no se ve tan mal, veamos también como un elemento diferente, tal vez también este,
sí , todo eso se ve bastante bien.
Ahora, para un texto más largo aquí, verán que no es tan hermoso, debería haber más espacio.
Entonces, en realidad en la descripción, también agregaré un pequeño margen horizontal de digamos 20 para que tengamos espacio alrededor de
esto, de modo que si volvemos a ver esto, ves que esto salta automáticamente a una nueva línea que
debería .
Bien,
eso se ve
bien, ahora tenemos la pantalla de detalles del producto.
Ahora, antes de continuar, quiero traer mis propias fuentes y usarlas porque no estoy contento con las fuentes
predeterminadas.