React Native uygulaması yapıyorum. Uygulama simgesini özelleştirmek istiyorum (uygulamayı başlatmak için tıkladığınız simge). Bunu Google'da aradım, ancak farklı şeyleri ifade eden farklı simge türleri bulmaya devam ediyorum. Bu tür simgeleri uygulamaya nasıl eklerim?

iOS Simgeleri

• Set AppIconiçinde Images.xcassets.
• 9 farklı boyut simgesi ekleyin:
  • 29pt
  • 29pt*2
  • 29pt*3
  • 40pt*2
  • 40pt*3
  • 57pt
  • 57pt*2
  • 60pt*2
  • 60pt*3.

Images.xcassets şöyle görünecek:

Android Simgeleri

• ic_launcher.pngKlasörleri koyun [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
  • 72 * 72 ic_launcher.pngyılında mipmap-hdpi.
  • 48 * 48 ic_launcher.pngyılında mipmap-mdpi.
  • 96 * 96 ic_launcher.pngyılında mipmap-xhdpi.
  • 144 * 144 ic_launcher.pngyılında mipmap-xxhdpi.
  • 192 * 192 ic_launcher.pngyılında mipmap-xxxhdpi.

2019 Android'i Güncelle

Tepki yerel son sürümleri de yuvarlak simge destekler. Bu özel durum için iki seçeneğiniz vardır:

A. Yuvarlak simgeler ekleyin: Her mipmap klasörüne, ic_launcher.pngdosyaya ek olarak ic_launcher_round.pngaynı boyutta adlandırılan yuvarlak bir sürüm ekleyin .

B. Yuvarlak simgeleriyourProjectFolder/android/app/src/main/AndroidManifest.xml kaldırın : İçeride çizgiyi kaldırın android:roundIcon="@mipmap/ic_launcher_round"ve kaydedin.

Aksi takdirde yapı bir hata atar.

Tepki yerel uygulamanız için otomatik olarak tek bir simge dosyasından simgeler oluşturmak için bir jeneratör yazdım . Varlıklarınızı oluşturur ve bunları ios ve android projenize doğru bir şekilde ekler:

Güncelleme (04/09/2019)

Jeneratörümüzü ekosistem standartlarına uygun olarak yeniledik. Artık @ bam.tech / tepki-native-make kullanabilirsiniz .

Sen edebilirsiniz kurun kullanarak: yarn add @bam.tech/react-native-makeProjeyi yerli tepki de

Kullanmak için react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>

Ve bu kadar! Umarım diğerleri için faydalı olabilir :)

öneriler:

• 1024x1024 ana resim
• İOS için şeffaf arka plan yok
• Android için uyarlanabilir simgeler yönergelerini izleyen bir simge

Önceki araçla ilgili bazı iyileştirmeler şunlardır : 🥳

• Yeoman bağımlılığı yok, şimdi bir tepki-yerli-cli eklentisi
• Image Magick bağımlılığı yok
• Android için Uyarlanabilir simgeler oluşturur
• İOS için eksik simge boyutları ekler

Simgeyi doğru şekilde ölçeklemek için bir hizmet kullanırdım. http://makeappicon.com/ iyi görünüyor. Daha küçük bir görüntüyü büyütmek, daha büyük simgelerin pikselleştirilmesine neden olabileceğinden, daha büyük boyutta bir görüntü kullanın. Bu site size hem iOS hem de Android için boyutlar verecek.

Oradan sadece normal bir yerel uygulama gibi simge ayarlama meselesi.

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

Android uygulaması için simge ayarla

Bu adamın tavsiyelerini izleyerek ve Android Asset Studio'yu kullanarak tepkime-yerel android projeme bir uygulama simgesi ekleyebildim

İşte, bağlantının ölmesi durumunda kopyalanır:

React-Native Android'de bir Uygulama Simgesi nasıl yüklenir

1) Görüntünüzü Android Asset Studio'ya yükleyin . Uygulamak istediğiniz efektleri seçin. Araç sizin için bir zip dosyası oluşturur. İndir .Zip'i tıklayın.

2) Makinenizdeki dosyayı açın. Ardından istediğiniz görüntüleri /android/app/src/main/res/klasörünüze sürükleyin . Her görüntüyü sağ alt klasöre yerleştirdiğinizden emin olunmipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

3) (Başlangıçta yaptığım gibi) tüm klasörü res klasörünüzün üzerine sürükleyip bırakmayın. Çünkü /res/values/{strings,styles}.xmldosyalarınızı tamamen kaldırıyor olabilirsiniz .

Birisi sadece bu görev için kullanımı çok kolay bir araç yaptı: https://www.npmjs.com/package/app-icon

Bu basit araç, yerel yanıt projenizde tek bir simge oluşturmanıza ve ardından gerekli tüm boyutlarda simgeler oluşturmanıza olanak tanır. Şu anda iOS ve Android için çalışıyor.

Ben kullandım. İndir (512x512) Süper kolay.

Biraz geç geliyor ama Android Studio çok kullanışlı bir simge varlık sihirbazına sahip. Çok açıklayıcıdır, ancak birkaç kullanışlı etkisi vardır ve yerleşiktir:

Rockvic'in dediği gibi iOS ve Android için farklı boyutta simgelere ihtiyacınız olacak. Ayrıca, ilgilenen varsa farklı boyutta simgeler oluşturmak için bu siteyi tavsiye ederim. Hiçbir şey indirmenize gerek yoktur ve mükemmel çalışır.

https://resizeappicon.com/

Umarım yardımcı olur.

Bu, simgeler ve açılış ekranı oluşturmak için daha iyi bir site bulmakta zorlanan insanlar için yararlıdır

• Uygulama Simgesini Yap (hem android hem de ios için yararlıdır)
• APE araçları (hem android hem de ios için yararlıdır)
• Simge seti oluşturucu (yalnızca iOS için yararlıdır)
• Andoid Asset Studio (yalnızca android için yararlıdır + önerilir *)

Expo kullanıyorsanız projenize 1024 x 1024 png dosyası yerleştirin ve uygulamanıza bir simge özelliği ekleyin. Yani "icon": "./src/assets/icon.png"

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

Simgeleri projenize aktarmak için tepki-yerel-vektör-simgelerini kullanmanızı öneririm. Vektör simgeleri kullandıkça, simge ölçeklendirme tarafında fazla endişelenmenize gerek yoktur. Paketi kullanırken fontawesome, ionicons vb. Tüm popüler simge setlerini kullanabilirsiniz.

Bu simge setlerinin yanı sıra, simgelerinizi bir ttf dosyası olarak paketleyerek kendi simgelerinizi de tepki yerel projenize getirebilir ve bu ttf'yi hem android hem de ios projesine doğrudan aktarabilirsiniz. Bu simgeleri yönetmek için aynı tepki-yerel-vektör-simgeler kütüphanesini kullanabilirsiniz

Özel simgeleri ayarlamak için ayrıntılı bir prosedür

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

Reaksiyon yerel öğelerini içe aktarabilir ve yerel tepki uygulamanız için harika yazı tipi simgelerini kullanabilirsiniz

Yüklemek

npm install --save react-native-elements

ardından simgeleri kullanmak istediğiniz yere aktarın

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

Gibi kullanın

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