Para diseñar los elementos separados, volveré a crear un componente separado y
lo nombraré elemento de comida. js, el nombre,
como siempre, depende totalmente de ti y, allí,
conoces el juego, creamos un componente
React importando React, probablemente también necesitemos ver, texto y hoja de estilo y quizás
también algunas otras cosas de React Native. Luego configuramos el componente, elemento de comida, donde recibimos los accesorios
y al final devolvemos algo de jsx. Configure una hoja de estilos aquí, almacénela en una constante de estilos con la creación de
la hoja de estilos a la que le pasamos un objeto y, al final, exportamos nuestro elemento de comida aquí como el archivo predeterminado. Ahora con eso aquí, en el elemento de comida, en este componente,
por supuesto, necesitamos devolver un
código jsx para ese elemento de comida y eso es algo que obtengo de la pantalla de categoría
de comida. Ahí tengo
esta vista con mi texto aquí, eso es al final lo que quiero que salga, un poco más complejo que eso, pero lo
cortaré desde allí y lo moveré al elemento de comida y allí, devolveré esta vista aquí
pero de Por supuesto que no hemos terminado con eso. Por un lado, esto también debería ser
tocable porque podemos seleccionar una comida, podemos seleccionar dicha receta para llevarla a la
pantalla de detalles, por lo que importaré la opacidad táctil.
Ahora, por supuesto, podría hacer esa diferenciación y usar el efecto dominó con retroalimentación
nativa táctil en Android
si lo desea, iré con opacidad táctil por ahora y envolveré mi vista aquí con opacidad táctil, así para que podamos De
hecho, toque nuestro elemento aquí y en Press, de hecho, quiero activar una función que espero obtener en una propiedad que aún no estamos pasando al elemento
de comida, pero porque todavía no estamos usando el elemento de comida en ninguna
parte, pero lo haré pase en el futuro, tal vez lo llamemos en una comida selecta
o simplemente en Select, lo que quiera, lo nombraré en SelectMeal y espero obtener ese accesorio en el artículo
de la comida cuando luego lo usemos en jsx. Esa es la opacidad que se puede tocar,
allí tengo mi punto de vista con el título y, en realidad, esa vista debería ser un poco más compleja que eso.
Quiero tener una vista, una vista anidada como esta y otra vista debajo de eso, así que quiero
tener dos filas.
Esto se configurará como una columna, pero estas dos vistas aquí se configurarán como filas aquí.
La primera vista también debe representar una imagen de fondo, de modo que el título se encuentre frente a
esta imagen
de fondo, la segunda vista, la segunda fila aquí debe mostrar algunos detalles sobre la
receta seleccionada, como su complejidad y duración.
Entonces, comencemos con eso antes de agregar más tarde la imagen, en ambas vistas, por
lo tanto, agregaré la propiedad de estilo y apuntaré a la fila de comidas
de estilos o lo que quieras nombrar porque será una fila en mi presentación de comidas aquí
y yo Por lo tanto, agregaré la fila de comida allí y estableceré la dirección de flexión aquí en fila, por supuesto, ya
que deberían ser filas de datos. Ahora, en torno al elemento
general aquí, envolveré otra vista donde quiero configurar un estilo
general de estilo de elemento de comida y elemento de comida,
que también se configura aquí en la hoja de estilos, por supuesto, y allí quiero
dar un alto a cada comida de 200 digamos, cada elemento en la lista aquí y
un ancho del 100% para tomar el ancho completo disponible y también tal vez un color de fondo de este aspecto
grisáceo, podemos ver si queremos mantener eso, por ahora voy a usa eso.
Ahora podemos usar el elemento de comida aquí y aún no hemos
terminado con él, pero podemos comenzar a usarlo aquí en la pantalla de categoría de comidas importándolo, importando elemento de comida desde la carpeta de componentes y allí, desde
el archivo de elementos de comida y luego renderice esto aquí, así que devuelva el elemento de comida de esta manera y, por supuesto, ahora tenemos que pasar algunos datos, datos como
el título que obtenemos de itemData. articulo. título y el accesorio onSelect que
espero obtener en el elemento de comida que al final conectamos al accesorio onPress de opacidad táctil, onSelectMeal,
ese fue el nombre que elegí, eso también es algo que
necesitamos configurar
aquí cuando usamos la comida y esto
debería apuntar a una función que por ahora no hace nada pero
que luego cargará la página de detalles para esa comida.
Así que ahora obtenemos el título en el accesorio de título, de ahí el elemento de comida, aquí cuando sacamos el título lo hacemos con la
ayuda de accesorios. título.
Si ahora guardamos esto, deberíamos poder ver algo aquí, así que esperemos a que se vuelva a cargar y sí,
vemos nuestra comida
aquí y ciertamente no es demasiado hermosa, pero al menos, vemos un poco más que antes.
Ahora, lo que me gustaría tener aquí es un poco de espacio alrededor de la lista, pero dentro
del espacio, el elemento de la lista debe ocupar todo el ancho disponible y no solo el ancho del elemento
más ancho que actualmente está sucediendo.
Y para eso, podemos ir a la FlatList y allí, agregar la propiedad de estilo y establecer este ancho al 100% para
asegurarnos de que la FlatList tome todo el ancho que pueda obtener.
Con eso, deberíamos tener que mirar lo que queremos aquí.
Ahora, por supuesto, los artículos de comida no están listos, no se ven
como yo quiero que se vean, aunque también llegamos lentamente allí. Ahora en el MealItem. js, todavía nos queda mucho
trabajo por hacer, por ejemplo, esta vista
aquí con el título también tendrá la imagen y, por lo tanto, debería ser mucho más grande que
la fila debajo de ella, que luego solo mostrará algunos detalles.
Por lo tanto, aquí, fusionaré mis estilos de fila de comida con otro objeto de estilo, por lo que con el estilo configurado en otro objeto de hoja de
estilo que nombraré encabezado de comida o lo que quieras nombrar y lo mismo allí por cierto para los
detalles al final, fusionaré esto con
los detalles de comidas de estilos, para que tengamos estilos combinados y comencemos con el encabezado de
comidas que podemos configurar aquí.
El encabezado de la comida al final contendrá la imagen y también el título y quiero que la altura de
esto sea, digamos el 80%
de la altura disponible, por lo que esto debería ser muy, muy grande. Por lo tanto, los detalles de la comida obtendrán automáticamente el 20% restante,
y para ver si eso funciona, proporcionemos algunos detalles aquí, así que en esa vista aquí, en esa fila debajo
de nuestra fila del título, también
quiero tener algo de texto aquí y allá. Saldremos,
digamos, la duración de los accesorios y luego m de allí en adelante, durante minutos porque m duración será un número que
trataremos como minutos.
Solo necesitamos pasar la duración de la pantalla de comidas de categoría, por supuesto, así
que cuando usamos el elemento de comida, además de pasar un título, estableceré el accesorio de duración porque ahora esperamos
esto en el elemento de comida.
Obtenemos esto de itemData. artículo que es nuestra comida y allí, tendremos una propiedad
de duración porque nuestras comidas como se define en el modelo aquí tienen una propiedad de duración y,
de hecho, si echa un vistazo a los datos ficticios, esta es su duración que se alimenta .
Si guardamos esto,
ahora vemos nuestra duración allí y, de hecho, todavía podemos cambiar esa altura aquí al 90%, debería ser más alta de lo que estaba
aquí, eso se ve mejor y,
por supuesto,
también puede experimentar con esto. En la fila de
detalles de la comida, también quiero tener algo de relleno horizontal, así que a la izquierda y a la derecha de
digamos 10 y justifique mi contenido aquí con un espacio intermedio, tenga en cuenta que es una fila para que esto lo justifique horizontalmente, de modo que
cuando tengamos múltiples elementos, estarán bien distribuidos allí.
Así que tenemos 20 minutos, produzcamos más información agregando otro texto y allí, generemos
la
complejidad, así que aquí generaré complejidad y, a
partir de entonces, generaré la asequibilidad. Ahora solo tenemos que pasar esos datos también al crear nuestro artículo de comida.
Entonces, además de la duración, pasamos la
complejidad que obtenemos aquí, itemData. articulo. complejidad y asequibilidad, eso es, por supuesto,
itemData. articulo. asequibilidad, así
y si guardamos esto y dejamos que esto se vuelva a procesar, ahora vemos esta salida aquí. Todavía no es súper hermoso y definitivamente podemos mejorar
esto, pero es un buen comienzo. Ahora simple y asequible o nuestra complejidad y asequibilidad, por lo
tanto, eso debería tener un estilo un poco diferente. Sabemos que será texto y, por lo
tanto, puedo usar algunas funciones o métodos de Javascript que tenemos disponibles en cadenas,
simplemente usaré toUppercase para convertirlo a mayúsculas por completo de esta manera y ahora esto debería
verse un poco mejor que antes. Ahora aún puede modificar el estilo aquí, iré con este estilo aquí
por ahora y ahora agreguemos una imagen de fondo arriba.
Entonces, para esto, queríamos una imagen de fondo detrás del texto del título y, afortunadamente, React Native hace que
agregar una imagen de fondo sea realmente muy simple. React Native se envía con un componente incorporado, el componente
de fondo de imagen que podemos usar para representar una imagen en el fondo
como se podría imaginar por el nombre. Lo agrega al lado del componente detrás del cual desea agregarlo y lo agrega antes de ese componente, por
lo que aquí agrego el fondo de la imagen y en el fondo de la imagen como en la imagen normal, establece una fuente. Aquí mi fuente es una imagen web, por lo que pasamos un
objeto, si fuera una imagen local, usaría require y lo que aprendió sobre imágenes locales anteriormente en el curso,
pero aquí, es una imagen web, así que pasamos un objetamos con un accesorio URI y allí
usamos la imagen de accesorios, que es donde espero obtener esa URL en este componente, por lo que, por supuesto,
tendremos que asegurarnos de pasar la URL en ese accesorio. También agregaré algunos
estilos aquí y serán estilos. bg La imagen que ahora vamos a agregar a la hoja de
estilo allí, donde quieras, tal vez aquí, realmente no importa. Una cosa importante aquí, debe establecer el ancho
y la altura porque es una imagen de la web y los usaré
al 100% para ambos porque debe llenar todo el espacio que queda. Ahora solo tenemos que asegurarnos de pasar el accesorio de imagen aquí en la pantalla de comidas de categoría,
así que además del título, aquí también quiero pasar el itemData. articulo. imageUrl es su nombre, puedes ver eso en el modelo, imageUrl, así
que eso es lo que estamos pasando y pasamos esto al accesorio de imagen porque eso es lo que estamos esperando
y lo que estamos configurando aquí en la comida articulo. Y si ahora guarda eso y vamos a
mezclar las cosas y probar esto en Android, solo lleva un poco más de tiempo cargarlo, por eso generalmente
uso iOS aquí, pero ahora si probamos esto, vemos nuestra hamburguesa aquí. Sin embargo, lo que
ya no vemos es nuestro título. Para mostrar el título nuevamente, asegúrese de envolver el
fondo de la imagen a su alrededor, así es como le dice a React Native qué contenido debe
estar dentro de esa imagen de fondo. Así que ahora con eso, aquí está nuestro título, no es tan fácil de leer y lo arreglaremos, pero está allí nuevamente.
Así que estamos comenzando con esa receta aquí, ahora asegurémonos de que el título sea
un poco más fácil de ver dándole un estilo aquí, un título de estilos que ahora podemos configurar allí y quiero establecer una familia de
fuentes abierta sin
negrita, tiene sentido ya que registramos esta fuente.
Dale un tamaño de fuente que aumentemos un poco, tal vez 22,
puedes jugar con eso, por supuesto.
Déle un color blanco para que sea un poco más fácil de leer y también asigne un color de fondo para
que siempre podamos verlo, incluso si la imagen de fondo sería
blanca, en cuyo caso el texto blanco sería difícil de leer, dando Este es un color RGBA que es un color que
tiene transparencia incorporada, por decirlo así, y es simplemente un color negro que es un poco transparente y ahora
también agrega un poco de relleno aquí, el relleno
vertical de cinco debería verse bien para que el el cuadro de color de fondo aquí no se sienta en los bordes del
texto que está dentro del cuadro y el relleno horizontal de 12 quizás. Con eso siempre deberíamos ver nuestro título
y, de hecho, probablemente podamos aumentar esa transparencia aquí,
disminuir la opacidad, sí, eso
se ve
un poco mejor, creo, así. Y lo único que quiero hacer ahora es mover ese
título hacia abajo en la parte inferior de esta imagen y,
por lo tanto, en el estilo de bgImage que tengo aquí, estableceré el contenido de justificación en final flexible porque la imagen de fondo actúa automáticamente como una caja flexible, por
ejemplo, como una vista, para que podamos justificar nuestro contenido allí y ahora tenemos
ese título en la parte inferior.
Ahora también podríamos centrar el texto yendo al título aquí y agregando el centro de alineación de texto y en caso de que sea demasiado largo,
demasiado grande, además de reducir el
tamaño de la fuente, lo que haré un poco hasta 20,
por supuesto que puede vaya a ese texto aquí donde genera un título y establezca el número de líneas
en 1 y esto asegurará que el texto
se acorte automáticamente si es demasiado grande, como aquí para la ensalada con tomates cherry. También vemos un efecto extraño aquí en iOS, donde tenemos algo
de fondo adicional detrás de nuestro texto y no solo el cuadro de color de fondo aquí.
Esto se debe a que apliqué mi color de fondo y así sucesivamente directamente en el texto, para solucionar esto podemos cortarlo
del título aquí y solo configurar el color y así sucesivamente y en su lugar agregar un contenedor
de título aquí donde agregamos este color de fondo y así sucesivamente y envolver este contenedor alrededor de nuestro título, por
lo que agregamos una vista adicional aquí y es bastante normal en React Native anidar
múltiples vistas y en esa vista, ahora podemos agregar estilos, estilos de contenedor de títulos y si guardamos eso, deberíamos deshacernos de ese comportamiento extraño
en iOS, sí,
ahora no tenemos esa caja adicional allí,
en cambio, solo tenemos un color de fondo y el mismo en Android.
Así que ahora esto no se ve tan mal, pero no estoy del
todo contento, me gustaría centrar mis detalles aquí también verticalmente y darle un poco más de espacio, supongo, y para eso podemos
dar el encabezado tal vez 85% de la altura y en el detalle de la comida aquí, tenga en cuenta que nuestra dirección de flexión es
la fila porque estamos fusionando la fila de la comida y el detalle de la comida aquí y, por lo tanto, nuestro
eje transversal es de arriba a abajo, por
lo que si queremos centrar verticalmente, eso es El eje transversal en el que necesitamos centrarnos.
Entonces, aquí podemos configurar elementos de alineación que colocan el eje transversal en el centro y
también cambiar nuestro color aquí un poco a un color más agradable, este
gris muy claro, # f5f5f5 podría verse un poco mejor, sí, definitivamente
lo hace .
Ahora para asegurarnos de que realmente nos centramos verticalmente, solo necesitamos ser más explícitos sobre la
altura que deben tomar los
detalles de nuestra comida, tomamos el 85% en el encabezado, por lo que en el detalle aquí,
podemos establecer una altura del 15% obviamente para tomar el resto, sí, y diría que esto parece bastante decente aquí, ciertamente
enumere los elementos con los que podemos trabajar aquí.
Ahora solo agregaré un poco de radio de borde porque sabes que me gustan los radios
de borde, así que agregaré un radio de borde de 10 aquí para que tengamos algunas esquinas redondeadas y con eso, si regresas, nosotros '
ya casi está allí, pero notará que la imagen en realidad no respeta el radio del borde.
Ahora para arreglar eso, en el artículo de la comida, solo tenemos que decir desbordamiento oculto para que ningún artículo secundario pueda salir de
este espacio o esta forma que estamos
construyendo aquí.
Y con eso, eso es un comienzo, algo con lo que podemos
trabajar, ahora, por supuesto, queremos asegurarnos de que cuando tocamos un elemento así, realmente vamos a la página de detalles.