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


271

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?


¿Es esto para iOS, Android o ambos?
rmevans9

3
ahora para ios pero eventualmente para ambos
Adam Katz

Vea esta respuesta también: stackoverflow.com/a/11845815/5576491
PallavBakshi

Respuestas:


427

Í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.


2
@ Adam-Katz, esta debería ser la respuesta aceptada.
Jason Wiener

2
¿Existe alguna forma de crear ambos directamente en react-native?
jose920405

2
Solo para actualizar esta gran respuesta. Ahora también necesita 83.5pt * 2 para iPadPro en iOS.
Randy Coulman

44
Escribí un generador para generar automáticamente íconos para su aplicación nativa de reacción desde un solo archivo de íconos :) ¡Espero que pueda ayudar a otros! (Ver esta respuesta )
Almouro

55
¿Dónde está esto en la documentación nativa de reacción?
GONeale

296

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:

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

77
Esta debería ser la respuesta aceptada. Me ahorras una gran cantidad de tiempo! Como desarrolladores de aplicaciones, realmente no nos importa cuántos iconos necesiten iOS y Android, ya que 9 iconos y 4 iconos tienen el mismo contenido, ¿a quién le importa? Para la retina o no, para la pantalla grande o pequeña, ¿a quién le importa? Solo dame los mismos iconos claros y claros, ¡eso es todo! Gracias y me gustaría probar sus otras herramientas. :)
Zhang Buzz

44
Encontré el problema: al instalar image-magick, asegúrese de instalar herramientas heredadas para convertque exista el comando.
Rick Love

2
@ RickLove También tuve este problema después de instalar imagemagick con yarn -g add imagemagick. Luego lo instalé usando en su homebrewlugar ( brew install imagemagick) que instaló todo lo necesario y funcionó.
BeniaminoBaggins

1
@PolaEdward no es necesario para Ruby :) Todos los requisitos están aquí: github.com/bamlab/generator-rn-toolbox/blob/master/generators/…
Almouro

1
ayudó mucho, pero ¿hay alguna forma de agregar iconos redondos también? Estas bibliotecas solo agregan iconos normales para Android. gracias de nuevo
Amas

31

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


1
El enlace de Apple está roto, @ rmevans9. :(
Adam K Dean

1
Tenga en cuenta que este servicio recopila información sobre usted, como el nombre de la aplicación, la categoría de mercado de la aplicación, etc., y evita la descarga de imágenes a menos que se proporcione una dirección de correo electrónico.
tfmontague

He leído esta respuesta, y solo después de algún tiempo leí la respuesta de Almouro a continuación. Desearía comenzar con la respuesta de Almouro.
Yossi

23

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}.

android / app / src / main / res

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.


9

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.


1
PD: react-native-icon está marcado como en desuso y ha cambiado de nombre a app-icon; npmjs.com/package/app-icon
Eirik H

8

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:

ingrese la descripción de la imagen aquí


¿Construyes tus proyectos rect-native en Android Studio?
Adam Katz

1
No, pero regularmente tengo que abrirlo por alguna razón u otra. Lo mismo con XCode: eventualmente debes cruzar al otro lado. Este es el método que uso para generar conjuntos de iconos de alta calidad en segundos, muy sorprendido de que haya tenido una respuesta tan fuerte. Diablos: incluso tengo mi propio proyecto de código abierto para generar iconos para aplicaciones móviles y todavía prefiero este método. npmjs.com/package/cordova-media-generator
Ryan Knell

Esto fue increíble, también embelleció los íconos, lo que me pareció muy útil (¡como esta respuesta!).
Bilal Akil

¡Brillante! ¡Buena esa!
barrylachapelle

6

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.




-2

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


-5

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'
    />
 );
}

¿Cómo podemos agregar iconos para Android, porque especificamos el nombre como ios-american-football? o podemos reemplazar ios por android en esta sintaxis?
ganeshdeshmukh

Esto no aborda la pregunta original.
SoluableNonagon

La publicación trata sobre el icono del iniciador y no tiene nada que ver con react-native-elements. La biblioteca es solo para íconos en la aplicación.
Celestial el
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.