Agregar un botón al encabezado como lo quiero aquí, como un botón de navegación, requiere un poco
de trabajo adicional inicialmente, pero a partir de entonces es muy sencillo.
En primer lugar, tenemos que instalar un paquete adicional para hacerlo más fácil porque, en teoría,
aquí tienes mucha potencia.
Puede agregar dichos botones con la ayuda de las opciones de
navegación, por lo que aquí en MealDetailScreen, además de configurar un título de encabezado, puede establecer headerLeft y headerRight para agregar
botones a la izquierda y a la derecha del título.
Por lo general, desea usar la derecha porque la izquierda está reservada para el botón Atrás y,
en general, simplemente puede devolver un elemento
jsx allí, por lo que simplemente puede configurar esto en texto, como favorito, eso es algo que podría hacer aquí y realmente
dejarme mostrarle esto y, por lo tanto, reiniciar el servidor antes de que
usemos un paquete porque si bien puede agregar un componente aquí, obtener el estilo correcto, el posicionamiento correcto para todas
las diferentes plataformas, especialmente si no solo está usando texto aquí sino también tal vez un ícono que normalmente
desea tener allí, que puede ser realmente engorroso y es por eso que instalaremos un paquete
adicional que lo hace más fácil de lo que es.
Así que permítanme reiniciar esto con npm start, no npm install, npm start y con esto ejecutándose
nuevamente, volvamos a cargar esto aquí en iOS y déjenme mostrarles lo que tenemos aquí ahora que renderizo un texto.
Ves este texto aquí, así
que esto se
está renderizando, pero como dije, tener el relleno correcto, la alineación correcta, el estilo correcto, el tamaño correcto, súper molesto
si lo haces todo por tu cuenta porque no solo lo estás haciendo esto para un
dispositivo pero para muchos dispositivos.
Es por eso que realmente instalaremos un paquete especial aquí que nos ayuda con esto.
Por lo tanto, abandone el proceso por ahora, ejecute el proceso de desarrollo y use npm
install: guarde e instale el paquete react-navigation-header-buttons, que es un paquete que lo ayuda, sorprendentemente si echa un vistazo al
nombre, con la configuración algunos botones en su encabezado, así que en esa
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
con npm start y ahora crearé un nuevo componente auxiliar en la carpeta de componentes que nombraré
auxiliar, un botón de encabezado, no auxiliar, botón de encabezado. Allí, importaré React de React
porque este será un componente React normal que creamos allí e importaremos
algo de este nuevo paquete react-navigation-header-buttons que acabamos de instalar y ese
algo que importo es el botón de encabezado. Además de eso, también importaremos algo de @ expo / vector-icons que debería
estar disponible pero solo para ser súper seguro, definitivamente también puedes ejecutar npm install --save
@ expo / vector-icons para instalar este paquete también porque ' Necesitaré eso y lo que necesitamos importar
de ese paquete son los ionicones. Por supuesto, puede usar cualquier conjunto de iconos
que desee, cubrí los iconos anteriormente en este curso y puede usar cualquier icono que desee en el botón
de encabezado, solo trabajaré con los ionicones porque los uso en el resto de este curso también,
pero de nuevo, puede usar cualquier ícono que desee y, por supuesto, en el encabezado, no
tiene que usar íconos, podría usar otro texto también, pero por lo general, sí usa íconos, por supuesto,
eso es lo que los usuarios normalmente se utilizan desde otras aplicaciones.
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
simplemente el botón de encabezado, lo que quieras nombrar, pero ya estamos importando esto, así que tengo que elegir
un nombre diferente aquí para no tener un choque de nombres y
esto recibirá algunos accesorios y devolverá el botón de encabezado que estamos obteniendo de este paquete que instalamos, pero pronto agregaremos alguna
configuración adicional, por eso estoy envolviendo esto en un componente separado para que no
tengamos que repetir esa configuración para cada botón que estamos usando en cualquier lugar de
la aplicación
y luego, por supuesto, exportaré mi botón de encabezado personalizado predeterminado.
Entonces, ahora, este botón de encabezado que estoy usando aquí desde este paquete que instalamos, que primero recibirá todos los
accesorios que obtenemos con este pequeño y agradable truco que podemos usar en React, donde reenviamos todos los
accesorios con este acceso directo sacando todos los pares clave-valor y pasarlos a este objeto que es este
componente al final.
Así que eso es lo primero, necesitamos reenviar todos los accesorios y eso
es muy
importante, no lo olvides, de lo contrario no funcionará correctamente.
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
recibimos de este paquete espera y allí paso los ionicones. Por lo tanto, esto espera un
paquete de iconos vectoriales que se pueda usar para representar iconos, no tiene que ser ionicons sino que
debe ser de @ expo / vector-icons o del paquete de iconos de vector React Native subyacente en
el que se basa el paquete expo y también puede analizar en un tamaño de icono y estandarizaré
esto para que todos mis botones de encabezado en toda la aplicación tengan el
mismo tamaño de 23, que encontré que funciona bastante bien. Por último, pero no menos importante, también configuraré un color aquí
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,
nuestro encabezado tendrá el color primario como fondo, por lo que queremos usar un icono
de color blanco.
Así que aquí, revisaré la plataforma. os, si eso es igual a Android, entonces quiero usar blanco aquí
y solo si es iOS, quiero usar el color primario.
Entonces, ahora tenemos ese botón de encabezado preconfigurado,
ahora podemos usarlo en el lugar, en el componente donde queremos agregarlo a nuestro encabezado y ese es
el MealDetailScreen en este caso. Allí, ahora necesitamos importar algo
más desde el paquete recién instalado, por lo que desde react-navigation-header-buttons,
desde este paquete, aquí tenemos que instalar o importar botones de encabezado, así que no el botón de encabezado que
usamos en el otro archivo pero botones de encabezado, plural. Agregamos esto aquí porque ahora allá
abajo, donde configuramos las opciones de navegación para este componente, en lugar de
usar nuestro componente de texto allí, quiero usar botones de encabezado,
este componente acabo de agregar la importación y envolver esto alrededor de otro elemento que tenemos
importar desde react-navigation-header-buttons y ese es el elemento. El artículo es otro componente que importamos que
ahora podemos usar entre las etiquetas de apertura y cierre de
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
icono que queremos representar al final. También podemos darle a este un título que se
representará como una alternativa y nombraré este favorito, pero normalmente
no lo veremos, en su lugar, aquí también
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
/ vector-icons que le mostré anteriormente en el curso, que también encontrará adjunta a este video para
posibles íconos que puede usar aquí.
Solo asegúrate de usar un ícono del conjunto de íconos que usaste en tus botones de encabezado, así
que en mi caso, de ionicons.
Ahora, esto indica qué icono
usar, ahora aquí también podemos agregar onPress para registrar una función que debería activarse cuando se presiona ese
icono o cuando se presiona ese elemento en el
encabezado y por ahora solo diré marcar como favorito aquí, registre esto en la consola para que veamos que esto funcionó.
Todavía no estamos completamente allí porque no estamos usando nuestro botón de
encabezado personalizado, esa es la última pieza que falta.
Necesitamos importar este componente que creamos,
así que importe el botón de encabezado desde los componentes y luego, desde el botón de encabezado, ese es
el botón en el que trabajamos y lo pasamos a los botones de encabezado aquí porque esto espera un accesorio de componente de
botón de encabezado donde señalamos componente que debe usarse para representar este elemento al final.
Ahora, todo esto es muy complejo, como se puede ver, una gran cantidad de componentes anidados, esta
es solo una configuración que es un poco engorrosa la primera vez que lo haces, pero cuando la usas en otros
componentes, en realidad solo se trata de copiar la misma configuración aquí, cambiando el título, cambiando el
ícono y cambiando la lógica y usted está allí, así que eso es todo lo
que tiene que hacer en el futuro,
solo la configuración inicial es un trabajo adicional aquí. Sin embargo, con toda esa configuración,
si ahora guardamos
esto, deberíamos poder ver nuestra estrella aquí. Este es el ícono que vemos y podemos presionar esto
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
y si presiono esta estrella aquí, también vemos la marca
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
allí, totalmente ajeno al botón del encabezado, solo al verlo. Entonces en el MealItem. js, en el elemento de
comida, en realidad agregaré un margen vertical de 10, nuevamente, no
es algo que necesite aquí, solo allí para asegurarme de que se vea mejor si tenemos varios
elementos.
Lo importante aquí, por supuesto, es que tenemos nuestro botón de encabezado, este ícono y así
es como puede agregar botones o íconos a su encabezado y,
por supuesto, puede agregar más de uno. Aquí, en la pantalla de detalles de la comida,
puede tener varios de estos elementos entre los botones de encabezado aquí que configura en headerRight en las opciones de navegación.
Así es como agrega
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
poco diferente para que podamos ver la diferencia aquí, ahora tenemos
dos aquí .
Entonces, eso es posible, por supuesto, no debe sobrecargar esto para que su interfaz de usuario se mantenga limpia y
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
título aquí también se usa como una clave para sus elementos, por lo que si tiene
varios elementos, no debe usar el mismo título, pero acabo
de agregar esto para fines de demostración de todos modos, así que simplemente lo eliminaré y estamos bien.
Ahora nuestro ícono de estrella aún no hace nada, eso es algo
que agregaremos más tarde, pero al menos lo vemos y eso es realmente importante en un módulo donde hablamos
sobre la navegación y el trabajo con el encabezado.