Ответ 1

Иконки для 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.

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

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

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

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

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

Ответ 2

Я написал генератор для автоматического создания значков для вашего собственного собственного приложения из одного значка. Он генерирует ваши активы и правильно добавляет их в ваш проект для 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

Ответ 3

Я бы использовал сервис для правильного масштабирования иконки. http://makeappicon.com/ кажется хорошим. Используйте изображение большего размера, так как увеличение меньшего изображения может привести к пикселизации больших значков. Этот сайт даст вам размеры для iOS и Android.

Оттуда это просто вопрос установки значка, как если бы вы были обычным приложением.

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

Установить значок для приложения Android

Ответ 4

Я смог добавить значок приложения в свой андроид-проект с реакцией, выполнив этот совет парня и используя Android Asset Studio

Здесь он транскрибируется в случае, если ссылка не работает:

Как загрузить иконку приложения в Android-сообществе React-Native

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.

Ответ 5

Кто-то сделал очень простой в использовании инструмент только для этой задачи: https://www.npmjs.com/package/app-icon

Этот простой инструмент позволяет вам создать один значок в вашем реактивном проекте, а затем создать из него иконки всех необходимых размеров. В настоящее время он работает для iOS и Android.

Я использовал это. Сделал 512x512 png, а затем запустил этот инструмент и бум, готово. Супер просто.

Ответ 6

Здесь мы немного опаздываем, но в Android Studio есть очень удобный мастер иконок. Он очень понятен, но имеет несколько полезных эффектов и встроен прямо в:

Ответ 7

Вам понадобятся значки разных размеров для iOS и Android, например Rockvic. Кроме того, я рекомендую этот сайт для создания значков разных размеров, если кому-то это интересно. Вам не нужно ничего скачивать, и он отлично работает.

https://resizeappicon.com/

Надеюсь, что это поможет.

Ответ 8

Это полезно для людей, которые пытаются найти лучший сайт для создания иконок и заставки

• Сделать значок приложения (полезно как для Android, так и для iOS)
• Инструменты APE (полезно как для Android, так и для iOS)
• Создатель набора иконок (полезно только для ios)
• Andoid Asset Studio(полезно только для Android + рекомендуется *)

Ответ 9

Если вы используете expo, просто поместите 1024 x 1024 png файл в свой проект и добавьте свойство icon в ваш app.json, т.е. "icon": "./src/assets/icon.png"

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

Ответ 10

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

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

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

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

Ответ 11

Вы можете импортировать реагирующие нативные элементы и использовать иконки 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'
    />
 );
}