Como adicionar ícones para reagir a aplicação nativa

Estou a fazer uma aplicação nativa React. Eu gostaria de personalizar o ícone do aplicativo (o que significa o ícone em que você clicar para iniciar o aplicativo). Pesquisei isto no Google, mas continuo a encontrar diferentes tipos de ícones que se referem a coisas diferentes. Como é que adiciono estes tipos de ícones à aplicação?

Author: Levi, 0000-00-00
Source

7 answers

Ícones IOS

  • Conjunto AppIcon em Images.xcassets.
  • adicionar 9 ícones de tamanho diferente:
    • 29pt
    • 29pt*2
    • 29pt*3
    • 40pt*2
    • 40pt*3
    • 57pt
    • 57pt*2
    • 60pt*2
    • 60pt*3.

Images.xcassets vai ficar assim:

Ícones Do Android

  • coloque ic_launcher.png em pastas [PrjDir]/android/app/src/main/res/mipmap-*/.
    • 72*72 ic_launcher.png em mipmap-hdpi.
    • 48*48 ic_launcher.png em mipmap-mdpi.
    • 96*96 ic_launcher.png em mipmap-xhdpi.
    • 144*144 ic_launcher.png em mipmap-xxhdpi.
    • 192*192 ic_launcher.png em mipmap-xxxhdpi.
 323
Author: Rockvic, 2018-05-10 02:52:46

Escrevi um gerador para gerar automaticamente Ícones para a sua aplicação nativa react a partir de um único ficheiro de ícones: https://blog.bam.tech/developper-news / how-to-generate-your-reat-native-app-icons-in-a-single-command-line.

Gera os seus bens e também os adiciona correctamente ao seu projecto ios e android.

Instale-o

Você precisa node 6 instalado e image-magick.

Depois instale o gerador com 

npm install -g yo generator-rn-toolbox

Uso it

Tem um único ficheiro de ícone em algum lugar pronto. 200x200px é suficiente.

Então no seu projecto nativo React, execute: 

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

Ser-lhe-á pedido o nome do seu projecto react-native. Por exemplo, se você criou seu projeto com react-native init MyAwesomeProject, seu nome do projeto é MyAwesomeProject.

Quando lhe perguntarem, ? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json?, responda com Y.

E..... é isso!

Espero que possa ser útil para outros.
 227
Author: Almouro, 2017-10-07 13:18:10
 24
Author: rmevans9, 2017-05-23 12:34:44
Consegui adicionar um ícone da aplicação ao meu projecto android, seguindo o conselho deste tipo e usando o Android Asset Studio. Aqui está, transcrito para o caso de a ligação morrer.

Como enviar um ícone da aplicação no Android 'React-Native'

Faça Upload da sua imagem paraAndroid Asset Studio . Escolha os efeitos que quiser aplicar. A ferramenta gera um arquivo zip Para você. Carregue Em Transferir .Postal.

Filma o teu atendedor. Em seguida, arraste as imagens que deseja para a sua pasta /android/app/src/main/res/. Certifique-se de colocar cada imagem na subpasta direita mipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

android/app/src/main/res

3) não arraste (como fiz inicialmente) ingenuamente e largue toda a pasta sobre a sua pasta res. Como você pode estar removendo seus arquivos /res/values/{strings,styles}.xml completamente.

 15
Author: mixophrygian, 2016-08-02 03:07:28

Alguém fez uma ferramenta muito fácil de usar apenas para esta tarefa: https://www.npmjs.com/package/react-native-icon

Esta ferramenta simples permite-lhe criar um único ícone no seu projecto reat-native e criar ícones de todos os tamanhos necessários a partir dele. Atualmente funciona para iOS e Android.

Já o usei. Fiz um png 512x512 e depois fiz aquela ferramenta e boom, feito. Super fácil.
 8
Author: jcollum, 2017-05-05 16:36:09
Vais precisar de ícones de tamanho diferente para iOS e Android, Como o Rockvic disse. Além disso, eu recomendo este site para gerar ícones de tamanho diferente se alguém estiver interessado. Você não precisa baixar nada e funciona perfeitamente.

Https://resizeappicon.com/

Espero que ajude.
 5
Author: jakobinn, 2016-12-11 19:28:04
Estou a chegar um pouco tarde, mas o Android Studio tem um assistente de ícones muito útil. É muito auto-explicativo, mas tem alguns efeitos úteis e está bem construído em:

enter image description here

 3
Author: ,