Come aggiungere icone all'app React Native

Ho scritto un generatore per generare automaticamente icone per la tua app nativa reattiva da un singolo file di icone: https://blog.bam.tech/developper-news/how-to-generate-your-reac-native-app-icons -in-a-single-command-line .

Genera le tue risorse e le aggiunge anche correttamente ai tuoi progetti ios e Android.

Installalo

Hai bisogno di node 6 installato e image-magick.

Quindi installare il generatore con

npm install -g yo generator-rn-toolbox

Usalo

Avere un singolo file icona pronto da qualche parte. L'icona deve essere di dimensioni 1024x1024.

Quindi, nel tuo progetto React Native, esegui:

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

Ti verrà chiesto il nome del tuo progetto nativo reattivo. Ad esempio, se hai creato il tuo progetto con react-native init MyAwesomeProject, il nome del tuo progetto è MyAwesomeProject.

Quando ti viene chiesto, ? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json?, rispondi con Y.

E ... questo è tutto!

Spero che possa essere utile per gli altri :)

Vorrei utilizzare un servizio per ridimensionare l'icona correttamente. http://makeappicon.com/ sembra buono. Utilizzare un'immagine di dimensioni maggiori in quanto l'aumento di dimensioni di un'immagine più piccola può portare a pixel delle icone più grandi. Quel sito ti darà taglie sia per iOS che per Android.

Da lì è solo questione di impostare l'icona come se fosse una normale app nativa.

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

Imposta l'icona per l'applicazione Android

Sono stato in grado di aggiungere un'icona di app al mio progetto Android nativo reagito seguendo il consiglio di questo ragazzo e usando Android Asset Studio

Eccolo, trascritto nel caso in cui il collegamento si spenga:

Come caricare un'icona di applicazione in Android React-Native

1) Carica la tua immagine in Android Asset Studio . Scegli gli effetti che desideri applicare. Lo strumento genera un file zip per te. Fai clic su Scarica. Zip.

2) Decomprimi il file sul tuo computer. Quindi trascina le immagini che desideri nella cartella /Android/app/src/main/res/. Assicurati di inserire ogni immagine nella sottocartella di destra mipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

3) Non fare (come ho originariamente fatto) ingenuamente trascinare e rilasciare l'intera cartella sulla cartella res. Poiché potresti rimuovere completamente i file /res/values/{strings,styles}.xml.

Qualcuno ha creato uno strumento molto facile da usare solo per questo compito: https://www.npmjs.com/package/app-icon

Questo semplice strumento ti consente di creare un'unica icona nel tuo progetto nativo reattivo, quindi creare icone di tutte le dimensioni richieste. Attualmente funziona per iOS e Android.

L'ho usato Fatto un png 512x512 e poi eseguito quello strumento e boom, fatto. Super facile. 

Avrai bisogno di icone di dimensioni diverse per iOS e Android, come ha detto Rockvic. Inoltre, consiglio questo sito per generare icone di dimensioni diverse se qualcuno è interessato. Non è necessario scaricare nulla e funziona perfettamente.

https://resizeappicon.com/

Spero che sia d'aiuto.

Arriva un po 'tardi qui, ma Android Studio ha una procedura guidata per le risorse di icone molto utile. È molto intuitivo, ma ha alcuni effetti pratici ed è costruito proprio in:

Questo è utile per le persone che hanno difficoltà a trovare un sito migliore per generare icone e splashscreen

• Make App Icon (utile sia per Android che per iOS)
• Strumenti APE (utile sia per Android che per iOS)
• Icon set creator (utile solo per ios)
• Andoid Asset Studio (utile solo per Android + consigliato *)

Se stai usando expo, inserisci un file png 1024 x 1024 nel tuo progetto e Aggiungi una proprietà icona alla tua app.json, ad esempio "icona": "./src/assets/icon.png"

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

Puoi importare gli elementi nativi reattivi e usare le icone fantastiche per il tuo reattivo app nativa

Installare 

npm install --save react-native-elements

quindi importa quello dove vuoi usare le icone

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

Usalo come

render() {
   return(
    <Icon
      reverse
      name='ios-american-football'
      type='ionicon'
      color='#517fa4'
    />
 );
}

Vorrei suggerire di usare react-native-vector-icons per importare icone nel tuo progetto. Man mano che si usano le icone vettoriali, non è necessario preoccuparsi molto del lato ridimensionamento delle icone. Mentre usi il pacchetto puoi usare tutti i popolari set di icone come fontawesome, ionicons ecc.

Oltre a questi iconset puoi anche portare le tue icone anche al tuo progetto nativo reattivo comprimendo le tue icone come un file ttf e puoi importare il file ttf direttamente su entrambi i progetti Android e ios. È possibile utilizzare la stessa libreria di icone native di reagire per gestire tali icone

Ecco una procedura dettagliata per configurare le icone personalizzate

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