Agregar iconos es súper sencillo en una aplicación
React Native que usa expo.
Por cierto, podemos
deshacernos de la importación del
botón, ya no necesitamos el botón incorporado, sino volver a los iconos porque se puede agregar un
icono importando algo y ahora es @ expo / vector-icons.
Puede ser un nombre de paquete un poco extraño, pero
eso es exactamente lo que es, es parte del kit de herramientas de la expo, por así decirlo,
se incluye automáticamente
en cualquier proyecto React Native que creaste con expo y allí puedes importar componentes que te ayuden a renderizar íconos y
Un componente bastante agradable es el componente de ionicones. Para eso, simplemente debe saber que existen diferentes conjuntos de iconos que
están integrados en la exposición o en este paquete de iconos vectoriales para ser precisos. Ionicons es un conjunto de iconos administrados por el equipo detrás
de ionic al final, por lo que los iconos que se incluyen en ese conjunto son administrados por
ese equipo iónico y realmente solo estoy hablando de los iconos aquí, esto
no tiene nada que ver con nosotros agregando cualquier cosa, desde iónico a la aplicación React Native, solo estamos
usando sus íconos.
También tiene otros conjuntos de iconos como iconos malvados, iconos de materiales, por lo que una gran cantidad de conjuntos de
iconos que puede usar y un excelente lugar para aprender sobre todos los iconos incluidos y obtener una visión general
de todos los iconos incluidos es la documentación oficial de los iconos de exposición que encontrará
adjunto a este video también, un enlace a esta documentación y allí no solo puede aprender más sobre cómo usarlos, sino
que también encontrará ese enlace al directorio de iconos y esa es una larga lista de todos los iconos incluidos
que puede use y siempre vea a qué paquete de íconos pertenece, también puede
buscar íconos como eliminar para encontrar todos los íconos que tengan algo que ver con
eliminar cosas y luego verá que hay algo del paquete de ionicons, algo del material paquete
de iconos y así sucesivamente.
Ahora los íconos que busqué por adelantado son del paquete de ionicones.
Entonces, aquí importaré ionicons desde @ expo / vector-icons y esto ahora es automáticamente un componente
que podemos usar en nuestro código jsx para generar un icono y
si hubiéramos usado iconos de material, también sería un componente solo para generar un icono
de
material pero quiero usar un icono de ionicon, así que lo usaré y ahora iré al código jsx y en lugar
de usar un valor más bajo aquí, en realidad generaré un icono de ionicon, un icono aquí en mi botón y lo mejor
es que un ícono de este tipo aquí también se puede anidar en nuestro botón, aunque lo que estamos
generando aquí, accesorios secundarios, es en lugar de un nodo de texto, pero eso es compatible, puede generar un componente de ícono en ese
componente de texto también, para que funcione.
Sin embargo, volviendo a este ionicon aquí, en este momento no estoy diciendo nada
sobre el ícono que quiero usar y allí, el ícono que elegí de antemano tiene un nombre de md-remove.
Ahora le dice a React Native y una especie de exposición que desea usar ese ícono agregando el nombre prop aquí en ionicons
y luego esto toma una cadena con el nombre del ícono que encuentra en ese directorio, ¿verdad?
Así que aquí elegí este ícono que quiero
usar, así que ese es el nombre, md-remove que ahora usamos aquí.
Así que ese es el nombre del ícono que agregamos aquí.
A continuación, también puede configurar el tamaño del icono en píxeles y aquí iré con 24 para tener un bonito icono grande y también
el color que este icono debería tener y aquí, configuraré esto para que tenga un color blanco.
Ahora copiaré eso y usaré el mismo en el botón mayor, pero por supuesto, el ícono es
diferente,
aquí elegí md-add como ícono y, por supuesto, puedes explorar esa lista de íconos y elegir diferentes íconos
si desea y también puede probar paquetes de iconos diferentes en lugar de ionicones o
incluso usar dos paquetes de iconos diferentes en un mismo componente.
No tiene que apegarse a un solo paquete de íconos, puede mezclarlos y combinarlos como desee,
para que podamos renderizar un ionicon aquí y renderizar un ícono de material aquí, pero por
supuesto debe asegurarse de que el aspecto general de su aplicación haga sentido.
Entonces, si está mezclando íconos demasiado, es probable que no se vea tan bien, por lo que
generalmente desea quedarse en un conjunto, pero técnicamente no tiene que hacerlo.
Así que aquí, elegí estos dos íconos y ahora con eso, si guardamos esto, comenzamos un nuevo juego aquí.
Ahora tenemos un ícono más y un ícono menos aquí para indicar si los números deben ser más bajos o más altos
y eso es bastante bueno en mi opinión porque eso nos da una forma completamente nueva de construir interfaces de
usuario porque con íconos, realmente tenemos otra herramienta importante para construir grandes experiencias de usuario.