react iconos icon app icons react-native

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



react-native-vector-icons install (11)

Íconos de iOS

  • Establezca AppIcon en 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

  • Ponga ic_launcher.png en las 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 íconos redondos. Para este caso particular, tiene dos opciones:

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

B. Eliminar íconos redondos: dentro de su yourProjectFolder/android/app/src/main/AndroidManifest.xml elimine la línea android:roundIcon="@mipmap/ic_launcher_round" y android:roundIcon="@mipmap/ic_launcher_round" .

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

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?

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

Escribí un generador para generar automáticamente iconos para su aplicación nativa de reacción desde un solo archivo de icono: https://blog.bam.tech/developper-news/how-to-generate-your-react-native-app-icons-in-a-single-command-line .

Genera sus activos y también los agrega correctamente a su proyecto ios y android.

Instalarlo

Necesita el node 6 instalado y la image-magick .

Luego instale el generator con

npm install -g yo generator-rn-toolbox

Úsalo

Tenga un solo archivo de icono listo en alguna parte. El icono debe tener un tamaño de 1024x1024.

Luego, en su proyecto React Native, ejecute:

yo rn-toolbox:assets --icon <path to your icon> # For instance yo rn-toolbox:assets --icon ../icon.png

Se le pedirá el nombre de su proyecto nativo de reacción. Por ejemplo, si creó su proyecto con react-native init MyAwesomeProject , el nombre de su proyecto es MyAwesomeProject .

Cuando te preguntan ? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json? ? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json? , responde con Y.

¡Y eso es!

Espero que pueda ser útil para otros :)

Llegué 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 útiles y está integrado en:

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

Necesitará iconos 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.

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 desee a su carpeta /android/app/src/main/res/ . Asegúrese de colocar cada imagen en la subcarpeta derecha mipmap-{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 archivos /res/values/{strings,styles}.xml completo.

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

Instalar

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