Entonces, comencemos a trabajar en esta aplicación y para
esto, tengo una nueva aplicación aquí, la
encontrará adjunta en caso de que quiera construir en esta misma aplicación inicial.
Esta aplicación simple nos da esto aquí, una aplicación muy fea donde tenemos algo de texto que se superpone con
la barra de estado, con la muesca.
Ahora podríamos solucionar esto con la vista de área de guardado como aprendió anteriormente, pero no lo
necesitaremos porque no conservaremos este contenido de todos modos y utilizaremos una biblioteca de terceros que nos permite navegar fácilmente entre
diferentes pantallas y obtener buenas animaciones en el camino, para
que no tengamos que preocuparnos
por eso y esta biblioteca de terceros también gestionará la muesca en el dispositivo y nos dará esta área de
guardado de fábrica.
Ahora, antes de agregar esa biblioteca de terceros, comencemos a escribir algo de código porque solo
podemos navegar entre pantallas si tenemos varias pantallas.
Entonces, para eso, crearé una nueva carpeta de pantallas aquí y también crearé una carpeta
de componentes, la diferencia será que en la carpeta de pantallas, tenemos estos componentes React
que luego usamos como pantallas completas, supongo y en en su lugar, la carpeta de componentes, tendremos los componentes que
usamos en
nuestras pantallas, por ejemplo, cuando tenemos esa cuadrícula de categorías de comida, de categorías de alimentos, entonces nuestro
elemento de cuadrícula sería un componente, la cuadrícula completa, las categorías de alimentos completas Sin embargo, la pantalla
sería una pantalla y supongo que esto tiene sentido. Ahora, como está esbozado, tal como se presenta, en esta aplicación necesitaremos un par de pantallas y ya crearé
todos los archivos y, por supuesto, los llenaremos de vida a lo largo de este módulo. Necesitaremos la pantalla de categorías y nombraré la
pantalla de categorías de archivos para que quede realmente claro lo que hay
dentro.
Esta es la pantalla donde podemos seleccionar una categoría como italiana, alemana, estadounidense, por lo que podemos seleccionar
una categoría de alimentos, por lo que agregaremos contenido que refleje esto, agregaremos una cuadrícula en esta pantalla,
en esta pantalla componente posterior.
Ahora, una vez que seleccionamos una categoría, veremos una lista de comidas que encaja en esta categoría y nombraré esta pantalla
que luego veremos, a la cual navegaremos, pantalla de comidas de categoría porque esta es la pantalla
que carga Las comidas para una categoría elegida.
Entonces, esa es otra pantalla que necesitamos y otra pantalla a la que podremos navegar.
Ahora también necesitaremos una pantalla de favoritos, que es la pantalla que contiene todas nuestras recetas favoritas, nuestras comidas
favoritas y también necesitaremos una pantalla MealDetailScreen, esa es la pantalla que vemos si tocamos una sola comida dentro de
una categoría elegida o en La pantalla favorita. Esto nos muestra los ingredientes y los
pasos detallados para esta comida.
Ahora y por último, pero no menos importante, tal como se establece, necesitaremos una pantalla de filtros y esta pantalla de filtros es
la pantalla que nos permite establecer filtros, como comida vegana, de modo que solo veamos recetas que sean veganas o vegetarianas o sin gluten o
sin lactosa, Estas serán las cuatro categorías
que tendré en esta aplicación, así que estas son las pantallas. Ahora agregaremos componentes cuando los necesitemos y
no agregaremos todos los archivos de antemano
y con eso, tenemos la configuración muy básica que necesitamos aquí, aunque, por supuesto, todas
nuestras pantallas están totalmente vacías. Ahora los completaremos con más vida paso a paso, pero al
menos quiero configurar un componente básico en cada una de estas pantallas.
Así que comenzaré en la pantalla de categorías y, por supuesto, necesitamos importar React de React
allí porque crearemos un componente React y también importaremos algo de React Native porque obviamente, construiremos un componente React
aquí que usa algunos componentes React Native. Para ser precisos, comenzaré aquí simple e importaré
una vista y un texto de React Native y luego crearé mi componente, la pantalla de categorías
en este caso que toma accesorios o que puede recibir accesorios al menos porque es un componente React normal después
de todo y donde exportaré esto como mi componente predeterminado. También agregaré una hoja de estilo porque es
probable que necesitemos esto y, si no lo hacemos, aún podemos eliminarlo más tarde.
Así que configuraré mis estilos aquí
con la creación de hojas de estilo, como esta.
Ese es un componente React muy básico, sin embargo, no muestra
nada, así que dentro de la función del componente aquí, tendremos que devolver algo y ese algo es
un código jsx donde quiero representar una vista y allí, un texto y aquí les digo la pantalla de categorías.
Ahora también le daré a esa vista algo de estilo donde digo estilos. pantalla, con un diseño de pantalla muy básico o un estilo de
pantalla aquí donde configuro flex en uno y luego justifico el contenido al centro y alineo los elementos al
centro y, como aprendió, esto hará una
cosa, centrará el contenido en la pantalla, entonces centrará este texto en la pantalla al final.
Este es el componente base y copiaré ese contenido en todas las demás pantallas y, por
supuesto, este no es el contenido final que tendremos allí, solo un contenido ficticio para que
podamos comenzar a navegar entre algunas de estas pantallas y ver algo .
Entonces, aquí tenemos la pantalla de categoría de comida, ese es este componente aquí y, por lo tanto, eso es lo
que necesitamos exportar aquí y aquí, por lo tanto, diré la pantalla de categoría de comida como esta. Ahora también agregaré esto a la pantalla de favoritos y cambiaré el nombre a la
pantalla de favoritos y, por supuesto, exportaré la pantalla
de favoritos aquí y
luego aquí,
puedo decir la pantalla de favoritos, copiarla en la
pantalla de filtros y hacer lo mismo allí, es la pantalla
de filtros, le cambié el nombre y
lo exporté y también digo la pantalla de filtros aquí en nuestro texto y, por último,
pero no menos importante, esta es la pantalla MealDetailScreen.
Así que aquí tenemos
MealDetailScreen, también lo llamaré MealDetailScreen aquí y exportaré MealDetailScreen.
Con eso, lo configuramos todo en estas pantallas, ahora casi hemos terminado con
toda la preparación, solo quiero agregar algunas fuentes especiales
a esta aplicación y, a partir de entonces, nos sumergiremos directamente en agregar algo de navegación.