Splash Screen и иконки рабочего стола

Splash Screen — входная дверь в приложение. Пока данные не загрузились, мы имеем счастье наблюдать красивую заставку. И сегодня будем её создавать. Заодно добавим значок приложения на рабочий стол. В основном трудности вызывает позиционирование изображения по центру для всех типов устройств, так что займёмся именно этим.

iOS

В Xcode зайти в Имя_проекта -> Images.xassets -> AppIcon. Сгенерировать иконки указанных там размеров и перетащить какждую на своё место. Теперь соответствующая размеру устройства иконка будет отображаться на его рабочем столе. После пересборки проекта, конечно.

Создать новый сет: правый клик на AppIcon, пункт New image set. Назвать его можно AppLaunch — это картинки для нашего экрана загрузки.

Аналогичным образом генерируем и перетаскиваем картинки.

Убеждаемся, что в настройках выбран файл с именем, соответствующем имени сета.

Дальше нам понадобится LaunchScreen.xib (или LaunchScreen.storyboard). Для добавления элементов можно использовать сочетание клавиш shift + cmd + l или добавлять элементы через пункт меню.

Отобразится окно с элементами. Следующий шаг — выбрать элемент изображения.

В инспекторе задать атрибуты, а именно: выбрать нужное изображение и установить Content Mode со значением Aspect Fit. Несколькими шагами выше оно было добавлено в сет с названием AppLaunch. Выбранную картинку следует перетащить на нужный участок холста: примерно по центру.

Если сейчас посмотреть превью устройства, вряд ли позиционирование картинки окажется идеальным. Если думаете, то всё в порядке, измените выбранный девайс на другой. Например, вместо iPhone 11, можно посмотреть iPhone 5 или iPad. На что нажать, чтобы увидеть превью, показано на скриншоте ниже.

Изменить тип устройства тоже не составит труда.

Переходим на вкладку size inspector и выставляем чекбокс Safe Area Relative Margins + кликами мыши добавляем либо убираем стрелки у Autoresizing, чтобы получилось как на скриншоте.

На этом всё. Можно протестировать центрирование картинки в превью или пересобрать проект и запустить на реальном устройстве.

Android

Сгенерировать иконки для Android (launcher icon) поможет Android Studio либо AndroidAssetStudio. Полученными картинками нужно заменить файлы по пути android/app/src/main/res. Названия аналогичны сгенерированным: mipmap-hdpi/ic_launcher.png, mipmap-mdpi/ic_launcher.png и прочая-прочая. Таким образом первая задача выполнена – иконкам на рабочем столе быть!

Переходим к splash screen. Структура должна быть следующей (если каких-то файлов нет — создать):

android/app/src/main
├── AndroidManifest.xml
├── assets
├── java
└── res
    ├── drawable
    │   └── splash_screen.xml
    └── values
        ├── colors.xml
        └── styles.xml

Разбираемся с файлами.

Нам понадобится цветовая палитра:

<!-- android/app/src/main/res/values/colors.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="gray">#F2F2F2</color>
  <color name="red">#FA5B60</color>
</resources>

Описание заставки (цвет фона, картинка по центру):

<!-- android/app/src/main/res/drawable/splash_screen.xml -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@color/gray"/>
  <item>
    <bitmap android:src="@mipmap/splash_logo" android:gravity="center" />
  </item>
</layer-list>

Файл стилей:

<!-- android/app/src/main/res/values/styles.xml -->
<resources>
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textColor">#000000</item>
  </style>

  <style name="SplashTheme" parent="AppTheme">
    <item name="android:windowBackground">@drawable/splash_screen</item>
  </style>
</resources>

Манифест, здесь задаётся тема @style/SplashTheme и меняются имена иконок, если они отличаются от «умолчательных» ic_launcher, ic_launcher_round:

<!-- android/app/src/main/AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.bookshelf">
  <uses-permission android:name="android.permission.INTERNET" />

  <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:theme="@style/AppTheme">

    <activity android:name=".MainActivity" android:theme="@style/SplashTheme">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>

    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
  </application>

</manifest>

И самое главное: всегда задавать цвет фона страниц для android. Заставка никуда не денется, не смотря на то, что приложение уже загрузилось. Её можно лишь перекрыть.

import React from 'react'
import { SafeAreaView, ScrollView, StyleSheet, View, Text } from 'react-native'

const App = () => {
  return (
    <SafeAreaView>
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        contentContainerStyle={styles.scrollView}>
        <View>
          <Text>First Screen</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: 'white',
    flexGrow: 1,
    minHeight: '100%',
  },
})

export default App