Estoy haciendo una aplicación React Native. Me gustaría personalizar el ícono de la aplicación (es decir, el ícono en el que hace clic para iniciar la aplicación). He buscado en Google esto, pero sigo encontrando diferentes tipos de íconos que se refieren a diferentes cosas. ¿Cómo agrego este tipo de íconos a la aplicación?

Íconos de iOS

• Establecer AppIconen Images.xcassets.
• Agregue 9 iconos 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í:

Íconos de Android

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

Actualización 2019 Android

Las últimas versiones de react native también admiten íconos redondos. Para este caso particular, tiene dos opciones:

A. Agregar iconos 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.xmlelimine la línea android:roundIcon="@mipmap/ic_launcher_round"y guárdela.

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

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

Actualización (04/09/2019)

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

Puede instalarlo usando: yarn add @bam.tech/react-native-makeen 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 1024x1024
• No hay fondo transparente para iOS
• Un icono que sigue las pautas de iconos adaptativos para Android

Aquí hay algunas mejoras sobre la herramienta anterior: 🥳

• Sin dependencia de Yeoman, ahora es un complemento react-native-cli
• Sin dependencia de Image Magick
• Crea iconos adaptativos para Android
• Agrega tamaños de iconos faltantes para iOS

Usaría un servicio para escalar el icono correctamente. http://makeappicon.com/ parece bueno. Utilice una imagen de mayor tamaño, ya que ampliar 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

Pude agregar un ícono de aplicación a mi proyecto de Android nativo de reacción siguiendo los consejos de este tipo y usando Android Asset Studio

Aquí está, transcrito en caso de que el enlace se corte:

Cómo cargar un ícono de aplicación en React-Native Android

1) Sube tu imagen a Android Asset Studio . Elija los efectos que le gustaría aplicar. La herramienta genera un archivo zip para usted. Haga clic en Descargar .Zip.

2) Descomprima el archivo en su máquina. Luego arrastre sobre las imágenes que desea a su /android/app/src/main/res/carpeta. Asegúrese de colocar cada imagen en la subcarpeta correctamipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

3) No arrastre y suelte ingenuamente (como lo hice originalmente) toda la carpeta sobre su carpeta res. Como puede estar eliminando sus /res/values/{strings,styles}.xmlarchivos por completo.

Alguien creó una herramienta muy fácil de usar solo para esta tarea: https://www.npmjs.com/package/app-icon

Esta herramienta simple le permite crear un solo ícono en su proyecto nativo de reacción y luego crear íconos de todos los tamaños requeridos. Actualmente funciona para iOS y Android.

Lo he usado Hice un png de 512x512 y luego ejecuté esa herramienta y boom, listo. Muy facil.

Llego un poco tarde aquí, pero Android Studio tiene un asistente de activos de iconos muy útil. Se explica por sí mismo pero tiene algunos efectos prácticos y está integrado en:

Necesitará íconos de diferentes tamaños para iOS y Android, como dijo Rockvic. Además, recomiendo este sitio para generar iconos de diferentes tamaños si alguien está interesado. No necesita descargar nada y funciona perfectamente.

https://resizeappicon.com/

Espero eso ayude.

Esto es útil para las personas que luchan por encontrar un mejor sitio para generar íconos y pantalla de bienvenida

• Make App Icon (útil tanto para Android como para iOS)
• Herramientas APE (útiles tanto para Android como para iOS)
• Creador de conjunto de iconos (útil solo para ios)
• Andoid Asset Studio (útil solo para Android + recomendado *)

Si está utilizando expo, simplemente coloque un archivo png de 1024 x 1024 en su proyecto y agregue una propiedad de icono a su app.json, es decir, "icono": "./src/assets/icon.png"

https://docs.expo.io/versions/latest/guides/app-icons

Me gustaría sugerir utilizar react-native-vector-icons para importar iconos a su proyecto. A medida que usa iconos vectoriales, no necesita preocuparse demasiado en el lado de la escala de iconos. Mientras usa el paquete, puede usar todos los conjuntos de iconos populares, como fontawesome, ionicons, etc.

Además de estos conjuntos de iconos, también puede traer sus propios iconos a su proyecto nativo de reacción al empaquetar sus iconos como un archivo ttf y puede importar ese ttf directamente al proyecto Android y iOS. Puede utilizar la misma biblioteca react-native-vector-icons para administrar esos íconos

Aquí hay un procedimiento detallado para configurar íconos personalizados

https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c

Puede importar elementos reactivos nativos y usar los íconos de fuente impresionante para su aplicación nativa de reacción

Instalar en pc

npm install --save react-native-elements

luego importa eso donde quieras usar íconos

import { Icon } from 'react-native-elements'

Úselo como

render() {
   return(
    <Icon
      reverse
      name='ios-american-football'
      type='ionicon'
      color='#517fa4'
    />
 );
}