Jak dodawać ikony do aplikacji React Native

271

Tworzę aplikację React Native. Chciałbym dostosować ikonę aplikacji (czyli ikonę, którą klikniesz, aby uruchomić aplikację). Znalazłem to w Google, ale wciąż znajduję różne rodzaje ikon, które odnoszą się do różnych rzeczy. Jak dodać te typy ikon do aplikacji?

Adam Katz
źródło
Czy to dla iOS, Androida czy obu?
rmevans9
3
teraz dla iOS, ale ostatecznie dla obu
Adam Katz
Zobacz również tę odpowiedź: stackoverflow.com/a/11845815/5576491
PallavBakshi

Odpowiedzi:

427

Ikony iOS

  • Ustaw AppIconw Images.xcassets.
  • Dodaj 9 różnych rozmiarów ikon:
    • 29pt
    • 29pt*2
    • 29pt*3
    • 40pt*2
    • 40pt*3
    • 57pt
    • 57pt*2
    • 60pt*2
    • 60pt*3.

Images.xcassets będzie wyglądać następująco:

Ikony Androida

  • Umieść ic_launcher.pngw folderach [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
    • 72 * 72 ic_launcher.pngw mipmap-hdpi.
    • 48 * 48 ic_launcher.pngw mipmap-mdpi.
    • 96 * 96 ic_launcher.pngw mipmap-xhdpi.
    • 144 144 * ic_launcher.pngW mipmap-xxhdpi.
    • 192 * 192 ic_launcher.pngw mipmap-xxxhdpi.

Zaktualizuj system Android 2019

Najnowsze wersje reagują również na okrągłe ikony. W tym konkretnym przypadku masz dwie możliwości:

A. Dodaj okrągłe ikony: W każdym folderze mipmap dodaj dodatkowo do ic_launcher.pngpliku także okrągłą wersję ic_launcher_round.pngo tej samej wielkości.

B. Usuń okrągłe ikony: wewnątrz yourProjectFolder/android/app/src/main/AndroidManifest.xmlusuń linię android:roundIcon="@mipmap/ic_launcher_round"i zapisz ją.

W przeciwnym razie kompilacja generuje błąd.

Rockvic
źródło
2
@ adam-katz, to naprawdę powinna być zaakceptowana odpowiedź.
Jason Wiener
2
Czy istnieje jakikolwiek sposób na zrobienie obu bezpośrednio w React-Native?
jose920405
2
Po prostu zaktualizuj tę świetną odpowiedź. Teraz potrzebujesz także 83.5pt * 2 dla iPada Pro na iOS.
Randy Coulman,
4
Napisałem generator, aby automatycznie generować ikony dla Twojej natywnej aplikacji z pojedynczego pliku ikony :) Mam nadzieję, że może pomóc innym! (Zobacz tę odpowiedź )
Almouro,
5
Gdzie to jest w natywnej dokumentacji reagowania?
GONeale,
296

Napisałem generator, aby automatycznie generować ikony dla Twojej natywnej aplikacji z pojedynczego pliku ikony. Generuje zasoby, a także dodaje je poprawnie do projektu iOS i Android:

Aktualizacja (04/09/2019)

Odnowiliśmy nasz generator, aby był zgodny ze standardami ekosystemu. Możesz teraz używać @ bam.tech / reagować-native-make .

Możesz go zainstalować, używając: yarn add @bam.tech/react-native-makew projekcie native-respons

Aby go użyć react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>

I to wszystko! Mam nadzieję, że może się przydać innym :)

Rekomendacje:

Oto kilka ulepszeń w stosunku do poprzedniego narzędzia: 🥳

  • Bez zależności Yeoman, jest to teraz wtyczka cli-native-reagowania
  • Brak zależności od magii obrazu
  • Tworzy Adaptacyjne ikony dla Androida
  • Dodaje brakujące rozmiary ikon dla iOS
Almouro
źródło
7
To powinna być zaakceptowana odpowiedź. Oszczędzasz mi ogromną ilość czasu! Jako twórcy aplikacji nie obchodzi nas, ile ikon potrzebuje iOS i Android, bo 9 ikon i 4 ikony mają tę samą zawartość, kogo to obchodzi? Dla siatkówki czy nie, dla dużego lub małego ekranu, kogo to obchodzi? Daj mi dokładnie te same ikony, to wszystko! Dziękuję i chciałbym wypróbować inne narzędzia. :)
Zhang Buzz
4
Znalazłem problem: instalując magiczną grafikę, zainstaluj starsze narzędzia, aby convertpolecenie mogło istnieć.
Rick Love
2
@ RickLove Miałem również ten problem po zainstalowaniu imagemagick z yarn -g add imagemagick. Następnie zainstalowałem go za pomocą homebrewzamiast tego ( brew install imagemagick), który zainstalował wszystko, co niezbędne i działał.
BeniaminoBaggins,
1
@PolaEdward nie ma potrzeby Ruby :) Wszystkie wymagania są tutaj: github.com/bamlab/generator-rn-toolbox/blob/master/generators/…
Almouro
1
bardzo pomogło, ale czy można dodać okrągłe ikony? ta biblioteka po prostu dodaje normalne ikony dla Androida. jeszcze raz dziękuję
Amas
31

Korzystałbym z usługi, aby poprawnie skalować ikonę. http://makeappicon.com/ wydaje się dobry. Użyj obrazu o większym rozmiarze, ponieważ powiększanie mniejszego obrazu może prowadzić do pikselowania większych ikon. Ta strona da ci rozmiary zarówno dla iOS, jak i Androida.

Stamtąd wystarczy tylko ustawić ikonę tak, jak zwykłą natywną aplikację.

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

Ustaw ikonę aplikacji na Androida

rmevans9
źródło
1
Łącze Apple jest zepsute, @ rmevans9. :(
Adam K Dean,
1
Pamiętaj, że ta usługa zbiera informacje o Tobie - takie jak nazwa aplikacji, kategoria rynkowa aplikacji itp. - i zapobiega pobieraniu obrazów, chyba że podasz adres e-mail.
tfmontague
Przeczytałem tę odpowiedź i dopiero po jakimś czasie przeczytałem poniżej odpowiedź Almouro. Chciałbym zacząć od odpowiedzi Almouro.
Yossi
23

Byłem w stanie dodać ikonę aplikacji do mojego rodzimego projektu na Androida, postępując zgodnie z radami tego faceta i używając Android Asset Studio

Oto transkrybowane na wypadek, gdyby link przestał działać:

Jak przesłać ikonę aplikacji w systemie Android React-Native

1) Prześlij swoje zdjęcie do Android Asset Studio . Wybierz efekty, które chcesz zastosować. Narzędzie generuje dla Ciebie plik zip. Kliknij Pobierz .Zip.

2) Rozpakuj plik na swoim komputerze. Następnie przeciągnij obrazy, które chcesz, do swojego /android/app/src/main/res/folderu. Upewnij się, że umieściłeś każdy obraz w odpowiednim podfolderzemipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

android / app / src / main / res

3) Nie (tak jak pierwotnie robiłem) naiwnie przeciągaj i upuszczaj cały folder nad folderem res. Ponieważ możesz /res/values/{strings,styles}.xmlcałkowicie usuwać swoje pliki.

mixofrygian
źródło
9

Ktoś stworzył bardzo łatwe w użyciu narzędzie do tego zadania: https://www.npmjs.com/package/app-icon

To proste narzędzie pozwala utworzyć pojedynczą ikonę w swoim ojczystym projekcie, a następnie utworzyć z niej ikony wszystkich wymaganych rozmiarów. Obecnie działa na iOS i Androida.

Użyłem tego. Zrobiłem png 512x512, a następnie uruchomiłem to narzędzie i wysięgnik, gotowe. Super łatwe.

jcollum
źródło
1
PS: ikona Reaguj-natywna jest oznaczona jako przestarzała i została przemianowana na Ikona-aplikacji; npmjs.com/package/app-icon
Eirik H
8

Spóźniamy się trochę tutaj, ale Android Studio ma bardzo przydatny kreator zasobów ikon. Jest to bardzo oczywiste, ale ma kilka przydatnych efektów i jest wbudowane w:

wprowadź opis zdjęcia tutaj

Ryan Knell
źródło
Czy budujesz swoje proste projekty w Android Studio?
Adam Katz,
1
Nie, ale z jakiegoś powodu muszę go regularnie otwierać. To samo z XCode - w końcu musisz przejść na drugą stronę. Jest to metoda, której używam do generowania wysokiej jakości zestawów ikon w kilka sekund, bardzo zaskoczony, że ma tak silną reakcję. Do diabła - mam nawet własny projekt open source do generowania ikon dla aplikacji mobilnych i nadal wolę tę metodę. npmjs.com/package/cordova-media-generator
Ryan Knell
To było niesamowite - upiększyło także ikony, które uważałem za bardzo pomocne (jak ta odpowiedź!).
Bilal Akil
Znakomity! Niezłe!
barrylachapelle,
6

Będziesz potrzebować różnych rozmiarów ikon dla iOS i Androida, jak powiedział Rockvic. Ponadto polecam tę stronę do generowania ikon o różnych rozmiarach, jeśli ktoś jest zainteresowany. Nie musisz niczego pobierać i działa idealnie.

https://resizeappicon.com/

Mam nadzieję, że to pomoże.

jakobinn
źródło
3

Jest to pomocne dla osób, które starają się znaleźć lepszą witrynę do generowania ikon i ekranu powitalnego

ishab acharya
źródło
-2

Chciałbym zasugerować użycie ikon Reaktywuj-natywny-wektor do importowania ikon do twojego projektu. Korzystając z ikon wektorowych, nie musisz się zbytnio przejmować skalowaniem ikon. Podczas korzystania z pakietu możesz używać wszystkich popularnych zestawów ikon, takich jak fontawesome, jonowe itp.

Oprócz tych zestawów ikon możesz także wnieść własne ikony do swojego rodzimego projektu, pakując ikony jako plik ttf, a także możesz zaimportować ten ttf bezpośrednio do projektu Android i iOS. Do zarządzania tymi ikonami możesz wykorzystać tę samą bibliotekę reaguj-natywnie-wektorowe-ikony

Oto szczegółowa procedura konfiguracji niestandardowych ikon

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

Manzoor Samad
źródło
-5

Możesz zaimportować elementy-reagujące-natywne i używać niesamowitych czcionek ikon do swojej aplikacji-reagującej

zainstalować

npm install --save react-native-elements

następnie zaimportuj to, gdzie chcesz użyć ikon

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

Użyj tego jak

render() {
   return(
    <Icon
      reverse
      name='ios-american-football'
      type='ionicon'
      color='#517fa4'
    />
 );
}
uday
źródło
Jak możemy dodawać ikony dla Androida, ponieważ podajemy nazwę jako ios-american-football? czy możemy zastąpić ios przez Androida w tej składni?
ganeshdeshmukh
To nie dotyczy pierwotnego pytania.
SoluableNonagon
Wpis dotyczy ikony uruchamiania i nie ma nic wspólnego z elementami-reakcyjnymi-natywnymi. Biblioteka przeznaczona jest tylko dla ikon w aplikacji.
Niebiański