1
00:00:02,420 --> 00:00:06,140
Así que centrémonos en la pantalla de detalles de la comida por

2
00:00:06,170 --> 00:00:06,770
ahora,

3
00:00:09,660 --> 00:00:13,950
así que la parte aquí donde vemos los detalles de la receta seleccionada.

4
00:00:14,070 --> 00:00:19,590
En este momento, solo tenemos el contenido ficticio allí, de la pantalla de detalles de la comida y, por supuesto, ese

5
00:00:19,590 --> 00:00:21,810
no es el contenido que realmente quiero tener

6
00:00:22,020 --> 00:00:24,190
allí, sino lo que debería estar allí.

7
00:00:24,210 --> 00:00:30,280
Bueno, si echamos un vistazo a nuestro modelo de comida, probablemente tenga sentido tener la imagen allí, tenga en cuenta

8
00:00:30,330 --> 00:00:35,340
que el título ya se muestra en nuestro encabezado, por lo que tiene sentido tener la

9
00:00:35,340 --> 00:00:43,710
imagen aquí en la parte superior tal vez y debajo de eso, tal vez solo repita la duración, la asequibilidad y la complejidad tal como lo estamos haciendo

10
00:00:43,710 --> 00:00:47,140
aquí debajo de nuestra receta y luego también debajo de

11
00:00:47,370 --> 00:00:56,730
eso, enumere todos los ingredientes y los pasos que se necesitan para preparar ese plato. Así que al final eso es lo que quiero tener

12
00:00:56,730 --> 00:01:02,170
en esta página aquí en la pantalla MealDetailScreen y, por lo tanto, creo

13
00:01:02,340 --> 00:01:08,220
que tiene sentido agregar una vista de desplazamiento, porque seguramente tendremos mucho contenido allí

14
00:01:08,220 --> 00:01:15,340
que probablemente no cabe en una pantalla y ciertamente no en todos los tamaños de dispositivo posibles.

15
00:01:15,390 --> 00:01:22,320
Entonces agregaré una vista de desplazamiento aquí y envolveré eso alrededor de mi contenido aquí.

16
00:01:22,330 --> 00:01:24,920
Ahora tendremos un par de secciones

17
00:01:25,030 --> 00:01:30,750
diferentes aquí, por ejemplo en la parte superior, quiero tener mi imagen y para esto,

18
00:01:30,750 --> 00:01:36,300
también importaré el componente de imagen de React Native aquí para que podamos renderizar una

19
00:01:36,300 --> 00:01:39,030
imagen aquí, no una imagen de fondo

20
00:01:39,270 --> 00:01:45,260
pero una imagen normal y quiero agregar esto, digamos aquí en la parte superior, algo así.

21
00:01:45,260 --> 00:01:51,390
Ahora, después de la imagen, quiero tener una vista con la duración, la accesibilidad y la complejidad que mencioné, así

22
00:01:51,400 --> 00:01:57,930
que básicamente la misma configuración que tenemos en el elemento de comida, esto podría decirlo y, por lo tanto, copiaré la

23
00:01:57,930 --> 00:02:03,330
vista desde allí y luego podemos ajustarlo como lo necesitamos aquí en la pantalla MealDetailScreen, así que

24
00:02:03,360 --> 00:02:06,220
simplemente reemplazaré esta vista con la vista de copia.

25
00:02:06,360 --> 00:02:10,510
Por supuesto, eso requiere que importemos el componente de

26
00:02:10,710 --> 00:02:11,700
texto predeterminado

27
00:02:11,720 --> 00:02:16,370
aquí, así que agreguemos esto, importemos el texto predeterminado del

28
00:02:16,610 --> 00:02:21,450
texto predeterminado de los componentes. Esa es la siguiente fila y,

29
00:02:21,500 --> 00:02:26,580
a partir de entonces, quiero tener mis ingredientes y los pasos que debe ejecutar.

30
00:02:26,890 --> 00:02:39,790
Entonces, podemos agregar texto aquí donde digamos ingredientes y allí, también quiero aplicar un estilo, como texto de estilos, título, algo como esto o solo título porque quiero tener

31
00:02:39,820 --> 00:02:42,910
un encabezado en negrita aquí, tal

32
00:02:45,630 --> 00:02:52,320
vez aumentar el tamaño de la fuente. Debajo de eso, tengo mi lista de ingredientes, así

33
00:02:52,320 --> 00:02:58,770
que la lista de ingredientes y, por supuesto, ese no es el contenido final, en su lugar, presentaremos

34
00:02:58,770 --> 00:03:07,260
una lista aquí y debajo de eso, repetiré esto aquí porque entonces quiero tener un título donde digo pasos y luego una lista de

35
00:03:07,980 --> 00:03:14,760
pasos debajo de eso y ahora me deshaceré de este contenido anterior allí y eso es con lo que

36
00:03:14,760 --> 00:03:15,940
quiero trabajar.

37
00:03:15,960 --> 00:03:20,790
Ahora, por supuesto, faltan todos los estilos y también la duración de los accesorios, etc., eso no

38
00:03:20,790 --> 00:03:26,080
produce nada, en su lugar tenemos que trabajar con la comida seleccionada aquí, la duración de la comida

39
00:03:26,130 --> 00:03:34,560
seleccionada, la complejidad de la comida seleccionada, la asequibilidad de la comida seleccionada y para la imagen por ejemplo, quiero agregar una fuente aquí, ya que es una imagen de

40
00:03:34,590 --> 00:03:42,210
red, es un objeto con una propiedad URI que apunta a selectedMeal. imageUrl para cargar esto y también tenemos que aplicar

41
00:03:42,240 --> 00:03:47,210
un estilo allí, para establecer un ancho y una altura, así

42
00:03:47,310 --> 00:03:53,190
que aquí quiero señalar la imagen de estilos, digamos, y faltan todos estos estilos

43
00:03:53,190 --> 00:04:02,470
como dije, así que agreguemos eso. Aquí para este estilo, también quiero decir estilos. detalles tal vez porque estamos mostrando los detalles

44
00:04:02,470 --> 00:04:08,680
de esta receta y vamos a la hoja de estilo, por lo tanto, eliminemos la pantalla

45
00:04:08,680 --> 00:04:09,340
que

46
00:04:09,520 --> 00:04:16,920
ya no necesitamos, en su lugar agreguemos imagen y detalles. Ahora para más detalles, necesitamos establecer la dirección de flexión en fila porque eso

47
00:04:16,920 --> 00:04:19,180
debería ser todos los detalles en una fila.

48
00:04:19,380 --> 00:04:27,060
Podemos agregar un poco de relleno en todas las direcciones, tal vez de 15 y también agregar un contenido

49
00:04:27,120 --> 00:04:33,550
de espacio justificado para distribuir bien nuestros elementos de detalle aquí, eso debería ser bueno.

50
00:04:35,210 --> 00:04:42,270
Además de eso, en la imagen aquí, también necesitamos agregar un estilo, allí el ancho debe ser del

51
00:04:42,440 --> 00:04:48,100
100%, digamos, para tomar el ancho completo disponible y para la altura, iré con

52
00:04:48,140 --> 00:04:49,580
200, aunque por

53
00:04:49,580 --> 00:04:54,680
supuesto que podrías Calcule dinámicamente esto con las dimensiones API, por ejemplo, para

54
00:04:54,740 --> 00:05:00,720
tomar siempre una cierta fracción de la altura disponible o simplemente juegue con diferentes valores aquí.

55
00:05:00,890 --> 00:05:03,520
Iré con eso y echaré un vistazo aquí y eso no

56
00:05:03,740 --> 00:05:04,940
se ve muy mal, eso

57
00:05:04,970 --> 00:05:06,130
no está tan mal.

58
00:05:07,450 --> 00:05:13,990
Ahora, definitivamente, también podría probar algún trabajo adicional aquí, algunas tareas adicionales y, por ejemplo, colorear estos

59
00:05:13,990 --> 00:05:20,200
detalles: simple, asequible y la duración dependiendo de si es bastante corto o de los

60
00:05:20,200 --> 00:05:25,810
diferentes valores que tiene para simple, para la complejidad y la asequibilidad .

61
00:05:25,810 --> 00:05:31,150
No es algo que haré aquí, pero puede echar un vistazo a los datos de la comida, por supuesto, para ver qué

62
00:05:31,150 --> 00:05:37,090
valores tenemos allí para deducir qué es corto, qué es una duración media, qué es una larga duración y para ver qué valores se

63
00:05:37,090 --> 00:05:41,800
están utilizando para la complejidad y etc., y luego podría agregar algunos controles para aplicar un estilo diferente a

64
00:05:41,800 --> 00:05:47,470
los diferentes valores que mostramos aquí en la pantalla de detalles de comidas para estos detalles, de modo que coloree el texto de

65
00:05:47,470 --> 00:05:52,360
manera diferente dependiendo de si es largo o no. No es algo que haré aquí porque

66
00:05:52,360 --> 00:05:58,150
es solo un trabajo extra que realmente no agrega mucho a la navegación, que es el

67
00:05:58,150 --> 00:05:59,740
enfoque de este módulo.

68
00:05:59,740 --> 00:06:08,110
Entonces, en cambio, me enfocaré en los ingredientes y los pasos, y allí, un primer paso es asegurarme de que el título aquí

69
00:06:08,530 --> 00:06:10,250
tenga el estilo adecuado.

70
00:06:10,330 --> 00:06:17,660
Así que agreguemos un título a la hoja de estilo y allí, agregaré la familia de fuentes y configuraré esto para que

71
00:06:19,080 --> 00:06:26,790
se abra sin negrita, establezca el tamaño de fuente en 22 tal vez y configure el texto para alinear al centro para centrar el

72
00:06:26,810 --> 00:06:32,160
texto en el medio y con eso si comprobamos esto, esto se ve bastante bien.

73
00:06:32,230 --> 00:06:37,540
Ahora también quiero mostrar mis ingredientes en mis pasos, por supuesto, y para eso, es importante entender

74
00:06:37,540 --> 00:06:40,770
que en los datos ficticios, estos son matrices, estos son

75
00:06:40,780 --> 00:06:42,480
mis ingredientes, por ejemplo, estos

76
00:06:42,490 --> 00:06:49,540
son mis pasos y ves que solo hay texto en estos matrices Así que solo quiero generar mi texto aquí como

77
00:06:49,720 --> 00:06:56,410
una lista y no usaré una FlatList porque podría hacer eso, podría tener contenedores desplazables allí, por así decirlo,

78
00:06:56,410 --> 00:07:01,470
pero simplemente mostraré los ingredientes y los pasos en la parte superior de cada otro.

79
00:07:01,480 --> 00:07:07,690
Entonces, aquí, podemos usar un enfoque antiguo que conocemos de Vanilla React o React para web,

80
00:07:07,690 --> 00:07:14,140
que también mostré anteriormente en el curso. Podemos usar nuestra comida seleccionada y allí, los ingredientes, que son

81
00:07:14,140 --> 00:07:17,640
una serie de cadenas y asignar esto a una variedad de componentes,

82
00:07:17,650 --> 00:07:23,230
así es como puede generar una lista de datos en React y también React Native y, a menudo, usa FlatList,

83
00:07:23,230 --> 00:07:27,660
pero aquí no es necesario porque no es una cantidad infinita, por lo que no

84
00:07:27,670 --> 00:07:33,300
necesitamos estas optimizaciones y tenemos una vista de desplazamiento envolvente alrededor de toda la pantalla, por lo que también podremos

85
00:07:33,400 --> 00:07:38,050
desplazarnos si estamos produciendo más de lo que cabe en la pantalla, así que estamos absolutamente

86
00:07:38,050 --> 00:07:39,950
bien usando este enfoque y, por lo

87
00:07:39,950 --> 00:07:45,220
tanto, aquí, tendré mi ingrediente único en esta función de mapa y el mapa es un método integrado

88
00:07:45,220 --> 00:07:46,900
en JavaScript como saben y

89
00:07:46,990 --> 00:07:50,030
aquí tenemos que devolver un elemento jsx ahora y lo

90
00:07:50,170 --> 00:07:55,660
que quiero devolver un componente de texto en el que simplemente genero un ingrediente porque los ingredientes son una

91
00:07:55,720 --> 00:07:56,880
serie de cadenas,

92
00:07:56,890 --> 00:07:59,010
por lo que el ingrediente es solo

93
00:07:59,020 --> 00:08:03,280
una cadena y luego aquí también debemos proporcionar una clave, eso es un requisito de

94
00:08:03,280 --> 00:08:07,980
React y podemos usar el ingrediente como clave porque siempre tenga cada ingrediente solo una vez.

95
00:08:07,990 --> 00:08:10,230
Así que se garantiza que será único, así

96
00:08:10,240 --> 00:08:12,510
es como se configuran nuestras comidas y con eso,

97
00:08:12,550 --> 00:08:19,520
si guardamos esto y echamos un vistazo a una receta aquí, vemos nuestros ingredientes. Ahora para el estilo, ciertamente podemos hacer

98
00:08:19,520 --> 00:08:21,620
algo allí y lo

99
00:08:21,650 --> 00:08:26,960
haré en un segundo, pero antes de hacerlo, permítanme repetir esto para

100
00:08:26,960 --> 00:08:34,250
los pasos aquí, reemplazar este texto con selectedMeal. pasos y luego mostrar cada paso aquí, que también es solo una

101
00:08:34,350 --> 00:08:41,910
cadena y que también es único en un texto y con eso agregado, también deberíamos ver los pasos para nuestra comida, de hecho lo hacemos.

102
00:08:42,630 --> 00:08:46,730
Ahora, de nuevo, el estilo se puede mejorar un poco y haremos exactamente

103
00:08:47,010 --> 00:08:53,460
eso, y creo que tiene sentido crear un componente separado o una función de representación para esto y crearé un componente

104
00:08:53,460 --> 00:08:58,830
separado, lo almacenaremos en el mismo archivo aunque porque realmente solo lo usamos en ese archivo, pero también

105
00:08:58,830 --> 00:08:59,310
podrías

106
00:08:59,340 --> 00:09:03,260
crear un nuevo archivo, totalmente tuyo. Allí tendré mi elemento

107
00:09:03,270 --> 00:09:11,340
de la lista que recibe accesorios donde regreso y ahora aquí quiero usar una vista que

108
00:09:11,350 --> 00:09:17,500
estoy importando como envoltorio para poder diseñar este contenedor y allí, tener

109
00:09:17,500 --> 00:09:24,690
mi texto donde imprimo accesorios para niños y ahora esa vista aquí obtendrá un

110
00:09:24,700 --> 00:09:28,450
estilo de estilos. ListItem tal vez para que

111
00:09:28,450 --> 00:09:33,490
podamos diseñarlo bien y aquí, por supuesto, no quiero usar texto, sino texto

112
00:09:33,490 --> 00:09:34,630
predeterminado, también

113
00:09:34,780 --> 00:09:38,010
aquí, por supuesto, para aprovechar nuestro propio texto personalizado.

114
00:09:38,170 --> 00:09:47,430
Ahora, para el estilo del elemento de la lista aquí, vayamos a la hoja de estilo y agreguemos el elemento de la lista y

115
00:09:47,460 --> 00:09:55,530
cada elemento de la lista debe tener un margen, un margen vertical de digamos 10 y un margen horizontal de digamos

116
00:09:55,530 --> 00:10:05,600
20, por lo que hay más espacio a izquierda y derecha y también quizás agreguemos un color de borde de un color gris claro aquí con #ccc

117
00:10:05,600 --> 00:10:09,540
y un ancho de borde de 1, veremos cómo se

118
00:10:09,540 --> 00:10:16,730
ve eso y luego también agregaremos un poco de relleno allí, 10 en todas las direcciones y Veré cómo

119
00:10:17,570 --> 00:10:18,930
se ve eso.

120
00:10:18,950 --> 00:10:25,910
Ahora solo necesitamos asegurarnos de que usamos nuestro componente de elemento de lista y lo usamos devolviendo eso en lugar de texto

121
00:10:25,910 --> 00:10:30,590
aquí al generar los ingredientes, aún pasamos el ingrediente entre las etiquetas de apertura

122
00:10:30,590 --> 00:10:36,200
y cierre de nuestro propio componente personalizado porque allí, estamos usando accesorios para niños que usan el contenido

123
00:10:36,470 --> 00:10:38,920
que pasamos entre abrir y cerrar etiquetas y

124
00:10:39,110 --> 00:10:43,870
hacemos lo mismo para nuestros pasos. Con eso, echemos

125
00:10:44,530 --> 00:10:47,520
un vistazo a esto,

126
00:10:47,670 --> 00:10:55,870
sí, no se ve tan mal. Obtuvimos nuestros pasos aquí, obtuvimos nuestros ingredientes, por supuesto, puede refinar este estilo, ajustarse

127
00:10:55,870 --> 00:11:02,650
a sus necesidades, a la forma en que desea que se vea, pero en realidad estoy bastante contento con eso y con eso,

128
00:11:02,650 --> 00:11:08,050
obtuvimos un detalle básico pantalla y, por supuesto, esta pantalla de detalles también funciona para nuestros favoritos porque

129
00:11:08,050 --> 00:11:10,610
estamos usando una y la misma pantalla allí.

130
00:11:10,660 --> 00:11:15,500
Eso se ve bastante bien, la pantalla de filtro es lo que ahora falta.