Настройки приложения: app.json, иконка и заставка

Файл app.json в корне проекта описывает приложение для системы и магазинов: как оно называется на рабочем столе, какая у него иконка, что показывается при запуске. Эти настройки применяются при сборке, а не во время работы кода.

Основные поля

Откройте app.json проекта блога и измените начало:

{
  "expo": {
    "name": "Блог",
    "slug": "blog",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "blog",
    "userInterfaceStyle": "automatic",
    "ios": {
      "bundleIdentifier": "com.example.blog"
    },
    "android": {
      "package": "com.example.blog"
    }
  }
}

Остальные поля шаблона оставьте как есть.

Поле	Что задаёт
`name`	Название под иконкой на телефоне
`slug`	Короткое имя проекта на серверах Expo
`version`	Версия, которую видят пользователи в магазине
`orientation`	`portrait` — только вертикально
`scheme`	Схема ссылок вида `blog://posts/1`
`userInterfaceStyle`	Поддержка светлой и тёмной темы
`ios.bundleIdentifier`, `android.package`	Уникальный идентификатор в App Store и Google Play

Идентификатор записывают как домен наоборот: com.example.blog. После первой публикации его менять нельзя.

Иконка

Иконка — квадратная картинка PNG размером 1024 на 1024 без прозрачности, путь к ней указан в поле icon. На Android дополнительно задают адаптивную иконку: передний план и фон, из которых система сама вырезает круг, квадрат или каплю:

{
  "expo": {
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#2563eb"
      }
    }
  }
}

Важную часть рисунка держите в центре — края могут быть обрезаны.

Заставка

Заставка (splash screen) — экран, который виден, пока приложение загружается. Она настраивается плагином expo-splash-screen в массиве plugins:

{
  "expo": {
    "plugins": [
      [
        "expo-splash-screen",
        {
          "image": "./assets/images/splash-icon.png",
          "imageWidth": 200,
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
      ]
    ]
  }
}

При запуске на белом фоне по центру появится картинка шириной 200 точек. Плагин уже есть в шаблоне — поменяйте в нём картинку и цвет.

Как проверить

Expo Go показывает свою иконку и свою заставку, поэтому изменения иконки, заставки, названия и разрешений видны только в собственной сборке приложения — о ней следующий урок. Поля, которые нужны коду, можно прочитать через пакет expo-constants: Constants.expoConfig?.version.

Частая ошибка

Менять в app.json иконку или текст разрешений и ждать изменений после сохранения файла. Fast Refresh обновляет только JavaScript-код, а app.json попадает в родную часть приложения при сборке. После изменения настроек соберите приложение заново.

Спасибо, что читаете!