Así que centrémonos en la pantalla de detalles de la comida por
ahora,
así que la parte aquí donde vemos los detalles de la receta seleccionada.
En este momento, solo tenemos el contenido ficticio allí, de la pantalla de detalles de la comida y, por supuesto, ese
no es el contenido que realmente quiero tener
allí, sino lo que debería estar allí.
Bueno, si echamos un vistazo a nuestro modelo de comida, probablemente tenga sentido tener la imagen allí, tenga en cuenta
que el título ya se muestra en nuestro encabezado, por lo que tiene sentido tener la
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
aquí debajo de nuestra receta y luego también debajo de
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
en esta página aquí en la pantalla MealDetailScreen y, por lo tanto, creo
que tiene sentido agregar una vista de desplazamiento, porque seguramente tendremos mucho contenido allí
que probablemente no cabe en una pantalla y ciertamente no en todos los tamaños de dispositivo posibles.
Entonces agregaré una vista de desplazamiento aquí y envolveré eso alrededor de mi contenido aquí.
Ahora tendremos un par de secciones
diferentes aquí, por ejemplo en la parte superior, quiero tener mi imagen y para esto,
también importaré el componente de imagen de React Native aquí para que podamos renderizar una
imagen aquí, no una imagen de fondo
pero una imagen normal y quiero agregar esto, digamos aquí en la parte superior, algo así.
Ahora, después de la imagen, quiero tener una vista con la duración, la accesibilidad y la complejidad que mencioné, así
que básicamente la misma configuración que tenemos en el elemento de comida, esto podría decirlo y, por lo tanto, copiaré la
vista desde allí y luego podemos ajustarlo como lo necesitamos aquí en la pantalla MealDetailScreen, así que
simplemente reemplazaré esta vista con la vista de copia.
Por supuesto, eso requiere que importemos el componente de
texto predeterminado
aquí, así que agreguemos esto, importemos el texto predeterminado del
texto predeterminado de los componentes. Esa es la siguiente fila y,
a partir de entonces, quiero tener mis ingredientes y los pasos que debe ejecutar.
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
un encabezado en negrita aquí, tal
vez aumentar el tamaño de la fuente. Debajo de eso, tengo mi lista de ingredientes, así
que la lista de ingredientes y, por supuesto, ese no es el contenido final, en su lugar, presentaremos
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
pasos debajo de eso y ahora me deshaceré de este contenido anterior allí y eso es con lo que
quiero trabajar.
Ahora, por supuesto, faltan todos los estilos y también la duración de los accesorios, etc., eso no
produce nada, en su lugar tenemos que trabajar con la comida seleccionada aquí, la duración de la comida
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
red, es un objeto con una propiedad URI que apunta a selectedMeal. imageUrl para cargar esto y también tenemos que aplicar
un estilo allí, para establecer un ancho y una altura, así
que aquí quiero señalar la imagen de estilos, digamos, y faltan todos estos estilos
como dije, así que agreguemos eso. Aquí para este estilo, también quiero decir estilos. detalles tal vez porque estamos mostrando los detalles
de esta receta y vamos a la hoja de estilo, por lo tanto, eliminemos la pantalla
que
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
debería ser todos los detalles en una fila.
Podemos agregar un poco de relleno en todas las direcciones, tal vez de 15 y también agregar un contenido
de espacio justificado para distribuir bien nuestros elementos de detalle aquí, eso debería ser bueno.
Además de eso, en la imagen aquí, también necesitamos agregar un estilo, allí el ancho debe ser del
100%, digamos, para tomar el ancho completo disponible y para la altura, iré con
200, aunque por
supuesto que podrías Calcule dinámicamente esto con las dimensiones API, por ejemplo, para
tomar siempre una cierta fracción de la altura disponible o simplemente juegue con diferentes valores aquí.
Iré con eso y echaré un vistazo aquí y eso no
se ve muy mal, eso
no está tan mal.
Ahora, definitivamente, también podría probar algún trabajo adicional aquí, algunas tareas adicionales y, por ejemplo, colorear estos
detalles: simple, asequible y la duración dependiendo de si es bastante corto o de los
diferentes valores que tiene para simple, para la complejidad y la asequibilidad .
No es algo que haré aquí, pero puede echar un vistazo a los datos de la comida, por supuesto, para ver qué
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
están utilizando para la complejidad y etc., y luego podría agregar algunos controles para aplicar un estilo diferente a
los diferentes valores que mostramos aquí en la pantalla de detalles de comidas para estos detalles, de modo que coloree el texto de
manera diferente dependiendo de si es largo o no. No es algo que haré aquí porque
es solo un trabajo extra que realmente no agrega mucho a la navegación, que es el
enfoque de este módulo.
Entonces, en cambio, me enfocaré en los ingredientes y los pasos, y allí, un primer paso es asegurarme de que el título aquí
tenga el estilo adecuado.
Así que agreguemos un título a la hoja de estilo y allí, agregaré la familia de fuentes y configuraré esto para que
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
texto en el medio y con eso si comprobamos esto, esto se ve bastante bien.
Ahora también quiero mostrar mis ingredientes en mis pasos, por supuesto, y para eso, es importante entender
que en los datos ficticios, estos son matrices, estos son
mis ingredientes, por ejemplo, estos
son mis pasos y ves que solo hay texto en estos matrices Así que solo quiero generar mi texto aquí como
una lista y no usaré una FlatList porque podría hacer eso, podría tener contenedores desplazables allí, por así decirlo,
pero simplemente mostraré los ingredientes y los pasos en la parte superior de cada otro.
Entonces, aquí, podemos usar un enfoque antiguo que conocemos de Vanilla React o React para web,
que también mostré anteriormente en el curso. Podemos usar nuestra comida seleccionada y allí, los ingredientes, que son
una serie de cadenas y asignar esto a una variedad de componentes,
así es como puede generar una lista de datos en React y también React Native y, a menudo, usa FlatList,
pero aquí no es necesario porque no es una cantidad infinita, por lo que no
necesitamos estas optimizaciones y tenemos una vista de desplazamiento envolvente alrededor de toda la pantalla, por lo que también podremos
desplazarnos si estamos produciendo más de lo que cabe en la pantalla, así que estamos absolutamente
bien usando este enfoque y, por lo
tanto, aquí, tendré mi ingrediente único en esta función de mapa y el mapa es un método integrado
en JavaScript como saben y
aquí tenemos que devolver un elemento jsx ahora y lo
que quiero devolver un componente de texto en el que simplemente genero un ingrediente porque los ingredientes son una
serie de cadenas,
por lo que el ingrediente es solo
una cadena y luego aquí también debemos proporcionar una clave, eso es un requisito de
React y podemos usar el ingrediente como clave porque siempre tenga cada ingrediente solo una vez.
Así que se garantiza que será único, así
es como se configuran nuestras comidas y con eso,
si guardamos esto y echamos un vistazo a una receta aquí, vemos nuestros ingredientes. Ahora para el estilo, ciertamente podemos hacer
algo allí y lo
haré en un segundo, pero antes de hacerlo, permítanme repetir esto para
los pasos aquí, reemplazar este texto con selectedMeal. pasos y luego mostrar cada paso aquí, que también es solo una
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.
Ahora, de nuevo, el estilo se puede mejorar un poco y haremos exactamente
eso, y creo que tiene sentido crear un componente separado o una función de representación para esto y crearé un componente
separado, lo almacenaremos en el mismo archivo aunque porque realmente solo lo usamos en ese archivo, pero también
podrías
crear un nuevo archivo, totalmente tuyo. Allí tendré mi elemento
de la lista que recibe accesorios donde regreso y ahora aquí quiero usar una vista que
estoy importando como envoltorio para poder diseñar este contenedor y allí, tener
mi texto donde imprimo accesorios para niños y ahora esa vista aquí obtendrá un
estilo de estilos. ListItem tal vez para que
podamos diseñarlo bien y aquí, por supuesto, no quiero usar texto, sino texto
predeterminado, también
aquí, por supuesto, para aprovechar nuestro propio texto personalizado.
Ahora, para el estilo del elemento de la lista aquí, vayamos a la hoja de estilo y agreguemos el elemento de la lista y
cada elemento de la lista debe tener un margen, un margen vertical de digamos 10 y un margen horizontal de digamos
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
y un ancho de borde de 1, veremos cómo se
ve eso y luego también agregaremos un poco de relleno allí, 10 en todas las direcciones y Veré cómo
se ve eso.
Ahora solo necesitamos asegurarnos de que usamos nuestro componente de elemento de lista y lo usamos devolviendo eso en lugar de texto
aquí al generar los ingredientes, aún pasamos el ingrediente entre las etiquetas de apertura
y cierre de nuestro propio componente personalizado porque allí, estamos usando accesorios para niños que usan el contenido
que pasamos entre abrir y cerrar etiquetas y
hacemos lo mismo para nuestros pasos. Con eso, echemos
un vistazo a esto,
sí, no se ve tan mal. Obtuvimos nuestros pasos aquí, obtuvimos nuestros ingredientes, por supuesto, puede refinar este estilo, ajustarse
a sus necesidades, a la forma en que desea que se vea, pero en realidad estoy bastante contento con eso y con eso,
obtuvimos un detalle básico pantalla y, por supuesto, esta pantalla de detalles también funciona para nuestros favoritos porque
estamos usando una y la misma pantalla allí.
Eso se ve bastante bien, la pantalla de filtro es lo que ahora falta.