1 00:00:02,250 --> 00:00:07,590 Agregar un botón al encabezado como lo quiero aquí, como un botón de navegación, requiere un poco 2 00:00:07,590 --> 00:00:11,670 de trabajo adicional inicialmente, pero a partir de entonces es muy sencillo. 3 00:00:11,700 --> 00:00:17,160 En primer lugar, tenemos que instalar un paquete adicional para hacerlo más fácil porque, en teoría, 4 00:00:17,160 --> 00:00:18,540 aquí tienes mucha potencia. 5 00:00:18,660 --> 00:00:21,690 Puede agregar dichos botones con la ayuda de las opciones de 6 00:00:21,690 --> 00:00:27,450 navegación, por lo que aquí en MealDetailScreen, además de configurar un título de encabezado, puede establecer headerLeft y headerRight para agregar 7 00:00:27,450 --> 00:00:30,330 botones a la izquierda y a la derecha del título. 8 00:00:30,330 --> 00:00:36,330 Por lo general, desea usar la derecha porque la izquierda está reservada para el botón Atrás y, 9 00:00:36,330 --> 00:00:39,310 en general, simplemente puede devolver un elemento 10 00:00:39,450 --> 00:00:47,220 jsx allí, por lo que simplemente puede configurar esto en texto, como favorito, eso es algo que podría hacer aquí y realmente 11 00:00:47,220 --> 00:00:51,870 dejarme mostrarle esto y, por lo tanto, reiniciar el servidor antes de que 12 00:00:51,870 --> 00:00:58,890 usemos un paquete porque si bien puede agregar un componente aquí, obtener el estilo correcto, el posicionamiento correcto para todas 13 00:00:58,950 --> 00:01:05,430 las diferentes plataformas, especialmente si no solo está usando texto aquí sino también tal vez un ícono que normalmente 14 00:01:05,430 --> 00:01:11,160 desea tener allí, que puede ser realmente engorroso y es por eso que instalaremos un paquete 15 00:01:11,160 --> 00:01:14,810 adicional que lo hace más fácil de lo que es. 16 00:01:18,260 --> 00:01:25,510 Así que permítanme reiniciar esto con npm start, no npm install, npm start y con esto ejecutándose 17 00:01:25,850 --> 00:01:34,320 nuevamente, volvamos a cargar esto aquí en iOS y déjenme mostrarles lo que tenemos aquí ahora que renderizo un texto. 18 00:01:34,520 --> 00:01:35,930 Ves este texto aquí, así 19 00:01:35,960 --> 00:01:37,180 que esto se 20 00:01:37,190 --> 00:01:43,010 está renderizando, pero como dije, tener el relleno correcto, la alineación correcta, el estilo correcto, el tamaño correcto, súper molesto 21 00:01:43,010 --> 00:01:47,870 si lo haces todo por tu cuenta porque no solo lo estás haciendo esto para un 22 00:01:47,870 --> 00:01:49,300 dispositivo pero para muchos dispositivos. 23 00:01:49,370 --> 00:01:54,320 Es por eso que realmente instalaremos un paquete especial aquí que nos ayuda con esto. 24 00:01:54,320 --> 00:02:01,250 Por lo tanto, abandone el proceso por ahora, ejecute el proceso de desarrollo y use npm 25 00:02:01,250 --> 00:02:10,130 install: guarde e instale el paquete react-navigation-header-buttons, que es un paquete que lo ayuda, sorprendentemente si echa un vistazo al 26 00:02:10,310 --> 00:02:16,220 nombre, con la configuración algunos botones en su encabezado, así que en esa 27 00:02:16,280 --> 00:02:24,850 barra de herramientas superior aquí. Este es un paquete que luego hará que sea muy fácil agregar tales botones. Con eso agregado, reiniciaré mi servidor de desarrollo 28 00:02:24,850 --> 00:02:30,490 con npm start y ahora crearé un nuevo componente auxiliar en la carpeta de componentes que nombraré 29 00:02:30,490 --> 00:02:37,290 auxiliar, un botón de encabezado, no auxiliar, botón de encabezado. Allí, importaré React de React 30 00:02:37,300 --> 00:02:44,210 porque este será un componente React normal que creamos allí e importaremos 31 00:02:44,570 --> 00:02:51,980 algo de este nuevo paquete react-navigation-header-buttons que acabamos de instalar y ese 32 00:02:51,980 --> 00:03:02,650 algo que importo es el botón de encabezado. Además de eso, también importaremos algo de @ expo / vector-icons que debería 33 00:03:02,680 --> 00:03:08,830 estar disponible pero solo para ser súper seguro, definitivamente también puedes ejecutar npm install --save 34 00:03:08,830 --> 00:03:16,270 @ expo / vector-icons para instalar este paquete también porque ' Necesitaré eso y lo que necesitamos importar 35 00:03:19,050 --> 00:03:24,630 de ese paquete son los ionicones. Por supuesto, puede usar cualquier conjunto de iconos 36 00:03:24,630 --> 00:03:30,270 que desee, cubrí los iconos anteriormente en este curso y puede usar cualquier icono que desee en el botón 37 00:03:30,270 --> 00:03:35,250 de encabezado, solo trabajaré con los ionicones porque los uso en el resto de este curso también, 38 00:03:35,460 --> 00:03:40,440 pero de nuevo, puede usar cualquier ícono que desee y, por supuesto, en el encabezado, no 39 00:03:40,440 --> 00:03:45,900 tiene que usar íconos, podría usar otro texto también, pero por lo general, sí usa íconos, por supuesto, 40 00:03:45,900 --> 00:03:49,470 eso es lo que los usuarios normalmente se utilizan desde otras aplicaciones. 41 00:03:49,740 --> 00:03:58,040 Además, también importaré colores de constantes / Colores y ahora crearé mi componente aquí y ese es, digamos, el botón de encabezado personalizado o 42 00:03:58,070 --> 00:04:04,850 simplemente el botón de encabezado, lo que quieras nombrar, pero ya estamos importando esto, así que tengo que elegir 43 00:04:05,030 --> 00:04:09,290 un nombre diferente aquí para no tener un choque de nombres y 44 00:04:09,650 --> 00:04:17,390 esto recibirá algunos accesorios y devolverá el botón de encabezado que estamos obteniendo de este paquete que instalamos, pero pronto agregaremos alguna 45 00:04:17,390 --> 00:04:22,280 configuración adicional, por eso estoy envolviendo esto en un componente separado para que no 46 00:04:22,280 --> 00:04:27,800 tengamos que repetir esa configuración para cada botón que estamos usando en cualquier lugar de 47 00:04:27,800 --> 00:04:28,990 la aplicación 48 00:04:29,140 --> 00:04:33,250 y luego, por supuesto, exportaré mi botón de encabezado personalizado predeterminado. 49 00:04:33,340 --> 00:04:39,850 Entonces, ahora, este botón de encabezado que estoy usando aquí desde este paquete que instalamos, que primero recibirá todos los 50 00:04:39,850 --> 00:04:45,790 accesorios que obtenemos con este pequeño y agradable truco que podemos usar en React, donde reenviamos todos los 51 00:04:45,790 --> 00:04:51,700 accesorios con este acceso directo sacando todos los pares clave-valor y pasarlos a este objeto que es este 52 00:04:51,700 --> 00:04:53,060 componente al final. 53 00:04:53,110 --> 00:04:56,790 Así que eso es lo primero, necesitamos reenviar todos los accesorios y eso 54 00:04:56,800 --> 00:04:57,670 es muy 55 00:04:57,670 --> 00:05:00,470 importante, no lo olvides, de lo contrario no funcionará correctamente. 56 00:05:00,490 --> 00:05:07,540 El segundo paso es que agreguemos el accesorio del componente Icon con una I mayúscula, ese es un accesorio que el botón de encabezado que 57 00:05:07,540 --> 00:05:13,580 recibimos de este paquete espera y allí paso los ionicones. Por lo tanto, esto espera un 58 00:05:13,580 --> 00:05:20,730 paquete de iconos vectoriales que se pueda usar para representar iconos, no tiene que ser ionicons sino que 59 00:05:20,730 --> 00:05:27,800 debe ser de @ expo / vector-icons o del paquete de iconos de vector React Native subyacente en 60 00:05:27,800 --> 00:05:34,850 el que se basa el paquete expo y también puede analizar en un tamaño de icono y estandarizaré 61 00:05:34,850 --> 00:05:40,370 esto para que todos mis botones de encabezado en toda la aplicación tengan el 62 00:05:40,370 --> 00:05:48,470 mismo tamaño de 23, que encontré que funciona bastante bien. Por último, pero no menos importante, también configuraré un color aquí 63 00:05:49,160 --> 00:05:59,360 y usaré mi color primario, aunque, por supuesto, debemos asegurarnos de que diferenciemos por plataforma. Así que también importaré la plataforma de React Native porque en Android, 64 00:05:59,390 --> 00:06:06,210 nuestro encabezado tendrá el color primario como fondo, por lo que queremos usar un icono 65 00:06:06,210 --> 00:06:08,000 de color blanco. 66 00:06:08,150 --> 00:06:15,320 Así que aquí, revisaré la plataforma. os, si eso es igual a Android, entonces quiero usar blanco aquí 67 00:06:15,360 --> 00:06:18,350 y solo si es iOS, quiero usar el color primario. 68 00:06:18,470 --> 00:06:21,020 Entonces, ahora tenemos ese botón de encabezado preconfigurado, 69 00:06:21,020 --> 00:06:26,840 ahora podemos usarlo en el lugar, en el componente donde queremos agregarlo a nuestro encabezado y ese es 70 00:06:26,840 --> 00:06:31,030 el MealDetailScreen en este caso. Allí, ahora necesitamos importar algo 71 00:06:31,120 --> 00:06:34,520 más desde el paquete recién instalado, por lo que desde react-navigation-header-buttons, 72 00:06:34,720 --> 00:06:41,140 desde este paquete, aquí tenemos que instalar o importar botones de encabezado, así que no el botón de encabezado que 73 00:06:41,140 --> 00:06:47,710 usamos en el otro archivo pero botones de encabezado, plural. Agregamos esto aquí porque ahora allá 74 00:06:47,770 --> 00:06:53,650 abajo, donde configuramos las opciones de navegación para este componente, en lugar de 75 00:06:53,650 --> 00:06:58,200 usar nuestro componente de texto allí, quiero usar botones de encabezado, 76 00:06:58,250 --> 00:07:04,940 este componente acabo de agregar la importación y envolver esto alrededor de otro elemento que tenemos 77 00:07:04,960 --> 00:07:11,940 importar desde react-navigation-header-buttons y ese es el elemento. El artículo es otro componente que importamos que 78 00:07:12,090 --> 00:07:16,710 ahora podemos usar entre las etiquetas de apertura y cierre de 79 00:07:16,710 --> 00:07:26,600 los botones de encabezado, por lo que aquí agregamos el artículo y el artículo es un componente de cierre automático donde describimos el 80 00:07:26,600 --> 00:07:31,970 icono que queremos representar al final. También podemos darle a este un título que se 81 00:07:32,000 --> 00:07:35,170 representará como una alternativa y nombraré este favorito, pero normalmente 82 00:07:35,180 --> 00:07:37,670 no lo veremos, en su lugar, aquí también 83 00:07:37,670 --> 00:07:46,280 puedo configurar un nombre de icono y ahora debería ser, por ejemplo, ios- star, que es un ícono de ionicons válido y puede buscar en la lista @ expo 84 00:07:46,280 --> 00:07:51,440 / vector-icons que le mostré anteriormente en el curso, que también encontrará adjunta a este video para 85 00:07:51,440 --> 00:07:53,570 posibles íconos que puede usar aquí. 86 00:07:53,570 --> 00:07:59,540 Solo asegúrate de usar un ícono del conjunto de íconos que usaste en tus botones de encabezado, así 87 00:07:59,540 --> 00:08:01,990 que en mi caso, de ionicons. 88 00:08:02,000 --> 00:08:03,830 Ahora, esto indica qué icono 89 00:08:03,830 --> 00:08:09,680 usar, ahora aquí también podemos agregar onPress para registrar una función que debería activarse cuando se presiona ese 90 00:08:09,680 --> 00:08:12,570 icono o cuando se presiona ese elemento en el 91 00:08:12,650 --> 00:08:19,220 encabezado y por ahora solo diré marcar como favorito aquí, registre esto en la consola para que veamos que esto funcionó. 92 00:08:19,220 --> 00:08:22,720 Todavía no estamos completamente allí porque no estamos usando nuestro botón de 93 00:08:22,730 --> 00:08:25,870 encabezado personalizado, esa es la última pieza que falta. 94 00:08:26,000 --> 00:08:28,370 Necesitamos importar este componente que creamos, 95 00:08:28,430 --> 00:08:35,120 así que importe el botón de encabezado desde los componentes y luego, desde el botón de encabezado, ese es 96 00:08:35,120 --> 00:08:42,740 el botón en el que trabajamos y lo pasamos a los botones de encabezado aquí porque esto espera un accesorio de componente de 97 00:08:42,740 --> 00:08:47,870 botón de encabezado donde señalamos componente que debe usarse para representar este elemento al final. 98 00:08:47,870 --> 00:08:52,220 Ahora, todo esto es muy complejo, como se puede ver, una gran cantidad de componentes anidados, esta 99 00:08:52,220 --> 00:08:57,500 es solo una configuración que es un poco engorrosa la primera vez que lo haces, pero cuando la usas en otros 100 00:08:57,500 --> 00:09:01,790 componentes, en realidad solo se trata de copiar la misma configuración aquí, cambiando el título, cambiando el 101 00:09:01,790 --> 00:09:05,860 ícono y cambiando la lógica y usted está allí, así que eso es todo lo 102 00:09:05,870 --> 00:09:07,970 que tiene que hacer en el futuro, 103 00:09:08,000 --> 00:09:12,740 solo la configuración inicial es un trabajo adicional aquí. Sin embargo, con toda esa configuración, 104 00:09:12,740 --> 00:09:14,540 si ahora guardamos 105 00:09:19,710 --> 00:09:25,770 esto, deberíamos poder ver nuestra estrella aquí. Este es el ícono que vemos y podemos presionar esto 106 00:09:25,770 --> 00:09:35,290 y cuando presione esto, verá que marcar como favorito se está registrando aquí en la consola. Veamos también que en Android, siempre tenemos la estrella 107 00:09:35,300 --> 00:09:40,150 y si presiono esta estrella aquí, también vemos la marca 108 00:09:40,160 --> 00:09:47,100 como favorita, así que está funcionando. Una pequeña nota al margen que acabo de ver si tenemos varias recetas, es posible que deseemos un estilo adicional 109 00:09:47,100 --> 00:09:52,470 allí, totalmente ajeno al botón del encabezado, solo al verlo. Entonces en el MealItem. js, en el elemento de 110 00:09:52,470 --> 00:09:56,460 comida, en realidad agregaré un margen vertical de 10, nuevamente, no 111 00:09:56,520 --> 00:10:02,520 es algo que necesite aquí, solo allí para asegurarme de que se vea mejor si tenemos varios 112 00:10:02,520 --> 00:10:03,050 elementos. 113 00:10:03,060 --> 00:10:08,670 Lo importante aquí, por supuesto, es que tenemos nuestro botón de encabezado, este ícono y así 114 00:10:09,180 --> 00:10:13,100 es como puede agregar botones o íconos a su encabezado y, 115 00:10:13,170 --> 00:10:18,570 por supuesto, puede agregar más de uno. Aquí, en la pantalla de detalles de la comida, 116 00:10:18,600 --> 00:10:24,770 puede tener varios de estos elementos entre los botones de encabezado aquí que configura en headerRight en las opciones de navegación. 117 00:10:24,850 --> 00:10:26,220 Así es como agrega 118 00:10:26,220 --> 00:10:33,750 elementos aquí, puede tener más de uno, por ejemplo, aquí también podríamos tener ios-star-outline, que es otro ícono que se ve un 119 00:10:33,750 --> 00:10:37,260 poco diferente para que podamos ver la diferencia aquí, ahora tenemos 120 00:10:37,260 --> 00:10:38,630 dos aquí . 121 00:10:38,790 --> 00:10:45,600 Entonces, eso es posible, por supuesto, no debe sobrecargar esto para que su interfaz de usuario se mantenga limpia y 122 00:10:46,710 --> 00:10:55,010 funcione, pero así es como puede agregar iconos aquí a su pantalla. Por cierto, la advertencia que recibo aquí con respecto a las teclas dobles, el 123 00:10:55,010 --> 00:10:59,910 título aquí también se usa como una clave para sus elementos, por lo que si tiene 124 00:10:59,930 --> 00:11:03,350 varios elementos, no debe usar el mismo título, pero acabo 125 00:11:03,350 --> 00:11:08,640 de agregar esto para fines de demostración de todos modos, así que simplemente lo eliminaré y estamos bien. 126 00:11:08,810 --> 00:11:12,290 Ahora nuestro ícono de estrella aún no hace nada, eso es algo 127 00:11:12,320 --> 00:11:17,660 que agregaremos más tarde, pero al menos lo vemos y eso es realmente importante en un módulo donde hablamos 128 00:11:17,660 --> 00:11:20,300 sobre la navegación y el trabajo con el encabezado.