1
00:00:02,200 --> 00:00:08,590
Así que asegurémonos de que nuestros artículos de producto en la pantalla de descripción general del producto se vean un poco

2
00:00:11,860 --> 00:00:16,520
mejor de lo que están buscando actualmente. En este momento, por supuesto, cada artículo del producto

3
00:00:16,540 --> 00:00:22,090
solo se representa como un texto, como un componente de texto y eso no es lo que quiero aquí, en cambio, eliminaré esa importación y

4
00:00:22,090 --> 00:00:24,970
crearé un nuevo componente que debería ser responsable de mi artículo del producto.

5
00:00:25,060 --> 00:00:31,540
Ahora, una nota importante sobre dónde creamos ese componente, podemos crearlo aquí en la Descripción

6
00:00:31,560 --> 00:00:35,510
general de los productos. También en el archivo js, por

7
00:00:35,530 --> 00:00:41,890
supuesto, podemos tener más de un componente por archivo, por lo que aquí podría agregar el componente de mi artículo del producto o

8
00:00:41,890 --> 00:00:47,250
como quiera llamarlo, así, entonces podemos usar este componente en este archivo, que por supuesto lo que planeo hacer

9
00:00:47,290 --> 00:00:52,870
Este es un patrón que puede usar si tiene un componente que está muy vinculado a otro componente y

10
00:00:53,080 --> 00:00:57,070
solo lo está dividiendo para que cada componente sea un poco más legible.

11
00:00:57,370 --> 00:01:03,160
Una vez que estos componentes separados se vuelven muy grandes, aún debería considerar dividirlos en archivos separados para

12
00:01:03,190 --> 00:01:08,350
que sus archivos permanezcan pequeños y si las personas desean ver uno de los dos componentes,

13
00:01:08,350 --> 00:01:12,700
no tienen que desplazarse sobre el otro componente Puede que no les interese.

14
00:01:12,820 --> 00:01:18,730
Eso es una cosa a tener en cuenta. Por supuesto, si también planea usar un componente en

15
00:01:19,150 --> 00:01:25,990
otro componente, siempre debe almacenarlo en un archivo separado, no solo para que pueda exportarlo como predeterminado porque también podría exportarlo

16
00:01:25,990 --> 00:01:29,950
si está almacenado junto con otro componente, esa no es la razón

17
00:01:30,520 --> 00:01:36,550
principal, pero principalmente para dejar en claro que este es un componente independiente que podría y será utilizado en

18
00:01:36,550 --> 00:01:38,310
diferentes partes de su aplicación.

19
00:01:38,350 --> 00:01:45,550
Ahora, el elemento del producto aquí no solo no será súper pequeño, lo que por sí solo sería una razón para colocarlo en

20
00:01:45,550 --> 00:01:51,460
un archivo separado, sino que también lo usaré en un componente diferente más adelante o en diferentes lugares

21
00:01:51,460 --> 00:01:57,970
de la aplicación, no solo es relevante a la pantalla de resumen de productos y, por lo tanto, lo agregaré en

22
00:01:57,970 --> 00:02:04,030
la carpeta de componentes y en esa carpeta de componentes, para organizar un poco mis componentes, agregaré una subcarpeta

23
00:02:04,120 --> 00:02:10,300
de la tienda donde quiero colocar todos los componentes que están directamente relacionado con la función de tienda o con

24
00:02:10,300 --> 00:02:12,950
las funciones en general de mi aplicación.

25
00:02:13,090 --> 00:02:19,390
Entonces, allí en la subcarpeta de la tienda, agregaré este ProductItem. js y verás qué otras carpetas

26
00:02:19,390 --> 00:02:21,540
agregaré aquí más adelante.

27
00:02:21,550 --> 00:02:27,640
Ahora, de nuevo, todos estos patrones y prácticas que le estoy mostrando aquí son solo posibles formas de hacerlo, en

28
00:02:28,360 --> 00:02:34,480
general en mis cursos y también en este curso, le muestro todas las mejores prácticas que puede usar, pero a menudo

29
00:02:34,480 --> 00:02:37,270
en la programación, no hay solo una forma

30
00:02:37,390 --> 00:02:43,180
correcta o incorrecta, por lo que las prácticas y los patrones que estoy mostrando aquí son prácticas y patrones que

31
00:02:43,180 --> 00:02:48,670
verá en otros proyectos también, pero también puede ver otras estructuras de carpetas, al final siempre puede trabajar

32
00:02:48,670 --> 00:02:55,480
con la estructura que funciona para ti, no hay una elección correcta o incorrecta aquí, solo quiero explicarte mi razonamiento para usar esta

33
00:02:55,480 --> 00:03:00,910
estructura que espero te ayude a entender por qué la uso y por qué vale la pena pensarlo.

34
00:03:01,900 --> 00:03:10,960
Así que aquí, el archivo del elemento del producto, el ProductItem. Por supuesto, el archivo js contendrá el componente del elemento del producto, que es un

35
00:03:10,960 --> 00:03:16,110
componente funcional normal que recibe accesorios y al final devolverá el código jsx y, por lo tanto,

36
00:03:16,120 --> 00:03:22,750
dado que contiene el código jsx, debemos importar React from React y aquí, también importo cosas de React Native porque aquí ahora

37
00:03:23,170 --> 00:03:30,070
trabajaré con estas primitivas React Native para construir realmente mi componente porque a partir de ahí, necesitaré la vista, necesitaré el texto, también

38
00:03:30,520 --> 00:03:34,930
quiero usar la imagen porque ' Mostraremos la imagen del producto aquí y también

39
00:03:34,930 --> 00:03:42,310
la hoja de estilo porque definitivamente también le daremos un estilo. Por lo tanto, también puede agregar una constante de estilos aquí

40
00:03:42,310 --> 00:03:48,190
que creamos con la hoja de estilo. creamos a los que pasamos un objeto Javascript

41
00:03:48,190 --> 00:03:56,170
y, al final, exportamos este artículo del producto aquí por defecto, por supuesto. Ahora aquí, en este componente, quiero decir, podemos comenzar a

42
00:03:56,170 --> 00:04:02,350
crear el código jsx que constituye el artículo del producto y este será un componente de

43
00:04:02,350 --> 00:04:08,500
presentación, lo que significa que no habrá lógica aquí, no gestionaremos ningún estado interno, este solo

44
00:04:08,530 --> 00:04:14,630
será un componente que podemos usar en otros componentes para obtener el estilo y el

45
00:04:14,630 --> 00:04:21,250
diseño correctos de la caja, por lo que este componente será responsable de usar ciertos componentes React

46
00:04:21,400 --> 00:04:28,090
Native y diseñarlos y diseñarlos de cierta manera. Entonces, aquí, al final quiero devolver una vista

47
00:04:28,090 --> 00:04:34,150
que envuelve todo, que organiza todo, que también podemos diseñar para que este carro

48
00:04:34,150 --> 00:04:42,100
se vea con quizás una sombra paralela, tal vez esquinas redondeadas, lo que quieras y allí, ahora tiene diferentes

49
00:04:42,100 --> 00:04:50,460
partes, por ejemplo, definitivamente tendremos la imagen allí, la imagen del producto, también quiero tener el título y el precio,

50
00:04:50,460 --> 00:04:53,480
por lo que necesitaremos un texto aquí,

51
00:04:53,700 --> 00:05:04,630
así que para el título aquí y aquí, entonces por el precio en dólares y por debajo de eso, también quiero tener una vista con botones,

52
00:05:05,200 --> 00:05:07,650
por lo que aquí podemos usar

53
00:05:07,650 --> 00:05:14,680
el componente de botón incorporado por el momento, donde luego podemos agregar un producto al carrito

54
00:05:14,680 --> 00:05:22,120
o también ver los detalles , entonces, básicamente, donde tenemos estas dos opciones y, por supuesto, tendremos que

55
00:05:22,120 --> 00:05:26,760
agregar controladores onPress aquí. Ese es el esqueleto muy básico, probablemente

56
00:05:26,770 --> 00:05:30,880
no el último, tendremos que ver cómo podemos diseñar todo aquí, pero ese es

57
00:05:30,930 --> 00:05:32,390
el diseño que quiero.

58
00:05:32,500 --> 00:05:37,460
Por cierto, envuelvo mis botones aquí porque quiero tenerlos uno al lado del otro en la fila y

59
00:05:37,510 --> 00:05:43,030
al tener una vista a su alrededor, podemos diseñar esa vista de modo que use la fila de dirección flexible

60
00:05:43,040 --> 00:05:43,960
y así sucesivamente.

61
00:05:43,990 --> 00:05:45,040
Entonces, esa

62
00:05:45,040 --> 00:05:47,320
es una configuración con la

63
00:05:47,440 --> 00:05:49,850
que podemos trabajar aquí, ahora agreguemos

64
00:05:49,960 --> 00:05:53,980
un poco de estilo y para eso quiero usar o

65
00:05:53,980 --> 00:05:59,980
comenzar aquí en la vista circundante donde configuro productos de estilos como este, por lo

66
00:05:59,980 --> 00:06:03,900
tanto, aquí en la hoja de estilos, agrego productos como

67
00:06:04,020 --> 00:06:07,200
ese, agregue mi clave de producto aquí y,

68
00:06:07,210 --> 00:06:17,650
por supuesto, de nuevo, depende totalmente de usted cómo desea diseñar esto, quiero tener esa apariencia de tarjeta, por lo tanto, agregaré una sombra, un color de

69
00:06:17,650 --> 00:06:27,580
sombra que puede ser negro, una opacidad de sombra que puede ser 0. 26, un desplazamiento de sombra donde tengo el desplazamiento de ancho de cero y

70
00:06:27,610 --> 00:06:32,080
un desplazamiento de altura de dos y un radio de sombra de ocho

71
00:06:32,080 --> 00:06:36,490
quizás y, como siempre, juegue con estos valores para encontrar su configuración.

72
00:06:36,490 --> 00:06:39,320
Ahora puede que recuerde que shadow solo funciona en

73
00:06:39,340 --> 00:06:45,670
iOS, por lo que para Android agregaré la propiedad de elevación aquí y estableceré esto en cinco quizás, nuevamente, también

74
00:06:45,670 --> 00:06:48,070
puede experimentar con diferentes valores allí y

75
00:06:48,160 --> 00:06:52,500
quiero tener un radio de borde de 10 porque Quiero esquinas redondeadas y

76
00:06:52,510 --> 00:06:54,250
de nuevo, eso es

77
00:06:54,250 --> 00:07:00,400
algo que quiero aquí, algo que no tienes que hacer. También agregaré un color de fondo blanco para asegurarme de

78
00:07:00,430 --> 00:07:05,290
que nuestro carrito aquí, nuestro producto siempre tenga este color de fondo, incluso si nuestra aplicación principal

79
00:07:05,290 --> 00:07:14,190
debe usar un color de fondo diferente más adelante. Así que ese es mi producto, mi envoltura aquí alrededor del producto completo. Además, también quiero configurar mi altura aquí, cada

80
00:07:14,190 --> 00:07:16,920
producto debe tener una altura de 300

81
00:07:16,920 --> 00:07:21,750
píxeles y, por supuesto, ese es un valor que también puede ajustar a

82
00:07:21,750 --> 00:07:22,670
sus necesidades.

83
00:07:22,740 --> 00:07:28,050
Por supuesto, también podría hacer esta dinámica con las dimensiones API como lo aprendió en

84
00:07:28,050 --> 00:07:34,830
el módulo receptivo y agregaré un margen de 20 en todas las direcciones alrededor de cada elemento del producto,

85
00:07:34,860 --> 00:07:42,070
para que tengamos un espacio en todas las direcciones. Con esta configuración, podemos comenzar a trabajar en la salida de algo,

86
00:07:42,230 --> 00:07:47,330
por lo que la imagen necesita una fuente y obtendremos una imagen de red aquí porque si echa

87
00:07:47,330 --> 00:07:52,940
un vistazo a los datos ficticios, todas estas URL de imágenes aquí son URL, eso también es lo que tenemos

88
00:07:52,940 --> 00:07:54,260
en el modelo, esperamos

89
00:07:54,290 --> 00:07:59,480
una URL aquí, por lo que para una imagen de red y eso sería el valor predeterminado, por supuesto,

90
00:07:59,480 --> 00:08:06,740
para cualquier tienda que construya porque nunca incluirá todas las imágenes del producto en su aplicación, al menos si no es algo en tienda de aplicaciones

91
00:08:06,740 --> 00:08:09,070
para un juego, pero si es una tienda

92
00:08:09,110 --> 00:08:14,070
donde las personas pueden crear productos, obviamente las personas crearán productos dinámicamente después de que se distribuyó su

93
00:08:14,240 --> 00:08:20,300
aplicación, por lo que es imposible que incluya todas las imágenes en su aplicación, sino que deben almacenarse en un servidor .

94
00:08:21,450 --> 00:08:26,740
Por lo tanto, aquí, debemos pasar un objeto a la fuente donde configuramos la propiedad URI y

95
00:08:26,910 --> 00:08:32,120
que ahora se recibirá desde afuera porque este componente del artículo del producto es presentacional, por

96
00:08:32,130 --> 00:08:38,060
lo que cualquier información para mostrar debe pasar a través de accesorios y allí, podría esperar el accesorio de

97
00:08:38,070 --> 00:08:40,680
imagen, pero en cuanto a todos los

98
00:08:40,680 --> 00:08:47,610
accesorios en sus propios componentes, puede elegir los nombres que desee. Para el título, espero obtener un accesorio de título y por el precio, espero obtener

99
00:08:47,610 --> 00:08:52,740
un accesorio de precio, por cierto, mantendré el signo de dólar aquí porque el precio será solo un número y, por supuesto,

100
00:08:52,740 --> 00:08:55,210
quiero tener un signo de dólar en frente de esto.

101
00:08:55,350 --> 00:09:02,640
Ahora, una pequeña nota aquí, quiero asegurarme de que el precio que obtengo siempre tenga exactamente dos decimales y podemos

102
00:09:03,020 --> 00:09:10,520
lograrlo llamando a fijo en esto y pasando un dos. Fijar es una función disponible en

103
00:09:10,560 --> 00:09:17,940
números en Javascript, que convierte esto básicamente en una cadena con una cantidad fija

104
00:09:17,940 --> 00:09:21,870
de decimales y aquí restrinjo que siempre

105
00:09:21,870 --> 00:09:23,210
sean dos

106
00:09:23,280 --> 00:09:34,310
decimales, eso es Javascript normal, nada específico para React Native. Ahora, cuando presionamos el botón de ver detalles, activaré accesorios en los detalles de la vista, así

107
00:09:34,400 --> 00:09:41,960
que nuevamente uso un nombre aquí que puedes configurar o nombrar como quieras, pero la idea aquí es que los accesorios en los

108
00:09:41,960 --> 00:09:47,240
puntos de detalles de la vista en una función que en el final se ejecuta

109
00:09:47,240 --> 00:09:51,220
cuando se presiona este botón y, por lo tanto, aquí, si

110
00:09:51,230 --> 00:09:58,900
se presiona este botón, se presiona el botón del carrito, señalaré una función que espero obtener en el accesorio para agregar al carrito.

111
00:09:58,940 --> 00:09:59,300
Una

112
00:09:59,540 --> 00:10:03,650
vez más, puede nombrar estos accesorios como desee, pero cuando use su componente,

113
00:10:03,740 --> 00:10:10,370
debe asegurarse de que estén disponibles y de que obtengan valores que son funciones que luego se activan a través de estos botones.

114
00:10:10,370 --> 00:10:14,300
Ahora estamos obteniendo todos los datos. Ahora para la imagen, dado

115
00:10:14,420 --> 00:10:21,440
que esta es una imagen de red, necesitamos configurar el ancho y la altura porque la imagen no puede ver eso de

116
00:10:21,440 --> 00:10:24,600
antemano, ya que podría hacerlo para una imagen local, no

117
00:10:24,620 --> 00:10:31,810
puede hacerlo para una red imagen, así que aquí señalaré estilos. imagen y agregaré esta clave de imagen a mi hoja de estilo allí por ahora.

118
00:10:31,820 --> 00:10:37,790
Una vez más, generalmente depende de usted cómo diseñe esto, pero configuraré esto para que tenga un ancho de

119
00:10:37,790 --> 00:10:38,750
digamos 60%,

120
00:10:38,750 --> 00:10:46,580
tenga en cuenta que el producto general tiene un ancho de 100% pero una altura de 60% porque el producto general el elemento aquí tiene

121
00:10:46,580 --> 00:10:52,730
una altura de 300 y quiero tener la imagen allí, que también debería ocupar la mayor parte de la altura,

122
00:10:53,000 --> 00:10:58,520
pero también tengo el título y el precio y mis botones y estos también deberían encajar allí, así

123
00:10:58,520 --> 00:10:59,920
que ' Le daré a

124
00:11:00,020 --> 00:11:02,240
la imagen el 60% de la altura

125
00:11:02,360 --> 00:11:10,560
para que las otras cosas aquí puedan dividir el 40% restante entre ellas. Entonces, con eso, esa es la imagen, ahora, por supuesto,

126
00:11:10,560 --> 00:11:16,230
la imagen no es todo lo que tenemos aquí, también tenemos nuestro título, tenemos nuestro

127
00:11:16,230 --> 00:11:18,800
precio y también quiero darle estilo.

128
00:11:18,840 --> 00:11:24,980
Entonces, para el título, agregaré el estilo del título aquí y por el precio, agregaré, digamos, un estilo

129
00:11:25,080 --> 00:11:32,490
de precio y aquí para estos botones, también agregaré un estilo a la vista circundante y nombraré esto acciones y, por

130
00:11:32,490 --> 00:11:41,020
supuesto, todos estos nombres de estilo como siempre son totalmente suyos. Aquí, quiero agregar mi título

131
00:11:41,050 --> 00:11:54,860
y el precio y la propiedad de acciones a mi hoja de estilo aquí y ahora para el título, por supuesto,

132
00:11:54,860 --> 00:11:59,900
puede diseñar esto de la forma que desee.

133
00:11:59,910 --> 00:12:01,970
No tenemos fuentes personalizadas aquí, agregaré

134
00:12:02,070 --> 00:12:05,430
algunas pronto, pero por el momento, lo ignoraré y comenzaré

135
00:12:05,610 --> 00:12:11,610
con un tamaño de fuente de 18 y quiero agregar un margen vertical, así que arriba y abajo de 3

136
00:12:11,610 --> 00:12:21,570
o 4, entonces un margen muy pequeño pero todavía algo de margen alrededor de este título. Por el precio, estableceré un tamaño de fuente de 14,

137
00:12:21,840 --> 00:12:30,490
un poco más pequeño y también le daré un color que debería ser 888, que es

138
00:12:30,530 --> 00:12:34,380
como un color grisáceo grisáceo oscuro.

139
00:12:34,380 --> 00:12:39,760
Ahora las acciones se colocan en esa vista que contiene los botones y, por lo tanto, quiero asegurarme de que el botón se

140
00:12:39,760 --> 00:12:42,450
encuentre uno al lado del otro, así que en una fila.

141
00:12:42,670 --> 00:12:53,860
Así que le daré una dirección de fila flexible aquí y también justificaré el contenido para tener todo el espacio restante entre ellos y, además,

142
00:12:53,860 --> 00:13:02,980
quiero alinear los elementos en el centro verticalmente, de modo que a lo largo del eje transversal que para una

143
00:13:02,980 --> 00:13:06,910
dirección flexible de fila es el eje vertical.

144
00:13:06,910 --> 00:13:08,890
Con eso, tenemos un estilo básico, ahora

145
00:13:08,890 --> 00:13:14,920
usemos ese componente antes de refinar la configuración y el estilo. Entonces, el componente del artículo del producto que exportamos

146
00:13:14,920 --> 00:13:20,110
aquí en el archivo del artículo del producto ahora se puede usar en el archivo

147
00:13:20,110 --> 00:13:22,850
de resumen del producto importando el artículo

148
00:13:22,870 --> 00:13:29,680
del producto desde allí, así que señalemos nuestra carpeta de componentes, allí en la subcarpeta de la tienda y luego

149
00:13:29,680 --> 00:13:35,340
el artículo del producto y ahora esto es lo que quiero usar aquí cuando renderizo mis artículos.

150
00:13:35,350 --> 00:13:40,300
El artículo del producto puede ser un componente de cierre automático porque todos los datos se reciben a través de accesorios

151
00:13:40,300 --> 00:13:42,650
y no entre las etiquetas de apertura y cierre,

152
00:13:42,670 --> 00:13:45,340
ahora, por supuesto, tenemos que configurar todo lo que esperamos aquí.

153
00:13:45,340 --> 00:13:50,700
Esperamos una imagen, el título, el precio y nuestros dos accesorios de manejo de eventos aquí, así que

154
00:13:50,710 --> 00:13:52,870
eso es lo que necesitamos proporcionar ahora.

155
00:13:53,560 --> 00:13:55,390
Por lo tanto, aquí en el artículo del

156
00:13:55,510 --> 00:14:02,140
producto, comenzaré con la imagen y, por supuesto, es itemData. articulo. imageUrl y

157
00:14:02,140 --> 00:14:08,800
siempre debes recordar ese itemData. el elemento señala como un producto tal como se define en nuestro modelo de producto

158
00:14:08,800 --> 00:14:11,910
y, por lo tanto, tendrá una propiedad imageUrl escrita de esta manera, si la

159
00:14:11,920 --> 00:14:17,980
escribió de manera diferente, por supuesto, debe acceder a ella de manera diferente. Además de la imagen, también tendremos

160
00:14:17,980 --> 00:14:26,290
un título que es itemData. articulo. título y además de eso, tendremos el precio

161
00:14:26,320 --> 00:14:28,500
con itemData. articulo. precio

162
00:14:28,510 --> 00:14:35,140
y luego tenemos nuestros dos controladores de eventos aquí porque tenemos el accesorio de detalle de vista y

163
00:14:35,140 --> 00:14:41,470
el accesorio de agregar al carrito que necesitamos agregar. Entonces, ver los detalles hará algo más tarde, por ahora es

164
00:14:41,890 --> 00:14:45,150
solo una función vacía y al agregar al carrito también hará algo

165
00:14:45,160 --> 00:14:47,650
más tarde, por ahora también puede ser una

166
00:14:47,650 --> 00:14:54,280
función vacía, así es como se debe representar nuestro artículo del producto. Con eso, si guardamos esto, esto es

167
00:14:54,320 --> 00:14:57,850
lo que debería ver, aún no es perfecto, pero

168
00:14:57,860 --> 00:15:01,640
estamos llegando allí, esto no es tan malo en realidad.

169
00:15:01,700 --> 00:15:07,300
Ahora, por supuesto, lo que observa es que los botones están coloreados de manera incorrecta, que este espacio

170
00:15:07,300 --> 00:15:12,460
no se usa realmente de la manera en que debería usarse allí, que tal vez también

171
00:15:12,460 --> 00:15:21,050
queramos centrar este texto, pero estas son, por supuesto, cosas podemos trabajar Entonces, para refinar esto, nuevamente en el componente del artículo del producto

172
00:15:21,100 --> 00:15:23,900
aquí, comencemos con nuestros dos textos aquí.

173
00:15:23,950 --> 00:15:30,790
Por supuesto, deben estar centrados y eso se puede hacer de una manera muy simple envolviendo eso con

174
00:15:30,790 --> 00:15:37,200
una vista, moviendo estos dos textos allí, dándole a esa vista un estilo y, por supuesto,

175
00:15:37,250 --> 00:15:38,830
puede nombrar esto

176
00:15:38,840 --> 00:15:43,930
como quiera, lo nombraré detalla porque diseñamos los detalles del producto allí, así

177
00:15:44,090 --> 00:15:52,710
que agregaré mi estilo de detalles aquí a la hoja de estilos y allí, solo estableceré el centro de elementos de alineación.

178
00:15:52,880 --> 00:16:00,440
Esto usa una dirección de columna flexible, la predeterminada y, por lo tanto, se centra en el eje transversal, siempre hace esto, pero

179
00:16:00,440 --> 00:16:04,870
el eje transversal para la columna de dirección flexible es, por supuesto, de

180
00:16:04,880 --> 00:16:12,920
izquierda a derecha, por lo que se centra horizontalmente, que es lo que quiero aquí y yo ' También le daré una altura del 15%.

181
00:16:12,930 --> 00:16:16,830
Tenga en cuenta que la imagen toma el 60%, por lo que le damos

182
00:16:16,830 --> 00:16:21,070
a esto tal vez el 15%, por lo que casi la mitad del 40% restante, no

183
00:16:21,270 --> 00:16:24,960
la mitad, y agregaré un poco de relleno aquí de 10 tal vez.

184
00:16:24,960 --> 00:16:31,780
Y para los botones aquí, estos están en mi propiedad de acciones, allí quiero establecer

185
00:16:31,800 --> 00:16:36,340
la altura al 25% restante, eso debería ser una cadena,

186
00:16:36,550 --> 00:16:41,300
por supuesto, porque tenemos 60% de altura aquí, luego tenemos

187
00:16:41,460 --> 00:16:43,360
15% aquí, por

188
00:16:43,450 --> 00:16:50,860
lo tanto aquí Quiero mantener el 25% restante y si ahora guardamos esto, se verá mucho mejor.

189
00:16:50,860 --> 00:16:54,360
Ahora, un poco de relleno a la izquierda y a la derecha también sería

190
00:16:54,370 --> 00:17:01,810
bueno para los botones, por lo que en esta propiedad de estilo de acciones, agregaré un relleno horizontal de 20 tal vez, para que tengamos un espacio interno hacia

191
00:17:01,810 --> 00:17:05,230
la izquierda o hacia la derecha. Ahora para cambiar el color

192
00:17:05,290 --> 00:17:10,540
de los botones, podemos ir a los componentes del botón que están integrados en

193
00:17:10,550 --> 00:17:12,140
React Native y configurar

194
00:17:12,170 --> 00:17:18,250
el accesorio de color aquí en colores que, por lo tanto, debe importar desde la carpeta de

195
00:17:18,260 --> 00:17:19,530
constantes y desde

196
00:17:19,630 --> 00:17:30,510
el archivo de colores allí y configurar esto luego a los colores primarios, también aquí para el segundo color, el botón agregar al carrito, el segundo botón por lo tanto.

197
00:17:30,550 --> 00:17:32,220
Así que ahora tenemos nuestros

198
00:17:32,320 --> 00:17:37,090
botones aquí, agregue al carrito y vea los detalles y esto no se ve tan mal.

199
00:17:37,120 --> 00:17:41,860
Lo único que puede notar es que no tenemos esquinas redondeadas aquí en la parte superior

200
00:17:41,860 --> 00:17:48,280
y la razón es que nuestra imagen básicamente es como una superposición a nuestro fondo y el fondo es la vista

201
00:17:48,280 --> 00:17:49,570
circundante, la imagen

202
00:17:49,570 --> 00:17:53,800
no tiene esquinas redondeadas y, por lo tanto, se superpone a nuestras esquinas redondeadas

203
00:17:53,800 --> 00:17:57,350
que tenemos en la vista circundante. Para solucionarlo, podemos ajustar la imagen

204
00:17:57,520 --> 00:18:01,200
en una vista separada y, como mencioné anteriormente en el curso, es

205
00:18:01,450 --> 00:18:05,580
realmente normal en React Native tener un par de vistas anidadas porque a

206
00:18:05,580 --> 00:18:13,480
esta vista, ahora podemos adjuntar un estilo que tal vez podamos dar un identificador de contenedor de imagen que ahora podemos agregar a nuestra hoja de

207
00:18:14,080 --> 00:18:20,350
estilo y ahora le daré a este contenedor de imagen mi ancho y alto aquí y en la imagen, por

208
00:18:21,040 --> 00:18:24,850
lo tanto, solo agregaré un ancho y alto del 100% porque ahora

209
00:18:24,850 --> 00:18:25,900
está dentro

210
00:18:25,950 --> 00:18:27,500
de el contenedor, esto aquí

211
00:18:27,520 --> 00:18:28,750
se refiere al

212
00:18:28,750 --> 00:18:31,970
padre, por lo que a este contenedor, por lo que

213
00:18:32,110 --> 00:18:35,200
una altura del 60% también se aplicará a la imagen,

214
00:18:35,200 --> 00:18:40,200
pero en ese contenedor de imágenes, ahora podemos agregar un radio de borde superior izquierdo de

215
00:18:40,210 --> 00:18:42,020
10 y un borde superior radio

216
00:18:42,100 --> 00:18:48,520
derecho de 10 para que redondeemos estas esquinas y ahora sea importante, agregue un desbordamiento oculto aquí porque esto garantizará que

217
00:18:48,520 --> 00:18:53,400
cualquier niño allí, que es nuestra imagen, por supuesto, no pueda superponer lo que configuramos aquí.

218
00:18:53,410 --> 00:18:57,960
Así que ahora con esta configuración, agregamos nuestras esquinas redondeadas aquí de nuevo a la parte

219
00:18:57,970 --> 00:19:02,860
superior y ahora estos son los elementos de imagen que quiero aquí y, por supuesto, también es una lista

220
00:19:03,070 --> 00:19:08,110
desplazable en la que también puede ver que estas imágenes se cargan lentamente, lo que puede continuar trabajando con.

221
00:19:08,800 --> 00:19:13,270
Por supuesto, el próximo objetivo podría ser que también podamos ver la pantalla de detalles.