Comencemos por diseñar el cajón en la pantalla de
filtros, eso no
es difícil, es algo que hicimos antes. En el navegador de filtros aquí
en el navegador de pila, al final solo tenemos que configurar las opciones de navegación predeterminadas que
también estamos usando para el navegador favorito en nuestro navegador de comidas. Entonces, podemos copiar este segundo objeto de configuración aquí y agregar
esto en nuestro navegador de filtros aquí como un segundo argumento para crear un navegador de pila.
Por supuesto, podemos eliminar esa línea comentada,
pero con este simple cambio, nos estamos asegurando de usar aquí la misma barra de navegación o estilo de barra
de acción.
Entonces, ese es un cambio simple pero útil, ahora para el cajón en sí, ¿qué pasa
con este aspecto aquí y el estilo del cajón?
Ahora, por un lado, puede si desea controlar todo el cajón y cambiar la forma en que se colocan los elementos allí, y no usar
este valor predeterminado de tener una lista con efecto dominó aquí en Android y un efecto diferente en
iOS, pero
creo que es un buen valor predeterminado que en realidad no quiero cambiar.
Si lo desea, sin embargo, puede reemplazar todo este componente que se muestra aquí y adjunto, encontrará un
enlace a los documentos oficiales donde puede obtener más información sobre esto en caso de que
necesite personalizarlo.
Lo que, por supuesto, quiero cambiar es el estilo de estos elementos y el texto que se muestra aquí.
Ahora que no
es demasiado difícil, comencemos con el texto. Como texto, como puede ver, por defecto toma estos
identificadores aquí, filtros favoritos de comidas.
Ahora, por supuesto, puede hacer eso, pero las comidas favoritas, ese no es
realmente un texto que queremos mostrar a nuestros usuarios.
Por lo tanto, quiero anular esto y podemos hacerlo con las buenas opciones de navegación antiguas que, al
igual que antes con las pestañas donde también podríamos controlar el texto de la etiqueta, tenemos que configurar en nuestros navegadores
de pila, ya sea cuando estamos creando el apile el navegador, además de configurar las opciones de navegación predeterminadas para cada
pantalla en ese navegador, podemos configurar las opciones de navegación para todo el navegador, que no es
para las pantallas en el navegador sino para el navegador cuando se usa como una pantalla,
que es
lo que estamos haciendo aquí y luego aquí podríamos establecer una etiqueta de cajón y podríamos configurar esto para filtros con un par de signos de
exclamación solo para que veamos que esto tiene
un efecto, ahora vemos que
aquí, así que ahí es donde podemos configurar esto, una opción.
Alternativamente, al crear el navegador de cajones, podemos usar ese formulario más largo donde configuramos una
pantalla y donde configuramos las opciones de navegación aquí y estas son simplemente alternativas donde
ninguno de los dos es
mejor o peor,
puede usar cualquiera de ellos y ahora aquí, pondré la etiqueta del cajón a las comidas,
digamos, eso tiene más sentido para mí que los favoritos de las comidas.
Entonces con eso si ahora abro el cajón, veo comidas y filtros. Para los filtros, ahora no anulé el título
porque estoy de acuerdo con el valor predeterminado de tomar mi
identificador, pero para las comidas, lo anulé.
¿Qué pasa con el estilo, el color, etc.?
Bueno, eso por supuesto puede ser controlado también. Bueno, al igual que antes con, por ejemplo, las pestañas donde
también podríamos pasar un segundo argumento para crear un navegador de pestañas inferior para controlar el diseño y el estilo
de las
pestañas en general, podemos hacer lo mismo para el cajón. Para crear el navegador de cajones, podemos pasar un segundo argumento,
que es un objeto configurado para el navegador de cajones, y allí
tenemos un par de opciones.
Una vez más, los documentos oficiales le dan una lista exhaustiva de todo lo que
puede configurar, por ejemplo, tiene sus opciones de contenido que le permiten controlar el contenido en el cajón,
por lo que los elementos del cajón hasta el final, tiene un montón de configuraciones que puede
configurar, por ejemplo, puede configurar un color de tinte activo que básicamente es el color que tiene un elemento cuando está activo
y allí, podemos configurarlo en colores, color de acento si lo deseamos, en lugar de usar ese azul predeterminado y
ahora,
esto es naranja y así de fácil es cambiar esto, esto es todo lo que necesitamos hacer.
Ahora, si también queremos cambiar la fuente que
se usa allí, también podemos hacerlo. Además de establecer un color de tinte activo aquí en las
opciones de contenido, podemos
configurar un estilo de etiqueta aquí y que tome un objeto de estilo que se aplicará al
componente de texto subyacente en el cajón, para que podamos
configurar cosas como texto alinear allí si queremos o en mi caso aquí, simplemente configure la familia de fuentes y configure esto para abrir sans, tal vez así,
ni siquiera la versión en negrita. Si hacemos eso, vemos claramente una diferencia.
Ahora lo volveré a poner en negrita porque es mejor, pero para ver la diferencia,
creo que estaba claro sin negrita.
Así que ahora, estamos usando nuestra
propia fuente aquí, la versión en negrita
y nuestro
propio color y eso es bastante bueno, diría, lo mismo, por supuesto, también funciona en Android.
Así es como puede trabajar con su cajón, cómo también puede diseñar
todo lo que está allí y, con eso,
aprendió sobre los principales patrones de navegación que puede agregar a su aplicación con la ayuda
de React navigation.
Ahora, obviamente, como enfaticé varias veces a lo largo de este módulo, hay mucho que configurar, todos estos navegadores
tienen diferentes opciones y configuraciones de navegación para los propios navegadores y, por lo tanto,
definitivamente revisen los documentos oficiales y simplemente jueguen con las diferentes configuraciones que ven allí
para experimenta con lo que puedes hacer. Las cosas que mostré aquí y las cosas que cambiamos aquí
son probablemente las cosas comunes que desea personalizar, por eso las mostré
aquí, pero de nuevo hay
mucho que hacer, definitivamente revise los documentos oficiales. Para esta aplicación, la parte
de navegación se realiza básicamente, no hay mucho más
que agregar, ahora es el momento de
volver a visitar el estilo general, por ejemplo, asegúrese de estar usando
las fuentes correctas en todas partes, también en las pestañas y en el encabezado y para ejemplo también para
el texto aquí que actualmente no estamos y luego también llena el
resto de la aplicación con algo de carne. Por ejemplo, la página de detalles aquí que todavía
tiene algo de contenido ficticio en este momento y también nuestra página de filtros que también solo tiene contenido ficticio.
Eso es lo que haré en el resto
de este módulo, a partir de entonces en el próximo módulo, también nos aseguraremos de agregar más lógica y de que, por
ejemplo, podamos marcar algo como favorito y, por lo tanto, agregarlo a los favoritos. pestaña que actualmente no funciona.
Pero por ahora, terminemos el estilo y agreguemos el resto del diseño y el contenido a esta aplicación.