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?

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

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:

• Imagem base de 1024x1024
• Sem fundo transparente para iOS
• Um ícone que segue as diretrizes de ícones adaptáveis para Android

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

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

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

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.

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.

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:

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.

Isso é útil para pessoas que lutam para encontrar um site melhor para gerar ícones e tela de abertura

• Tornar ícone do aplicativo (útil para android e ios)
• Ferramentas do APE (úteis para android e ios)
• Criador de conjunto de ícones (útil apenas para ios)
• Andoid Asset Studio (útil apenas para Android + recomendado *)

Se você estiver usando o expo, basta colocar um arquivo png 1024 x 1024 no seu projeto e adicionar uma propriedade icon ao seu app.json, ou seja, "icon": "./src/assets/icon.png"

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

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

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