Я роблю додаток React Native. Я хотів би налаштувати піктограму програми (маючи на увазі піктограму, яку натискаєте, щоб запустити додаток). Я перекочував це, але постійно знаходжу різні типи значків, які стосуються різних речей. Як додати ці типи піктограм у додаток?

Піктограми iOS

• Встановити AppIconв Images.xcassets.
• Додайте 9 піктограм різного розміру:
  • 29pt
  • 29pt*2
  • 29pt*3
  • 40pt*2
  • 40pt*3
  • 57pt
  • 57pt*2
  • 60pt*2
  • 60pt*3.

Images.xcassets буде виглядати так:

Android Icons

• Покладіть ic_launcher.pngу папки [ProjectDirectory]/android/app/src/main/res/mipmap-*/.
  • 72 * 72 ic_launcher.pngдюйма mipmap-hdpi.
  • 48 * 48 ic_launcher.pngв mipmap-mdpi.
  • 96 * 96 ic_launcher.pngв mipmap-xhdpi.
  • 144 * 144 ic_launcher.pngв mipmap-xxhdpi.
  • 192 * 192 ic_launcher.pngв mipmap-xxxhdpi.

Оновіть Android на 2019 рік

Останні версії react native також підтримують круглу піктограму. У цьому конкретному випадку у вас є два варіанти:

A. Додайте круглі піктограми: У кожній папці mipmap додайте до ic_launcher.pngфайлу також круглу версію ic_launcher_round.pngз таким же розміром.

B. Видаліть круглі значки: всередині yourProjectFolder/android/app/src/main/AndroidManifest.xmlвидаліть рядок android:roundIcon="@mipmap/ic_launcher_round"і збережіть його.

Інше, що збірка видає помилку.

Я написав генератор, щоб автоматично генерувати піктограми для вашого реактивного додатка з одного файлу значків. Це генерує ваші активи, а також правильно додає їх у ваш проект ios та android:

Оновлення (09.09.2019)

Ми оновили наш генератор, щоб він відповідав стандартам екосистеми. Тепер ви можете використовувати @ bam.tech / react-native-make .

Ви можете встановити його, використовуючи: yarn add @bam.tech/react-native-makeу реальному проекті

Щоб його використовувати react-native set-icon --path <path_to_png> --background <icon_background_color> --platform <android|ios>

І це все! Сподіваюся, це може бути корисним для інших :)

Рекомендації:

• 1024x1024 базове зображення
• Немає прозорого фону для iOS
• Піктограма, яка дотримується інструкцій щодо адаптивних іконок для Android

Ось деякі вдосконалення щодо попереднього інструменту: 🥳

• Ніякої залежності від Yeoman, тепер це плагін реакцій-нативної реакції
• Ніяка залежність від магії
• Створює адаптивні іконки для Android
• Додає відсутні розміри піктограм для iOS

Я б користувався сервісом, щоб правильно масштабувати піктограму. http://makeappicon.com/ здається непоганим. Використовувати зображення більшого розміру, оскільки масштабування меншого зображення може призвести до того, що великі піктограми будуть пікселізовані. Цей сайт надасть вам розміри як для iOS, так і для Android.

Звідси це лише питання про встановлення піктограми, як у звичайному рідному додатку.

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

Встановити значок для програми Android

Мені вдалося додати піктограму додатка до мого Android-проекту на основі реагування, дотримуючись порад цього хлопця та використовуючи Android Asset Studio

Ось він, записаний на випадок, якщо посилання загине:

Як завантажити піктограму програми в React-Native Android

1) Завантажте своє зображення в Android Asset Studio . Виберіть будь-які ефекти, які ви хочете застосувати. Інструмент генерує zip-файл для вас. Клацніть Завантажити. Zip.

2) Розпакуйте файл на вашій машині. Потім перетягніть потрібні зображення у свою /android/app/src/main/res/папку. Обов’язково розмістіть кожне зображення у правій папціmipmap-{hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi}.

3) Не (як я спочатку робив) наївно перетягувати всю папку через свою папку res. Оскільки ви можете видаляти свої /res/values/{strings,styles}.xmlфайли взагалі.

Хтось зробив дуже простий у використанні інструмент саме для цього завдання: https://www.npmjs.com/package/app-icon

Цей простий інструмент дозволяє створити одну піктограму у своєму реальному проекті, а потім створити з неї піктограми всіх необхідних розмірів. В даний час він працює для iOS та Android.

Я ним користувався. Зробив 512x512 png, а потім запустив цей інструмент і стрілу. Супер легко.

Тут запізнюється трохи пізніше, але Android Studio має дуже зручний майстер значків активів. Це само собою пояснює, але має кілька зручних ефектів і вбудований прямо:

Вам знадобляться значки різного розміру для iOS та Android, як сказав Rockvic. Крім того, я рекомендую цей сайт для створення значків різного розміру, якщо когось цікавить. Вам не потрібно нічого завантажувати, і це працює чудово.

https://resizeappicon.com/

Сподіваюся, це допомагає.

Це корисно для людей, які намагаються знайти кращий сайт для створення значків та бризки екрана

• Зробити піктограму додатка (корисно для android та ios)
• Інструменти APE (корисні для android та ios)
• Творець набору іконок (корисно лише для ios)
• Andoid Asset Studio (корисно лише для android + рекомендується *)

Якщо ви використовуєте expo, просто розмістіть у своєму проекті файл 1024 x 1024 png та додайте до програми app.json властивість значка, тобто "icon": "./src/assets/icon.png"

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

Я хотів би запропонувати використовувати для імпорту піктограм у ваш проект іконки react-native-vector-vector. Використовуючи векторні іконки, вам не потрібно сильно турбуватися про масштабування іконок. Під час використання пакету ви можете використовувати всі популярні набори іконок, такі як джерело, іонікони тощо.

Окрім цих наборів іконок, ви також можете піднести власні значки до власного проекту, що запам'ятовується, упакувавши ваші значки у вигляді файлу ttf, і ви можете імпортувати цей ttf безпосередньо в проект Android та ios. Ви можете використовувати ту саму бібліотеку react-native-vector-icons для управління цими значками

Ось детальна процедура налаштування користувацьких піктограм

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

Ви можете імпортувати реактивні натив-елементи та використовувати чудові шрифтові піктограми для свого реактивного додатка

Встановити

npm install --save react-native-elements

потім імпортуйте те, де ви хочете використовувати піктограми

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

Використовуйте це як

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