Como adicionar ícones ao aplicativo React Native

271

Estou criando um aplicativo React Native. Gostaria de personalizar o ícone do aplicativo (ou seja, o ícone em que você clica para iniciar o aplicativo). Eu pesquisei isso no Google, mas continuo encontrando diferentes tipos de ícones que se referem a coisas diferentes. Como adiciono esses tipos de ícones ao aplicativo?

Adam Katz
fonte
Isso é para iOS, Android ou ambos?
rmevans9
3
-se agora para ios mas eventualmente para ambos
Adam Katz
Veja esta resposta também: stackoverflow.com/a/11845815/5576491
PallavBakshi

Respostas:

427

Ícones do iOS

  • Situado AppIconno Images.xcassets.
  • Adicione 9 ícones de tamanhos diferentes:
    • 29pt
    • 29pt*2
    • 29pt*3
    • 40pt*2
    • 40pt*3
    • 57pt
    • 57pt*2
    • 60pt*2
    • 60pt*3.

Images.xcassets ficará assim:

Ícones do Android

  • Coloque ic_launcher.pngem pastas [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
    • 72 * 72 ic_launcher.pngpol mipmap-hdpi.
    • 48 * 48 ic_launcher.pngpol mipmap-mdpi.
    • 96 * 96 ic_launcher.pngpol mipmap-xhdpi.
    • 144 * 144 ic_launcher.pngpol mipmap-xxhdpi.
    • 192 * 192 ic_launcher.pngpol mipmap-xxxhdpi.

Update 2019 Android

As versões mais recentes do react native também suportam ícone redondo. Para este caso específico, você tem duas opções:

A. Adicione ícones redondos: em cada pasta do mipmap, adicione adicionalmente ao ic_launcher.pngarquivo também uma versão redonda chamada ic_launcher_round.pngcom o mesmo tamanho.

B. Remova os ícones redondos: Dentro, yourProjectFolder/android/app/src/main/AndroidManifest.xmlremova a linha android:roundIcon="@mipmap/ic_launcher_round"e salve-a.

Caso contrário, a compilação gera um erro.

Rockvic
fonte
2
@ Adam-Katz, esta realmente deve ser a resposta aceita.
Jason Wiener
2
Existe alguma maneira de criar os dois diretamente no react-native?
Jose920405
2
Apenas para atualizar esta ótima resposta. Agora você também precisa de 83,5pt * 2 para o iPadPro no iOS.
quer
4
Eu escrevi um gerador para gerar automaticamente ícones para o seu aplicativo nativo do react a partir de um único arquivo de ícone :) Espero que ajude os outros! (Veja esta resposta )
Almouro
5
Onde isso está na documentação nativa do react?
precisa saber é o seguinte
296

Eu escrevi um gerador para gerar automaticamente ícones para o seu aplicativo nativo de reação a partir de um único arquivo de ícone. Ele gera seus ativos e também os adiciona corretamente ao seu projeto ios e android:

Atualização (09/09/2019)

Renovamos nosso gerador para estar atualizado com os padrões do ecossistema. Agora você pode usar @ bam.tech / react-native-make .

Você pode instalá-lo usando: yarn add @bam.tech/react-native-makeno projeto react-native

Para usá-lo react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>

E é isso! Espero que possa ser útil para os outros :)

Recomendações:

Aqui estão algumas melhorias em relação à ferramenta anterior:

  • Sem dependência do Yeoman, agora é um plugin react-native-cli
  • Sem dependência de imagem da Magick
  • Cria ícones adaptáveis ​​para Android
  • Adiciona tamanhos de ícones ausentes para iOS
Almouro
fonte
7
Essa deve ser a resposta aceita. Você me economiza uma quantidade enorme de tempo! Como desenvolvedores de aplicativos, realmente não nos importamos com quantos ícones o iOS e o Android precisam, pois 9 e 4 ícones têm o mesmo conteúdo, quem se importa? Para retina ou não retina, para tela grande ou pequena, quem se importa? Apenas me dê os mesmos ícones claros e exatamente, é isso! Obrigado e gostaria de experimentar suas outras ferramentas. :)
Zhang Buzz
4
Encontrei o problema: Ao instalar o image-magick, instale as ferramentas herdadas para que o convertcomando exista.
Rick Love
2
@ RickLove Eu também tive esse problema depois de instalar o imagemagick com yarn -g add imagemagick. Em seguida, instalei-o usando o homebrewlugar ( brew install imagemagick), que instalou tudo o necessário e funcionou.
BeniaminoBaggins
1
@PolaEdward não há necessidade de Ruby :) Todos os requisitos estão aqui: github.com/bamlab/generator-rn-toolbox/blob/master/generators/…
Almouro
1
ajudou muito, mas existe alguma maneira de adicionar ícones redondos também? essa biblioteca apenas adiciona ícones normais para o Android. obrigado mais uma vez #
315 Amas
31

Eu usaria um serviço para dimensionar o ícone corretamente. http://makeappicon.com/ parece bom. Use uma imagem em tamanho maior, pois a ampliação de uma imagem menor pode levar à pixelização dos ícones maiores. Esse site fornecerá tamanhos para iOS e Android.

A partir daí, basta definir o ícone como se fosse um aplicativo nativo comum.

https://help.apple.com/xcode/mac/8.0/#/dev10510b1f7

Definir ícone para o aplicativo Android

rmevans9
fonte
1
O link da Apple está quebrado, @ rmevans9. :(
Adam K Dean
1
Observe que este serviço coleta informações sobre você - como nome do aplicativo, categoria de mercado do aplicativo etc. - e impede o download de imagens, a menos que um endereço de e-mail seja fornecido.
tfmontague 23/09/19
Li esta resposta e só depois de algum tempo li a resposta de Almouro abaixo. Eu gostaria de começar com a resposta de Almouro.
Yossi
23

Consegui adicionar um ícone de aplicativo ao meu projeto android com reação nativa, seguindo o conselho desse cara e usando o Android Asset Studio

Aqui está, transcrito no caso de o link ficar inoperante:

Como fazer upload de um ícone de aplicativo no Android React-Native

1) Faça o upload da sua imagem para o Android Asset Studio . Escolha os efeitos que você deseja aplicar. A ferramenta gera um arquivo zip para você. Clique em Download .Zip.

2) Descompacte o arquivo na sua máquina. Em seguida, arraste sobre as imagens que deseja para a sua /android/app/src/main/res/pasta. Coloque cada imagem na subpasta corretamipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

android / app / src / main / res

3) Não (como eu originalmente) arraste e solte ingenuamente a pasta inteira sobre sua pasta res. Como você pode remover seus /res/values/{strings,styles}.xmlarquivos completamente.

mixofrígio
fonte
9

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

Essa ferramenta simples permite criar um único ícone em seu projeto nativo de reação e, em seguida, criar ícones de todos os tamanhos necessários. Atualmente, funciona para iOS e Android.

Eu já usei. Criou um png de 512x512 e, em seguida, executou essa ferramenta e lança. Super fácil.

jcollum
fonte
1
PS: react-native-icon está marcado como obsoleto e foi renomeado para app-icon; npmjs.com/package/app-icon
Eirik H:
8

Chegando um pouco tarde aqui, mas o Android Studio tem um assistente de recursos de ícones muito útil. É muito auto-explicativo, mas tem alguns efeitos úteis e está embutido em:

insira a descrição da imagem aqui

Ryan Knell
fonte
Você cria seus projetos nativos retos no Android Studio?
Adam Katz
1
Não, mas eu regularmente tenho que abri-lo por algum motivo ou outro. O mesmo acontece com o XCode - eventualmente você precisa atravessar para o outro lado. Este é o método que eu uso para gerar conjuntos de ícones de alta qualidade em segundos, muito surpreso por ter tido uma resposta tão forte. Inferno - eu até possuo meu próprio projeto de código aberto para gerar ícones para aplicativos móveis e ainda prefiro esse método. npmjs.com/package/cordova-media-generator
Ryan Knell
Isso foi incrível - também simulou os ícones, que achei super úteis (como esta resposta!).
Bilal Akil
Brilhante! Agradável!
barrylachapelle
6

Você precisará de ícones de tamanhos diferentes para iOS e Android, como disse o Rockvic. Além disso, eu recomendo este site para gerar ícones de tamanhos diferentes, se alguém estiver interessado. Você não precisa baixar nada e funciona perfeitamente.

https://resizeappicon.com/

Espero que ajude.

jakobinn
fonte
-2

Gostaria de sugerir o uso de react-native-vector-icons para importar ícones para o seu projeto. Ao usar ícones vetoriais, você não precisa se preocupar muito com o lado da escala de ícones. Enquanto estiver usando o pacote, você poderá usar todos os ícones populares, como fontawesome, ionicons etc.

Além desses ícones, você também pode trazer seus próprios ícones para o projeto nativo de reação, compactando-os como um arquivo ttf e você pode importá-lo diretamente para o projeto android e ios. Você pode utilizar a mesma biblioteca react-native-vector-icons para gerenciar esses ícones

Aqui está um procedimento detalhado para configurar ícones personalizados

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

Manzoor Samad
fonte
-5

Você pode importar elementos nativos do react e usar os ícones incríveis de fonte no aplicativo nativo do react

Instalar

npm install --save react-native-elements

depois importe para onde você deseja usar ícones

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

Use-o como

render() {
   return(
    <Icon
      reverse
      name='ios-american-football'
      type='ionicon'
      color='#517fa4'
    />
 );
}
uday
fonte
Como podemos adicionar ícones para Android, porque especificamos o nome como ios-american-football? ou podemos substituir o ios pelo android nessa sintaxe?
21919 Ganeshdeshmukh #
Isso não aborda a questão original.
SoluableNonagon
A postagem é sobre o ícone do iniciador e não tem nada a ver com os elementos react-native-. A biblioteca é apenas para ícones no aplicativo.
Celestial