1 00:00:02,350 --> 00:00:07,000 En la pantalla de categorías, queremos asegurarnos de que nuestro elemento pueda 2 00:00:07,020 --> 00:00:13,590 tocarse allí, por lo que importaremos tocable e importaré aquí la opacidad táctil para tener un ligero efecto 3 00:00:13,740 --> 00:00:15,000 de opacidad, pero, 4 00:00:15,090 --> 00:00:17,100 por supuesto, depende de usted qué 5 00:00:17,100 --> 00:00:23,730 patrón o qué componente use allí, debe ser un componente táctil a través del cual puede envolver su 6 00:00:23,730 --> 00:00:24,750 elemento aquí 7 00:00:24,750 --> 00:00:30,060 y ahora en opacidad táctil, agregaré onPress para que podamos hacer algo cuando se presione. 8 00:00:30,060 --> 00:00:31,400 ¿Qué queremos hacer? 9 00:00:31,440 --> 00:00:38,760 Queremos ir a la pantalla de comidas de categoría, que es una especie de página de detalles para una categoría elegida para mostrar todas 10 00:00:38,760 --> 00:00:40,830 las recetas para esa categoría, todavía 11 00:00:40,830 --> 00:00:43,910 no tenemos recetas pero todavía quiero ir a la página. 12 00:00:44,610 --> 00:00:50,100 Por lo tanto, aquí, debemos activar una acción de navegación y anteriormente lo hicimos con la navegación 13 00:00:50,280 --> 00:00:51,470 de accesorios, ¿no? 14 00:00:51,480 --> 00:00:56,550 El problema es que no tenemos accesorios disponibles aquí porque estamos dentro de la función de elemento de la 15 00:00:56,670 --> 00:00:59,090 cuadrícula de procesamiento que está fuera de nuestro componente. 16 00:00:59,130 --> 00:01:04,610 Ahora podemos simplemente mover esto dentro de nuestro componente para solucionar este problema. 17 00:01:04,770 --> 00:01:10,470 Si creamos esa función allí, entonces tenemos acceso a accesorios porque ahora estamos dentro de nuestra 18 00:01:10,470 --> 00:01:17,070 función componente y ahora podremos llamar a navegar aquí. Podemos llamar a navegar y quiero ir a un nombre 19 00:01:17,070 --> 00:01:23,310 de ruta y, por supuesto, el nombre de la ruta a la que quiero ir se puede encontrar en nuestro navegador 20 00:01:23,310 --> 00:01:27,510 es categoría comidas correctas, porque queremos cargar todas las comidas para la categoría elegida. 21 00:01:27,510 --> 00:01:33,660 Así que vamos a las comidas de categoría aquí y si agregamos esto y lo guardamos, vemos que nuestro estilo 22 00:01:33,660 --> 00:01:37,560 está un poco roto, lo arreglaré en un segundo, pero la navegación funciona, 23 00:01:37,560 --> 00:01:44,520 también tenemos este efecto de opacidad, así que está funcionando . Ahora arreglar el estilo es fácil, simplemente lo perdimos porque 24 00:01:44,520 --> 00:01:47,080 envolví la opacidad táctil alrededor de mi 25 00:01:47,220 --> 00:01:53,760 vista, solo necesitamos agregar este estilo aquí que agrega el margen alrededor de nuestro artículo y así sucesivamente a la 26 00:01:53,760 --> 00:02:00,230 opacidad táctil en lugar de esa vista aquí y con eso, recuperamos ese estilo y ahora está funcionando como debería. 27 00:02:00,270 --> 00:02:06,630 La pregunta más interesante es, ¿cómo podemos configurar nuestro título de encabezado? Ahora para eso, tenemos un par de opciones, 28 00:02:06,630 --> 00:02:07,720 echemos un 29 00:02:07,800 --> 00:02:13,740 vistazo a la opción número uno. En cada componente React que cargará como 30 00:02:13,740 --> 00:02:22,420 pantalla, lo que significa lo que asigna a dicho nombre de pantalla en, por ejemplo, el navegador de pila, puede agregar una propiedad. 31 00:02:22,410 --> 00:02:28,590 Ahora tenga en cuenta que la pantalla de categorías es, por supuesto, un componente Reaccionar, pero técnicamente es una función de 32 00:02:28,590 --> 00:02:29,370 Javascript, ¿verdad? 33 00:02:29,370 --> 00:02:34,290 Es una función que recibe el argumento props y luego ejecuta este cuerpo que devuelve algunos jsx 34 00:02:34,290 --> 00:02:37,390 y, por lo tanto, React puede usar esto como un 35 00:02:37,530 --> 00:02:39,840 componente, pero técnicamente, es una función Javascript. 36 00:02:39,840 --> 00:02:43,490 Ahora las funciones de Javascript son solo objetos, eso 37 00:02:43,500 --> 00:02:44,720 es Javascript, las 38 00:02:44,790 --> 00:02:52,800 funciones son objetos y en los objetos, podemos agregar propiedades. Entonces, la pantalla de categorías es solo un objeto Javascript, 39 00:02:52,890 --> 00:02:53,630 por 40 00:02:53,730 --> 00:02:57,150 lo tanto, podemos agregar una propiedad después de crearla. 41 00:02:57,150 --> 00:03:07,040 Entonces, aquí, después de definir nuestra función de pantalla de categorías y, por lo tanto, este objeto, podemos acceder a él y podemos agregar 42 00:03:07,040 --> 00:03:13,250 una propiedad con la notación de punto, así es como funciona Javascript, simplemente puede agregar 43 00:03:13,250 --> 00:03:14,250 dicha propiedad. 44 00:03:14,260 --> 00:03:20,870 Ahora puede agregar una propiedad especial aquí para la cual se verá React navigation y esa es la propiedad 45 00:03:21,350 --> 00:03:22,970 de opciones de navegación. 46 00:03:22,970 --> 00:03:26,270 No tiene que agregarlo y eso no será un problema 47 00:03:26,270 --> 00:03:32,000 si no lo hace, no lo hemos hecho hasta ahora, pero puede agregarlo, si lo agrega, React lo respetará. navegación. 48 00:03:33,210 --> 00:03:38,480 Ahora hay un montón de opciones que puede configurar allí y, por supuesto, puede encontrar una lista 49 00:03:38,480 --> 00:03:40,120 completa en los documentos oficiales. 50 00:03:40,270 --> 00:03:45,100 En la forma más simple, simplemente asigna un objeto Javascript aquí con ese grupo 51 00:03:45,100 --> 00:03:51,880 de opciones que ahora puede configurar en este objeto y la opción que me interesa aquí es el título del 52 00:03:52,030 --> 00:04:00,440 encabezado, que simplemente se puede establecer en un texto, por ejemplo categorías de comidas porque estamos en la pantalla de categorías, por lo que 53 00:04:00,430 --> 00:04:03,970 sería un título apropiado. Si guardamos esto, ahora 54 00:04:03,970 --> 00:04:09,090 verá las categorías de comidas como un título aquí en el encabezado. 55 00:04:09,120 --> 00:04:14,970 Ahora también puede diseñar el encabezado aquí con la ayuda de la propiedad de estilo del encabezado, esto 56 00:04:14,970 --> 00:04:21,200 toma un objeto de estilo en el que generalmente puede configurar lo que puede configurar como estilos en las vistas 57 00:04:21,310 --> 00:04:27,090 y allí, puede agregar un color de fondo que es El estilo más común que normalmente aplica. 58 00:04:27,210 --> 00:04:32,610 Ahora quiero configurar un color aquí y usaré un enfoque que usé anteriormente 59 00:04:32,670 --> 00:04:43,350 en el curso, agregaré una carpeta de constantes y allí agregaré colores. archivo js en el que luego exportaré un objeto Javascript donde se configuran todos 60 00:04:43,440 --> 00:04:48,470 los colores que quiero usar una y otra vez en la aplicación. 61 00:04:48,600 --> 00:04:56,790 Allí, configuraré un color primario para el que preseleccioné un código hexadecimal de # 4a148C pero, por supuesto, puede experimentar con diferentes 62 00:04:56,790 --> 00:05:03,060 colores si lo desea y configuraré un color de acento o un color secundario cuyo código hexadecimal 63 00:05:03,270 --> 00:05:07,920 es # ff6f00 y estos son solo los colores que elegí, como 64 00:05:07,920 --> 00:05:13,850 mencioné, puedes usar diferentes, por supuesto. De vuelta en la pantalla de categorías, 65 00:05:13,860 --> 00:05:21,030 ahora quiero usar colores y para esto, necesita importarlo, importar colores con una C mayúscula, que es solo 66 00:05:21,030 --> 00:05:29,730 una convención que estoy usando para indicar que esta es una constante, de constantes / Colores , también nombrado con una C 67 00:05:29,730 --> 00:05:38,420 mayúscula y luego aquí usamos Colores. primaryColor por ejemplo. Si haces esto, verás que tu encabezado ahora 68 00:05:38,420 --> 00:05:43,730 tiene este color púrpura oscuro que elegí. Eso hace que el título sea un poco difícil 69 00:05:44,030 --> 00:05:48,670 de leer, pero afortunadamente, también puedes diseñarlo, no con el estilo del encabezado porque ese es 70 00:05:48,720 --> 00:05:56,300 solo el cuadro para el encabezado, por así decirlo, no su contenido, pero el título se puede diseñar con el color de tinte del encabezado y 71 00:05:56,450 --> 00:06:01,090 nuevamente, los documentos oficiales es el lugar donde puedes aprender todo sobre estas opciones disponibles, así 72 00:06:01,100 --> 00:06:02,380 es como sé sobre 73 00:06:02,390 --> 00:06:04,470 ellas, ahí es donde leerías sobre ellas. 74 00:06:04,550 --> 00:06:10,820 Ahora el color de tinte del encabezado siempre puede ser un color, por ejemplo, blanco aquí, que simplemente se 75 00:06:10,820 --> 00:06:19,120 ajusta a mi color predeterminado y ahora ves que es blanco. Por supuesto, es posible que también desee un aspecto diferente para Android e 76 00:06:19,120 --> 00:06:23,690 iOS, es posible que desee ver dónde se ve más iOS-ish, lo que significa que 77 00:06:23,740 --> 00:06:29,560 no tiene un fondo de color, sino solo un texto de color y puede lograrlo con la buena API 78 00:06:29,560 --> 00:06:35,980 de plataforma anterior que aprendió anteriormente en el curso. Podemos usar la API de la plataforma para 79 00:06:35,980 --> 00:06:42,490 cambiar dinámicamente qué colores usamos aquí en función de la plataforma en la que se ejecuta nuestra aplicación. 80 00:06:42,490 --> 00:06:47,630 Entonces, para el color de fondo, podemos usar la plataforma. OS y ver si eso es Android, 81 00:06:47,640 --> 00:06:53,850 en cuyo caso quiero usar el color primario, de lo contrario, en esta expresión ternaria, no usaré color, 82 00:06:53,920 --> 00:07:00,940 por lo que podemos usar blanco aquí, por ejemplo, un fondo blanco normal o simplemente no configurar color en absoluto como 83 00:07:00,940 --> 00:07:07,150 esto y luego obtendrá el color de fondo predeterminado. Y para el color de tinte, es lo 84 00:07:07,150 --> 00:07:10,810 mismo, compruebo si el sistema operativo es Android en el que 85 00:07:10,810 --> 00:07:20,360 el color del texto debe ser blanco, de lo contrario lo estableceré en Colores. primaryColour y con eso, ahora tienes más iOS, ese aspecto más 86 00:07:20,360 --> 00:07:27,530 típico de iOS aquí en iOS y tienes el aspecto predeterminado de Android, que es más colorido en Android. 87 00:07:27,530 --> 00:07:31,100 Así es como puede configurar las opciones de 88 00:07:31,130 --> 00:07:39,170 navegación aquí, ahora, ¿qué pasa con esta pantalla, sin embargo, dónde vamos a nuestros detalles aquí, a las comidas italianas 89 00:07:39,170 --> 00:07:45,500 o a las comidas rápidas y fáciles? Sería bueno si pudiéramos ver rápido y fácil aquí o italiano aquí en el encabezado 90 00:07:45,500 --> 00:07:46,400 en ese caso. 91 00:07:46,400 --> 00:07:51,230 Así que eso es lo siguiente que debemos ocuparnos y para esto, necesitamos pasar alguna 92 00:07:51,230 --> 00:07:55,940 información de esta pantalla a esta pantalla. Así que veremos cómo funciona eso en el próximo video.