Saya membuat aplikasi Bereaksi Asli. Saya ingin menyesuaikan ikon aplikasi (artinya ikon yang Anda klik untuk memulai aplikasi). Saya sudah mencari Google ini, tetapi saya terus menemukan berbagai jenis ikon yang merujuk pada berbagai hal. Bagaimana cara menambahkan ikon jenis ini ke aplikasi?

Ikon iOS

• Set AppIconin Images.xcassets.
• Tambahkan 9 ikon ukuran yang berbeda:
  • 29pt
  • 29pt*2
  • 29pt*3
  • 40pt*2
  • 40pt*3
  • 57pt
  • 57pt*2
  • 60pt*2
  • 60pt*3.

Images.xcassets akan terlihat seperti ini:

Ikon Android

• Masukkan ke ic_launcher.pngdalam folder [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
  • 72 * 72 ic_launcher.pngin mipmap-hdpi.
  • 48 * 48 ic_launcher.pngin mipmap-mdpi.
  • 96 * 96 ic_launcher.pngin mipmap-xhdpi.
  • 144 * 144 ic_launcher.pngdalam mipmap-xxhdpi.
  • 192 * 192 ic_launcher.pngin mipmap-xxxhdpi.

Perbarui 2019 Android

Versi terbaru dari reaksi asli juga mendukung ikon bulat. Untuk kasus khusus ini, Anda memiliki dua pilihan:

A. Tambahkan ikon bulat: Di setiap folder mipmap, tambahkan tambahan ke ic_launcher.pngfile juga versi bulat yang disebut ic_launcher_round.pngdengan ukuran yang sama.

B. Hapus ikon bulat: Di dalamnya yourProjectFolder/android/app/src/main/AndroidManifest.xmlhapus garis android:roundIcon="@mipmap/ic_launcher_round"dan simpan.

Selain itu, build tersebut membuat kesalahan.

Saya menulis generator untuk secara otomatis menghasilkan ikon untuk aplikasi asli reaksi Anda dari satu file ikon. Ini menghasilkan aset Anda dan juga menambahkannya dengan benar ke proyek iOS dan Android Anda:

Pembaruan (04/09/2019)

Kami mengubah generator kami agar selalu mutakhir dengan standar ekosistem. Anda sekarang dapat menggunakan @ bam.tech / react-native-make .

Anda dapat menginstalnya menggunakan: yarn add @bam.tech/react-native-makedi proyek reaksi-asli

Untuk menggunakannya react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>

Dan ... itu dia! Semoga bermanfaat buat orang lain :)

Rekomendasi:

• Gambar dasar 1024x1024
• Tidak ada latar belakang transparan untuk iOS
• Ikon yang mengikuti pedoman ikon adaptif untuk Android

Berikut ini beberapa peningkatan dari alat sebelumnya: 🥳

• Tidak bergantung pada Yeoman, itu sekarang merupakan plugin react-native-cli
• Tidak ada ketergantungan Gambar Magick
• Membuat ikon Adaptif untuk Android
• Menambahkan ukuran ikon yang hilang untuk iOS

Saya akan menggunakan layanan untuk mengukur ikon dengan benar. http://makeappicon.com/ sepertinya bagus. Gunakan gambar pada ukuran yang lebih besar karena memperbesar gambar yang lebih kecil dapat menyebabkan ikon yang lebih besar menjadi pixelated. Situs itu akan memberi Anda ukuran untuk iOS dan Android.

Dari sana hanya masalah pengaturan ikon seperti yang Anda lakukan pada aplikasi asli biasa.

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

Tetapkan ikon untuk aplikasi Android

Saya dapat menambahkan ikon aplikasi ke proyek Android asli saya dengan mengikuti saran orang ini dan menggunakan Android Asset Studio

Ini dia, ditranskripsi kalau-kalau tautannya mati:

Cara mengunggah Ikon Aplikasi di React-Native Android

1) Unggah gambar Anda ke Android Asset Studio . Pilih efek apa pun yang ingin Anda terapkan. Alat ini menghasilkan file zip untuk Anda. Klik Unduh .Zip.

2) Buka ritsleting file pada mesin Anda. Kemudian seret gambar yang Anda inginkan ke /android/app/src/main/res/folder Anda . Pastikan untuk menempatkan setiap gambar dalam subfolder yang tepatmipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

3) Jangan (seperti yang saya lakukan sebelumnya) secara naif drag and drop seluruh folder ke folder res Anda. Karena Anda mungkin menghapus /res/values/{strings,styles}.xmlfile Anda sama sekali.

Seseorang membuat alat yang sangat mudah digunakan hanya untuk tugas ini: https://www.npmjs.com/package/app-icon

Alat sederhana ini memungkinkan Anda untuk membuat ikon tunggal di proyek asli-reaksi Anda, lalu membuat ikon dari semua ukuran yang diperlukan dari itu. Saat ini berfungsi untuk iOS dan Android.

Saya sudah menggunakannya. Membuat png 512x512 dan kemudian menjalankan alat dan boom itu, selesai. Sangat mudah.

Datang agak terlambat di sini tapi Android Studio memiliki ikon aset wizard yang sangat berguna. Sangat jelas tetapi memiliki beberapa efek praktis dan tepat dibangun di:

Anda akan membutuhkan ikon dengan ukuran berbeda untuk iOS dan Android, seperti kata Rockvic. Selain itu, saya merekomendasikan situs ini untuk menghasilkan ikon ukuran yang berbeda jika ada yang tertarik. Anda tidak perlu mengunduh apa pun dan itu berfungsi dengan baik.

https://resizeappicon.com/

Semoga ini bisa membantu.

Ini bermanfaat bagi orang-orang yang berjuang untuk menemukan situs yang lebih baik untuk menghasilkan ikon dan splashscreen

• Jadikan Ikon Aplikasi (berguna untuk Android dan iOS)
• Alat APE (berguna untuk Android dan iOS)
• Pembuat set ikon (hanya berguna untuk ios)
• Andoid Asset Studio (hanya berguna untuk Android + disarankan *)

Jika Anda menggunakan expo cukup tempatkan file 1024 x 1024 png di proyek Anda dan tambahkan properti ikon ke app.json Anda yaitu "ikon": "./src/assets/icon.png"

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

Saya ingin menyarankan untuk menggunakan react-native-vector-icons untuk mengimpor ikon ke proyek Anda. Saat Anda menggunakan ikon vektor, Anda tidak perlu terlalu khawatir pada sisi penskalaan ikon. Saat menggunakan paket Anda dapat menggunakan semua set ikon populer seperti fontawesome, ionicons dll.

Selain ikon ini, Anda juga dapat membawa ikon Anda sendiri ke proyek asli-reaksi Anda dengan mengemas ikon Anda sebagai file ttf dan Anda dapat mengimpor ttf itu langsung ke proyek android dan ios. Anda dapat menggunakan pustaka reaksi-asli-vektor-ikon yang sama untuk mengelola ikon tersebut

Berikut adalah prosedur terperinci untuk mengatur ikon khusus

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

Anda dapat mengimpor elemen-elemen reaksi asli dan menggunakan ikon font-mengagumkan untuk aplikasi asli reaksi Anda

Install

npm install --save react-native-elements

kemudian impor tempat Anda ingin menggunakan ikon

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

Gunakan seperti

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