Ahora que tenemos los conceptos básicos sobre la navegación hacia abajo, que podemos pasar
datos, retrocedamos y centrémonos en la aplicación que estamos creando, que por supuesto no se ve tan bien y
centrémonos en estos elementos de categoría aquí en la cuadrícula
Podemos tocarlos, pero obviamente esta no
es una aplicación que le gustaría usar. Ahora para hacer que sea más útil en
la pantalla de categorías aquí, en realidad tomaré este elemento
aquí, esta opacidad táctil, por lo que este elemento de cuadrícula y lo externalizaré en un componente
separado, no es algo que debe hacer, sino algo que puede considerar hacer simplemente para mantener sus componentes más delgados y limpios.
Para eso en la carpeta de componentes, agregaré un CategoryGridTile. js, el nombre, por supuesto, depende
totalmente de usted y, allí, necesitamos importar React from React, ciertamente también necesitaremos algunas cosas
de React Native para construir un componente allí, es decir, necesitaremos una opacidad táctil de Por supuesto, necesitaremos
la vista, necesitaremos texto y necesitaremos una hoja de estilo para que también podamos diseñar esto aquí
y ahora podemos crear el componente de mosaico
de cuadrícula de categoría aquí que recibe algunos accesorios. Necesitaremos una hoja de estilo aquí que
almacenaré en los estilos constantes y, por supuesto, como siempre, luego podemos exportar el
componente y dentro de esta función, devolveré el código jsx que acabo de cortar de la
pantalla de categorías aquí . Entonces, aquí, la opacidad táctil configurada, este elemento de cuadrícula está configurado, pero
tendremos que cambiar un par de cosas. En la pantalla de categorías, por ejemplo, estoy configurando el estilo de elemento de cuadrícula aquí. Ahora podríamos dejarlo aquí y
pasarlo a nuestro mosaico de cuadrícula y luego combinarlo allí como lo aprendió, pero simplemente configuraré todo el
estilo en el componente en sí porque solo usaremos el mosaico de cuadrícula de
categoría en el cuadrícula en la pantalla de categorías. Así que agregaré el estilo del elemento de cuadrícula aquí
a la hoja
de estilo en este archivo, por lo tanto, esto funciona nuevamente, el controlador onPress aún no funcionará, lo arreglaremos pronto y ahora
podemos volver a la pantalla de categorías y, por supuesto, Importar nuestro componente. Así que importe el componente de mosaico de cuadrícula
de categoría allí desde la carpeta de
componentes y allí, el mosaico de cuadrícula de categoría y ahora simplemente devuelva esto aquí cuando rendericemos un nuevo elemento.
Ahora, por supuesto, de
esta manera no funcionará, necesitamos reenviar algunos datos al mosaico de la cuadrícula para que funcione correctamente
allí y también debemos asegurarnos de que presionar esto nos navegue. Ahora para eso, pasaré los datos que necesitamos allí, que es
el título, así que es itemData. articulo. título y ahora es un
accesorio que podemos usar en el mosaico de cuadrícula de categoría y también quiero pasar otro accesorio que pasa
en una función que luego podemos ejecutar para navegar y nombraré esto en Select pero puedes nombrar esto como quieras y allí,
solo quiero ejecutar el código que actualmente ejecuto en onPress. Así que cortaré esto desde aquí fuera del mosaico de cuadrícula
de categorías, lo moveré nuevamente a la pantalla de categorías, a esta función que paso a onSelect y
ahora todo lo que tenemos que hacer es activar onSelect desde el interior del mosaico de
cuadrícula de categorías, eso es, por supuesto un patrón normal que sabrías de React. Entonces, de vuelta en el mosaico de cuadrícula de categoría, onPress puede simplemente apuntar a los
accesorios onSelect para activar la función que se pasa en el accesorio onSelect.
Ahora el título que estoy publicando aquí también puede ser solo accesorios. título porque estamos obteniendo este accesorio
de título como un accesorio en nuestro mosaico de cuadrícula de categoría, lo estamos pasando aquí.
Con eso, dividimos nuestro componente un poco, pero por supuesto ahora también quiero trabajar
un poco más en el estilo. Entonces, de vuelta en el mosaico de cuadrícula de
categoría, por ejemplo, quiero usar el color que estoy configurando porque cada categoría obtiene un color almacenado
en esa propiedad de color aquí, por lo que sería bueno usar eso. Por lo tanto, también podemos reenviar el mosaico de cuadrícula de categoría, reenviar el color aquí,
por supuesto, puede nombrar este accesorio como desee en el elemento. propiedad de color
y aquí, tiene que ser. color porque nombramos el color de la propiedad aquí en el modelo y ahora
en un mosaico de cuadrícula de categoría, podemos usar ese color para darle estilo aquí.
Entonces, ¿cómo diseñar esto, cómo debería ser esto? Al agregar un estilo a la vista que tenemos
dentro de la opacidad táctil porque el componente de opacidad táctil en sí es invisible pero
la vista no está ahí, podemos pasar un objeto y establecer el color de
fondo aquí como accesorios. color.
Bueno, veamos cómo se ve eso, si guardamos eso y esperamos que se vuelva a cargar,
no se ve tan mal pero es
demasiado pequeño, debe completar todo el elemento de la cuadrícula y no solo la fila con el texto allí.
Entonces, para mejorar eso, realmente tendré este estilo en línea aquí, pero lo fusionaré en un objeto circundante con otra
configuración de estilo que configuré en la hoja de estilo y nombraré este contenedor, puede nombrarlo como quiera querer,
contenedor de estilos,
extraiga todos los pares clave-valor para que combinemos
estos estilos aquí y ahora, el contenedor es un objeto de hoja de estilo que podemos agregar allí
y aquí, podemos configurar uno flexible para asegurarnos de que cada elemento llena todo el espacio
que tiene y ahora esto se ve mucho mejor.
Ahora todavía no estoy 100% contento, quiero
agregar un poco de radio de borde aquí, digamos de 10 para tener algunas esquinas redondeadas y,
por supuesto, puedes configurar cualquier estilo que quieras aquí,
prefieres, yo también configurará un color de sombra de negro y una opacidad de sombra de. 26 y un desplazamiento de sombra de ancho 0, altura 2 y un radio de sombra
de 10 y una elevación de 3, elevación para Android si recuerdas porque estas propiedades de sombra solo afectan a
iOS, por lo que obtenemos un poco de esta tarjeta tridimensional mira
y, por supuesto, como mencioné, puedes diseñar esto de la forma que quieras.
Ahora, además, quiero asegurarme de que este texto aquí se encuentra en la esquina inferior derecha y
tiene un poco
de relleno, por supuesto, un poco de espacio alrededor. Entonces agregaré un poco de relleno aquí, digamos de 10
y ahora establezca el contenido de justificación en el extremo flexible, la dirección de flexión en el contenedor, por supuesto, es de arriba a abajo porque es
una columna, por lo que el extremo flexible lo moverá al abajo aquí y ahora para moverlo también a la
derecha en el eje horizontal, configuro alinear elementos
al extremo flexible también y esto lo mueve al final del eje transversal que se deja de derecha a
derecha en una vista normal donde no Cambiar la dirección de flexión. Con eso, obtenemos este aspecto que diría que es mejor,
pero por supuesto, el texto aquí, el estilo del texto también podría cambiar y un poco más de relleno
podría verse bien,
tal vez 15, pero por supuesto podemos experimentar con eso y también Una nota al margen importante,
en esta aplicación no me enfocaré en construir una experiencia totalmente receptiva
aquí, trataré de mantener esto breve y conciso porque el enfoque principal de este módulo, por supuesto, es
la navegación, por lo tanto, no optimizaré esto para todas las posibles pantallas y plataformas.
Esto es algo que, por supuesto, puede hacer
como práctica, no adheriré a no hinchar innecesariamente este módulo, así que simplemente configuraré un estilo que se
vea bien en estos emuladores.
Dicho esto, un poco más de relleno podría tener sentido y también quiero diseñar
el título aquí, por lo tanto, agregaré,
digamos, estilo de
título aquí, configurado en la hoja
de estilo, agregué aquí y allá, quiero usar mi familia de fuentes, abierta sin negrita, que
puedo usar, por supuesto, porque la estoy registrando aquí en la aplicación. js, por lo que ahora se agrega open sans bold aquí y tal vez también cambie el tamaño de
la fuente un poco a 22. Guardamos esto, esto
se ve bastante decente.
Ahora hay una última cosa que quiero hacer
en el mosaico de la cuadrícula de categoría, en el texto aquí, estableceré el número de líneas en 2 para que cualquier texto que sea más
largo que eso se corte, lo que creo que se ve un poco mejor Y por último, pero no menos importante, puede notar que
en Android es ligero y encantador, esto está a la izquierda aquí porque está dividido en
dos líneas, para asegurarse de que esto también esté a la derecha,
en el título aquí, estableceré el texto se alinea a la derecha para forzar que esto esté a la derecha.
Así que esperemos a que se vuelva
a cargar y ahora se ve como debería.
Ahora eso no está tan mal
aquí, ahora puedes notar que el efecto se ve un poco extraño si toco un elemento aquí,
obtenemos este extraño borde extra a su alrededor.
Ahora, una cosa que aún haré aquí, que es totalmente opcional, pero aún así, lo agregaré aquí, agregaré la API de
la plataforma y también agregaré comentarios nativos táctiles para usar realmente el efecto dominó en lugar de la opacidad táctil
si es compatible.
Así que aquí, tendré mi componente táctil que, por defecto, es la
opacidad táctil pero si la plataforma. os es igual a Android y, como aprendiste anteriormente en el curso, la versión es
mayor o igual que 21, entonces sabemos que la retroalimentación nativa táctil es compatible, por
lo que estableceré el componente táctil igual a la retroalimentación nativa táctil, como esta.
Use el componente táctil aquí en lugar de la opacidad táctil
y con eso, deberíamos tener un buen
efecto dominó en Android,
en iOS tenemos el efecto de opacidad que queremos y en Android,
ahora tenemos un efecto dominó pero el estilo está apagado ahora.
Sin embargo, esto es algo que podemos solucionar agregando una vista adicional alrededor de esto que recibe nuestro estilo de
elementos de cuadrícula en lugar del componente táctil aquí y
con eso, solo necesitamos agregar una propiedad de estilo adicional en el componente táctil y establecer uno
flexible.
Lo estoy haciendo con un estilo en
línea aquí rápido y sucio, podría agregar un estilo separado en la hoja de estilos. Con eso se ve y se siente igual
en iOS
y ahora también en Android, el efecto dominó está ahí.
Sin embargo, ahora no está utilizando nuestras esquinas redondeadas, sino que representa un cuadrado o un rectángulo y también
aprendió anteriormente cómo solucionarlo. Para solucionarlo, todo lo que
tenemos que hacer es en el elemento de la cuadrícula, agregamos el radio del
borde de 10 y luego agregamos un desbordamiento oculto para asegurarnos de que los elementos secundarios no se puedan representar fuera de
esa vista
envolvente, lo que significa que la ondulación el efecto no puede salir de esa caja redondeada.
Ahora tenemos ese aspecto y ese es el único ajuste que quiero hacer aquí para diferentes plataformas y
con eso, eso no se ve tan mal, diría yo.
Ahora, por supuesto, puede modificar el aspecto de eso, puede modificar el tamaño de fuente y así sucesivamente, hacer que se
vea realmente bien en sus dispositivos que está probando.
Estoy contento con este aspecto y ahora es el momento de mostrar algunas recetas cuando
seleccionamos una categoría aquí.