Иконка приложения в React Native (Expo)

Иконка приложения в React Native (Expo)

Дошел в создании своего приложения к тому, что нужно было добавить свою иконку к приложению. Решил пока создавать только android версию, т.к. предварительно мне кажется, что опубликовать приложение для iOS будет дороже. Очень был рад, что React Native (в частности Expo) позволяет это выполнить без особых проблем.

Начнем с того, что вам стоило бы найти картинку, которую вы захотите использовать как иконку своего приложения на React Native (Expo). Благо всяких сервисов с бесплатными картинками — тонны. Только стоит учесть, что для иконки приложения стоит использовать картинку не меньше 1024х1024 пикселей, а для первого икрана можно и 2048х2048. Так же, ваша картинка должна быть .png, чтобы поддерживать прозрачность.

Далее у нас есть несколько вариантов. Мы можем задать картинку с максимальным разрешением и доверить Expo самостоятельно масштабировать эту картинку в соответствии с экраном. Или же мы можем самостоятельно создать набор картинок, которые будут выбираться соответсвенно разрешению текущего телефона.

Если вы захотите создать свой набор иконок под главные варианты экранов, то можно воспользоваться беслатным сервисом Android Asset Studio. После редактирования мы сможете скачать zip архив, в котором будут папки с нужными данными. На сайте Expo можно найти руководства к тому, куда лучше всего положить эти файлы — но у меня не особо вышло 🙂

Поэтому, рассказываю как можно сделать иконку для приложения и это сработает.

  • Мы создаем 1 png картинку, которую хотим использовать как иконку.
  • Ложим ее в ‘assets’ папку нашего проекта.
  • Затем идем в файл app.json и { «expo»: { «icon»: «./assets/icon.png», … указываем имя нашей картинки

С помощью таких не сложных манипуляций мы получаем иконку для приложения — она будет отображаться на рабочем столе, а так же в списке запущенных приложения.

Еще одним место для кастомизации является начальный экран вашего приложения (LaunchScreen), и эта штука так же легко настраивается в React Native (Expo).

Опять же, при создании Launch Screen в React Native у вас есть 2 пути — создать картинки под самые популярные разрешения или довериться Expo и вставить только одну картинку.

Я сначала тоже попробовал сделать картинку под каждое разрешение — и как с иконкой приложения у меня не вышло. Но вот с настройкой Expo и одной картинкой — все зараборало.

Итак, чтобы создать Launch Screen (первый экран после запуска) в вашем React Native (Expo) приложении, нужно:

  • создать иконку, которая вас интересует (можно и ту же, что вы использовали в качестве иконки приложения)
  • зайти в app.json
  • и добавить что-то вида
    «splash»: { «image»: «./assets/icon.png», «resizeMode»: «contain», «backgroundColor»: «#E5EFFF» },

Т.е. от вас требуется указать адрес картинки, в каком режиме отображать эту картинку относительно экрана смартфона и какого цвета должен быть фон.

Вот как-то так 🙂 Не забывайте ознакомиться с другими статьями блога — шпаргалка\введение в react native и первый косяки, которые я нашел в expo/react native.