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?

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.

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:

• Obraz podstawowy 1024 x 1024
• Brak przezroczystego tła dla iOS
• Ikona zgodna z wytycznymi dotyczącymi ikon adaptacyjnych dla Androida

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

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

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

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.

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.

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:

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.

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

• Ikona Make App (przydatna zarówno na Androidzie, jak i iOS)
• Narzędzia APE (przydatne zarówno dla Androida, jak i iOS)
• Kreator zestawów ikon (przydatny tylko dla iOS)
• Andoid Asset Studio (przydatne tylko dla Androida + zalecane *)

Jeśli korzystasz z expo, po prostu umieść plik png o wymiarach 1024 x 1024 i dodaj właściwość icon do pliku app.json, tj. „Icon”: „./src/assets/icon.png”

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

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

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