Cómo agregar íconos a la aplicación React Native

Solución:

Iconos de iOS

• Colocar AppIcon en Images.xcassets.
• Agrega 9 íconos de diferentes tamaños:
  • 29pt
  • 29pt*2
  • 29pt*3
  • 40pt*2
  • 40pt*3
  • 57pt
  • 57pt*2
  • 60pt*2
  • 60pt*3.

Images.xcassets se verá así:

Iconos de Android

• Poner ic_launcher.png en carpetas [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
  • 72 * 72 ic_launcher.png en mipmap-hdpi.
  • 48 * 48 ic_launcher.png en mipmap-mdpi.
  • 96 * 96 ic_launcher.png en mipmap-xhdpi.
  • 144 * 144 ic_launcher.png en mipmap-xxhdpi.
  • 192 * 192 ic_launcher.png en mipmap-xxxhdpi.

Actualización 2019 Android

Las últimas versiones de react native también admiten el icono redondo. Para este caso particular, tiene dos opciones:

A. Agregar iconos redondos:
En cada carpeta mipmap, agregue adicionalmente al ic_launcher.png archivar también una versión redonda llamada ic_launcher_round.png con el mismo tamaño.

B. Eliminar iconos redondos:
Dentro yourProjectFolder/android/app/src/main/AndroidManifest.xml quitar la línea android:roundIcon="@mipmap/ic_launcher_round"y guárdalo.

De lo contrario, la compilación arroja un error.

Escribí un generador para generar iconos automáticamente para su aplicación nativa de reacción desde un solo archivo de icono. Genera tus activos y también los agrega correctamente a tu proyecto ios y android:

Actualización (09/04/2019)

Renovamos nuestro generador para estar al día con los estándares del ecosistema. Ahora puede usar @ bam.tech / react-native-make.

Usted puede instalarlo utilizando: yarn add @bam.tech/react-native-make en el proyecto react-native

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 1024×1024
• Sin fondo transparente para iOS
• Un ícono que sigue las pautas de íconos adaptables para Android

Aquí están algunas mejoras sobre la herramienta anterior:

• Sin dependencia de Yeoman, ahora es un complemento react-native-cli
• Sin dependencia de Image Magick
• Crea iconos adaptables para Android
• Agrega tamaños de iconos que faltan 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 la ampliación de una imagen más pequeña puede hacer que los iconos más grandes se pixelen. Ese sitio le dará tamaños para iOS y Android.

A partir de ahí, solo es cuestión de configurar el icono 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

---

---

Utiliza Nuestro Buscador