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?
icons
react-native
Adam Katz
fonte
fonte
Respostas:
Ícones do iOS
AppIcon
noImages.xcassets
.29pt
29pt*2
29pt*3
40pt*2
40pt*3
57pt
57pt*2
60pt*2
60pt*3
.Images.xcassets
ficará assim:Ícones do Android
ic_launcher.png
em pastas[ProjectDirectory]/android/app/src/main/res/mipmap-*/
.ic_launcher.png
polmipmap-hdpi
.ic_launcher.png
polmipmap-mdpi
.ic_launcher.png
polmipmap-xhdpi
.ic_launcher.png
polmipmap-xxhdpi
.ic_launcher.png
polmipmap-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.png
arquivo também uma versão redonda chamadaic_launcher_round.png
com o mesmo tamanho.B. Remova os ícones redondos: Dentro,
yourProjectFolder/android/app/src/main/AndroidManifest.xml
remova a linhaandroid:roundIcon="@mipmap/ic_launcher_round"
e salve-a.Caso contrário, a compilação gera um erro.
fonte
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-make
no projeto react-nativePara 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:
fonte
convert
comando exista.yarn -g add imagemagick
. Em seguida, instalei-o usando ohomebrew
lugar (brew install imagemagick
), que instalou tudo o necessário e funcionou.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
fonte
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}.xml
arquivos completamente.fonte
Alguém criou uma ferramenta muito fácil de usar apenas para esta tarefa: https://www.npmjs.com/package/app-icon
Eu já usei. Criou um png de 512x512 e, em seguida, executou essa ferramenta e lança. Super fácil.
fonte
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:
fonte
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.
fonte
Isso é útil para pessoas que lutam para encontrar um site melhor para gerar ícones e tela de abertura
fonte
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
fonte
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
fonte
Você pode importar elementos nativos do react e usar os ícones incríveis de fonte no aplicativo nativo do react
Instalar
depois importe para onde você deseja usar ícones
Use-o como
fonte
ios-american-football
? ou podemos substituir o ios pelo android nessa sintaxe?