Cómo agregar íconos a la aplicación React Native
Estoy creando una aplicación React Native. Me gustaría personalizar el ícono de la aplicación (es decir, el ícono en el que haces clic para iniciar la aplicación). Busqué esto en Google, pero sigo encontrando diferentes tipos de íconos que se refieren a diferentes cosas. ¿Cómo agrego este tipo de íconos a la aplicación?
Iconos de iOS
- Establecer
AppIconenImages.xcassets. - Agrega 9 íconos de diferentes tamaños:
29pt29pt*229pt*340pt*240pt*357pt57pt*260pt*260pt*3.
Images.xcassetsse verá así:
Iconos de Android
- Poner
ic_launcher.pngen carpetas[ProjectDirectory]/android/app/src/main/res/mipmap-*/.- 72*72
ic_launcher.pngpulgmipmap-hdpi. - 48*48
ic_launcher.pngpulgmipmap-mdpi. - 96*96
ic_launcher.pngpulgmipmap-xhdpi. - 144*144
ic_launcher.pngpulgadasmipmap-xxhdpi. - 192*192
ic_launcher.pngpulgadasmipmap-xxxhdpi.
- 72*72
Actualización 2019 Android
Las últimas versiones de reaccionar nativo también admiten íconos redondos. Para este caso particular, tienes dos opciones:
A. Agregar íconos redondos:
en cada carpeta mipmap, agregue adicionalmente al ic_launcher.pngarchivo también una versión redonda llamada ic_launcher_round.pngcon el mismo tamaño.
B. Eliminar iconos redondos:
En el interior yourProjectFolder/android/app/src/main/AndroidManifest.xmlelimina la línea android:roundIcon="@mipmap/ic_launcher_round"y guárdala.
De lo contrario, la compilación arroja un error.
Escribí un generador para generar automáticamente íconos para su aplicación nativa de reacción a partir de un solo archivo de ícono. Genera tus activos y también los agrega correctamente a tu proyecto de ios y android:
Actualización (09/04/2019)
Renovamos nuestro generador para estar actualizado con los estándares del ecosistema. Ahora puedes usar @bam.tech/react-native-make .
Puedes instalarlo usando: yarn add @bam.tech/react-native-makeen el proyecto nativo de reacción
para usarlo react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>
¡Y eso es! Espero que pueda ser útil para otros :)
Recomendaciones:
- Imagen base de 1024x1024
- Sin fondo transparente para iOS
- Un icono que sigue las pautas de iconos adaptativos para Android
Aquí hay algunas mejoras con respecto a la herramienta anterior: 🥳
- Sin dependencia de Yeoman, ahora es un complemento reaccionar-nativo-cli
- Sin dependencia de Image Magick
- Crea íconos adaptables para Android
- Agrega tamaños de íconos faltantes para iOS
Usaría un servicio para escalar el ícono correctamente. http://makeappicon.com/ parece bueno. Utilice una imagen de mayor tamaño, ya que ampliar una imagen más pequeña puede provocar que los iconos más grandes se pixelen. Ese sitio le dará tamaños tanto para iOS como para Android.
A partir de ahí, es sólo cuestión de configurar el ícono como lo haría con una aplicación nativa normal.
https://help.apple.com/xcode/mac/8.0/#/dev10510b1f7
Establecer icono para la aplicación de Android
Pude agregar el ícono de una aplicación a mi proyecto de Android nativo de reacción siguiendo el consejo de este tipo y usando Android Asset Studio
Aquí está, transcrito por si el enlace se cae:
Cómo cargar un ícono de aplicación en React-Native Android
1) Sube tu imagen a Android Asset Studio . Elija los efectos que desee aplicar. La herramienta genera un archivo zip para usted. Haga clic en Descargar .Zip.
2) Descomprima el archivo en su máquina. Luego arrastre las imágenes que desee a su /android/app/src/main/res/carpeta. Asegúrate de colocar cada imagen en la subcarpeta correcta.mipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.
3) No (como lo hice originalmente) arrastre y suelte ingenuamente toda la carpeta sobre su carpeta res. Como es posible que esté eliminando sus /res/values/{strings,styles}.xmlarchivos por completo.
Android Studio tiene un asistente de recursos de iconos muy útil llamado Image Asset Studio (guía del usuario aquí) . Es bastante explicativo, tiene algunos efectos útiles y está integrado en:
Captura de pantalla de Android Studio 4.1.3 en Windows 10
