it-swarm.com.ru

Как добавить значки в React Собственное приложение

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

218
Adam Katz

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.
358
Rockvic

Я написал генератор для автоматической генерации значков для вашего собственного нативного приложения из одного файла значков: https://blog.bam.tech/developper-news/how-to-generate-your-react-native-app-icons -в-в-единственной командной строке .

Он генерирует ваши активы и правильно добавляет их в ваш проект ios и Android.

Установить его

Вам нужно установить node 6 и image-magick.

Затем установите генератор с

npm install -g yo generator-rn-toolbox

Используй это

Имейте один файл значка наготове где-нибудь. Значок должен быть размером 1024х1024.

Затем в своем проекте React Native выполните:

yo rn-toolbox:assets --icon <path to your icon>
# For instance
yo rn-toolbox:assets --icon ../icon.png

Вам будет задан вопрос о названии вашего реактивного проекта. Например, если вы создали свой проект с react-native init MyAwesomeProject, имя вашего проекта будет MyAwesomeProject.

Когда вас спросят, ? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json?, ответьте Y.

И это все!

Надеюсь, что это может быть полезно для других :)

240
Almouro

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

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

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

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

27
rmevans9

Мне удалось добавить значок приложения в свой проект 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}.

 Android/app/src/main/res

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

20
mixophrygian

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

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

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

9
jcollum

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

https://resizeappicon.com/

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

5
jakobinn

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

 enter image description here

4
Ryan Knell

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

1
ishab acharya

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

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

0
Ramon Schmitt

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

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

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

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

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

0
Manzoor Samad