1 00:00:02,430 --> 00:00:05,640 Entonces, comencemos a trabajar en esta aplicación y para 2 00:00:05,760 --> 00:00:08,270 esto, tengo una nueva aplicación aquí, la 3 00:00:08,280 --> 00:00:12,390 encontrará adjunta en caso de que quiera construir en esta misma aplicación inicial. 4 00:00:12,420 --> 00:00:19,020 Esta aplicación simple nos da esto aquí, una aplicación muy fea donde tenemos algo de texto que se superpone con 5 00:00:19,020 --> 00:00:21,440 la barra de estado, con la muesca. 6 00:00:21,450 --> 00:00:26,800 Ahora podríamos solucionar esto con la vista de área de guardado como aprendió anteriormente, pero no lo 7 00:00:26,820 --> 00:00:33,210 necesitaremos porque no conservaremos este contenido de todos modos y utilizaremos una biblioteca de terceros que nos permite navegar fácilmente entre 8 00:00:33,210 --> 00:00:36,530 diferentes pantallas y obtener buenas animaciones en el camino, para 9 00:00:36,690 --> 00:00:38,310 que no tengamos que preocuparnos 10 00:00:38,310 --> 00:00:44,610 por eso y esta biblioteca de terceros también gestionará la muesca en el dispositivo y nos dará esta área de 11 00:00:44,610 --> 00:00:45,880 guardado de fábrica. 12 00:00:45,900 --> 00:00:52,230 Ahora, antes de agregar esa biblioteca de terceros, comencemos a escribir algo de código porque solo 13 00:00:52,230 --> 00:00:56,020 podemos navegar entre pantallas si tenemos varias pantallas. 14 00:00:56,040 --> 00:01:01,950 Entonces, para eso, crearé una nueva carpeta de pantallas aquí y también crearé una carpeta 15 00:01:01,950 --> 00:01:07,830 de componentes, la diferencia será que en la carpeta de pantallas, tenemos estos componentes React 16 00:01:07,860 --> 00:01:15,420 que luego usamos como pantallas completas, supongo y en en su lugar, la carpeta de componentes, tendremos los componentes que 17 00:01:15,420 --> 00:01:16,430 usamos en 18 00:01:16,440 --> 00:01:23,280 nuestras pantallas, por ejemplo, cuando tenemos esa cuadrícula de categorías de comida, de categorías de alimentos, entonces nuestro 19 00:01:23,280 --> 00:01:30,200 elemento de cuadrícula sería un componente, la cuadrícula completa, las categorías de alimentos completas Sin embargo, la pantalla 20 00:01:30,450 --> 00:01:37,530 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é 21 00:01:37,530 --> 00:01:43,860 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 22 00:01:43,890 --> 00:01:49,440 pantalla de categorías de archivos para que quede realmente claro lo que hay 23 00:01:49,440 --> 00:01:50,200 dentro. 24 00:01:50,250 --> 00:01:57,270 Esta es la pantalla donde podemos seleccionar una categoría como italiana, alemana, estadounidense, por lo que podemos seleccionar 25 00:01:57,270 --> 00:02:04,170 una categoría de alimentos, por lo que agregaremos contenido que refleje esto, agregaremos una cuadrícula en esta pantalla, 26 00:02:04,230 --> 00:02:06,420 en esta pantalla componente posterior. 27 00:02:06,420 --> 00:02:14,100 Ahora, una vez que seleccionamos una categoría, veremos una lista de comidas que encaja en esta categoría y nombraré esta pantalla 28 00:02:14,100 --> 00:02:20,190 que luego veremos, a la cual navegaremos, pantalla de comidas de categoría porque esta es la pantalla 29 00:02:20,190 --> 00:02:23,390 que carga Las comidas para una categoría elegida. 30 00:02:23,460 --> 00:02:28,240 Entonces, esa es otra pantalla que necesitamos y otra pantalla a la que podremos navegar. 31 00:02:28,320 --> 00:02:35,100 Ahora también necesitaremos una pantalla de favoritos, que es la pantalla que contiene todas nuestras recetas favoritas, nuestras comidas 32 00:02:35,100 --> 00:02:42,300 favoritas y también necesitaremos una pantalla MealDetailScreen, esa es la pantalla que vemos si tocamos una sola comida dentro de 33 00:02:42,300 --> 00:02:48,390 una categoría elegida o en La pantalla favorita. Esto nos muestra los ingredientes y los 34 00:02:48,390 --> 00:02:51,120 pasos detallados para esta comida. 35 00:02:51,120 --> 00:02:58,020 Ahora y por último, pero no menos importante, tal como se establece, necesitaremos una pantalla de filtros y esta pantalla de filtros es 36 00:02:58,020 --> 00:03:05,700 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 37 00:03:05,790 --> 00:03:08,110 sin lactosa, Estas serán las cuatro categorías 38 00:03:08,130 --> 00:03:14,950 que tendré en esta aplicación, así que estas son las pantallas. Ahora agregaremos componentes cuando los necesitemos y 39 00:03:15,040 --> 00:03:18,410 no agregaremos todos los archivos de antemano 40 00:03:18,430 --> 00:03:25,390 y con eso, tenemos la configuración muy básica que necesitamos aquí, aunque, por supuesto, todas 41 00:03:25,720 --> 00:03:31,330 nuestras pantallas están totalmente vacías. Ahora los completaremos con más vida paso a paso, pero al 42 00:03:31,330 --> 00:03:34,160 menos quiero configurar un componente básico en cada una de estas pantallas. 43 00:03:34,390 --> 00:03:40,000 Así que comenzaré en la pantalla de categorías y, por supuesto, necesitamos importar React de React 44 00:03:40,000 --> 00:03:46,750 allí porque crearemos un componente React y también importaremos algo de React Native porque obviamente, construiremos un componente React 45 00:03:47,050 --> 00:03:52,600 aquí que usa algunos componentes React Native. Para ser precisos, comenzaré aquí simple e importaré 46 00:03:52,630 --> 00:03:58,110 una vista y un texto de React Native y luego crearé mi componente, la pantalla de categorías 47 00:03:58,120 --> 00:04:04,630 en este caso que toma accesorios o que puede recibir accesorios al menos porque es un componente React normal después 48 00:04:04,630 --> 00:04:11,530 de todo y donde exportaré esto como mi componente predeterminado. También agregaré una hoja de estilo porque es 49 00:04:11,530 --> 00:04:16,870 probable que necesitemos esto y, si no lo hacemos, aún podemos eliminarlo más tarde. 50 00:04:16,870 --> 00:04:19,150 Así que configuraré mis estilos aquí 51 00:04:19,150 --> 00:04:22,060 con la creación de hojas de estilo, como esta. 52 00:04:22,330 --> 00:04:26,440 Ese es un componente React muy básico, sin embargo, no muestra 53 00:04:26,440 --> 00:04:32,730 nada, así que dentro de la función del componente aquí, tendremos que devolver algo y ese algo es 54 00:04:32,770 --> 00:04:39,920 un código jsx donde quiero representar una vista y allí, un texto y aquí les digo la pantalla de categorías. 55 00:04:40,240 --> 00:04:49,270 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 56 00:04:49,270 --> 00:04:56,260 pantalla aquí donde configuro flex en uno y luego justifico el contenido al centro y alineo los elementos al 57 00:04:56,260 --> 00:04:58,980 centro y, como aprendió, esto hará una 58 00:04:59,080 --> 00:05:04,850 cosa, centrará el contenido en la pantalla, entonces centrará este texto en la pantalla al final. 59 00:05:04,960 --> 00:05:09,880 Este es el componente base y copiaré ese contenido en todas las demás pantallas y, por 60 00:05:09,910 --> 00:05:14,920 supuesto, este no es el contenido final que tendremos allí, solo un contenido ficticio para que 61 00:05:14,920 --> 00:05:19,210 podamos comenzar a navegar entre algunas de estas pantallas y ver algo . 62 00:05:19,210 --> 00:05:25,900 Entonces, aquí tenemos la pantalla de categoría de comida, ese es este componente aquí y, por lo tanto, eso es lo 63 00:05:25,900 --> 00:05:37,880 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 64 00:05:37,880 --> 00:05:41,650 pantalla de favoritos y, por supuesto, exportaré la pantalla 65 00:05:41,690 --> 00:05:43,700 de favoritos aquí y 66 00:05:43,700 --> 00:05:45,000 luego aquí, 67 00:05:45,110 --> 00:05:48,720 puedo decir la pantalla de favoritos, copiarla en la 68 00:05:48,740 --> 00:05:53,060 pantalla de filtros y hacer lo mismo allí, es la pantalla 69 00:05:53,080 --> 00:05:55,920 de filtros, le cambié el nombre y 70 00:05:55,940 --> 00:06:02,240 lo exporté y también digo la pantalla de filtros aquí en nuestro texto y, por último, 71 00:06:02,390 --> 00:06:06,110 pero no menos importante, esta es la pantalla MealDetailScreen. 72 00:06:06,110 --> 00:06:09,000 Así que aquí tenemos 73 00:06:09,740 --> 00:06:15,140 MealDetailScreen, también lo llamaré MealDetailScreen aquí y exportaré MealDetailScreen. 74 00:06:15,140 --> 00:06:19,930 Con eso, lo configuramos todo en estas pantallas, ahora casi hemos terminado con 75 00:06:20,060 --> 00:06:23,390 toda la preparación, solo quiero agregar algunas fuentes especiales 76 00:06:23,450 --> 00:06:29,240 a esta aplicación y, a partir de entonces, nos sumergiremos directamente en agregar algo de navegación.