Я делаю приложение 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

• Положите 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.

Обновление 2019 Android

Последние версии реагируют на родной язык и поддерживают круглую иконку. Для этого конкретного случая у вас есть два варианта:

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

Б. Удалите круглые значки: внутри yourProjectFolder/android/app/src/main/AndroidManifest.xmlудалите строку android:roundIcon="@mipmap/ic_launcher_round"и сохраните ее.

В противном случае сборка выдает ошибку.

Я написал генератор для автоматической генерации иконок для вашего собственного собственного приложения из одного файла иконок. Он генерирует ваши активы и правильно добавляет их в ваш проект ios и android:

Обновление (09/09/2019)

Мы обновили наш генератор, чтобы соответствовать современным стандартам экосистемы. Теперь вы можете использовать @ bam.tech / Reaction-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

Вот некоторые улучшения по сравнению с предыдущим инструментом: 🥳

• Никакой йоменской зависимости, теперь это плагин реагировать-родной-кли
• Нет зависимости от изображения магии
• Создает адаптивные иконки для 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, просто поместите файл png размером 1024 x 1024 в ваш проект и добавьте свойство icon в ваш app.json, то есть "icon": "./src/assets/icon.png"

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

Я хотел бы предложить использовать реактивные-векторные-иконки для импорта иконок в ваш проект. Поскольку вы используете векторные иконки, вам не нужно сильно беспокоиться о масштабировании значков. При использовании пакета вы можете использовать все популярные наборы иконок, такие как fontawesome, ionicons и т. Д.

Помимо этих наборов значков, вы также можете добавить свои собственные значки в свой реактивный проект, упаковав свои значки в файл ttf, и вы можете импортировать этот ttf напрямую в проекты android и ios. Вы можете использовать одну и ту же библиотеку реагировать на родные значки для управления этими значками

Вот подробная процедура для настройки пользовательских значков

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

Вы можете импортировать реагирующие нативные элементы и использовать иконки font-awesome для своего собственного реактивного приложения.

устанавливать

npm install --save react-native-elements

затем импортируйте то, где вы хотите использовать значки

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

Используйте это как

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