Как создать экран-заставку в React Native (с примерами кода)

Первое впечатление в мобильных приложениях имеет решающее значение. Когда пользователь запускает ваше приложение React Native, экран-заставка — это первое, что он видит. Экран-заставка отображает логотип или фирменный стиль вашего приложения во время его инициализации, придавая приложению более отполированный вид, избегая пустого экрана и убеждая пользователей, что приложение загружается.

Что такое экран-заставка в React Native?

Экран-заставка — это начальный экран, который появляется при запуске вашего приложения. В React Native экран-заставка обычно показывает название вашего приложения, логотип или другие элементы бренда на простом фоне. Он остается видимым, пока нативный код загружается и подготавливает приложение React Native. Основные цели экрана-заставки:

• Брендинг: Делает бренд вашего приложения сразу видимым
• Пользовательский опыт: Предотвращает появление пустого или неотзывчивого экрана во время запуска приложения
• Восприятие скорости: Экран-заставка создает впечатление, что что-то происходит, делая время загрузки субъективно короче

Почему стоит использовать экран-заставку в React Native для iOS?

Все мобильные приложения могут выиграть от экранов-заставок, но на iOS они особенно важны. Фактически, Apple требует, чтобы приложения имели экран запуска – на iOS экран-заставка не просто для показа; это часть ожидаемого пользовательского опыта. Вот ключевые причины:

• Улучшенный пользовательский опыт: Приложения iOS, запускающиеся с хорошо оформленным экраном-заставкой, выглядят более плавными и профессиональными
• Брендинг приложения: Экран-заставка демонстрирует логотип, слоган или графику вашего приложения
• Управление временем загрузки: iOS будет отображать экран запуска до тех пор, пока приложение не будет готово, маскируя любые задержки при запуске

Настройка экрана-заставки в React Native (специфично для iOS)

Шаг 1: Создание изображения для экрана-заставки

Сначала вам нужно изображение для экрана-заставки:

• Размер: Используйте изображение высокого разрешения (не менее 2000 x 2000 пикселей), которое хорошо выглядит на всех экранах устройств
• Формат: PNG — наиболее часто используемый формат для экранов-заставок
• Ориентация и безопасная зона: Держите важный контент ближе к центру изображения

Совет профессионала: Инструменты вроде App Icon Generator (appicon.co) могут помочь создать изображения правильных размеров для различных экранов iOS.

Шаг 2: Добавление экрана-заставки в Xcode

1. Откройте проект iOS в Xcode: Перейдите в папку ios и откройте файл .xcworkspace или .xcodeproj.
2. Добавьте ресурсы изображений: В Xcode найдите Images.xcassets, создайте New Image Set с названием ""Splash"" и добавьте ваше изображение заставки.
3. Отредактируйте раскадровку экрана запуска: Откройте LaunchScreen.storyboard, удалите любые элементы по умолчанию и добавьте Image View. Установите изображение на вашу заставку, измените размер или ограничьте его и установите режим содержимого (Aspect Fit или Aspect Fill).
4. Установите безопасную зону (при необходимости): При необходимости отключите ""Use Safe Area"", чтобы изображение могло распространяться под области строки состояния/выреза.

Шаг 3: Изменение Info.plist для правильных настроек отображения

1. Откройте Info.plist и найдите ключ ""UILaunchStoryboardName"".
2. Убедитесь, что его значение — это название вашей раскадровки (например, ""LaunchScreen"").
3. Проверьте, что файл LaunchScreen включен в целевой объект приложения.

Теперь запустите ваше приложение на симуляторе iOS или устройстве, чтобы увидеть, как ваш экран-заставка ненадолго появляется при запуске.

Использование библиотеки для экрана-заставки

Использование библиотеки может упростить процесс и обеспечить дополнительный контроль. Две популярные библиотеки:

• react-native-splash-screen — Широко используется как для iOS, так и для Android
• expo-splash-screen — Для управляемого рабочего процесса Expo

Давайте использовать react-native-splash-screen:

1. Установите библиотеку:

   npm install react-native-splash-screen --save
   

   или

   yarn add react-native-splash-screen
   

2. iOS: Установите поды:

   cd ios
   pod install
   cd ..
   

3. Настройте нативный код iOS:

   • Измените AppDelegate.m:

     #import ""RNSplashScreen.h""  // добавьте этот импорт
     

     В методе application:didFinishLaunchingWithOptions: добавьте:

     - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
         // ... существующий код инициализации React Native ...
         [self.window makeKeyAndVisible];
         [RNSplashScreen show];  // показать экран-заставку
         return YES;
     }
     

   • Проверьте Info.plist: Убедитесь, что UILaunchStoryboardName по-прежнему установлен на вашу раскадровку LaunchScreen.

4. Настройте нативный код Android (при необходимости):

   • Импортируйте SplashScreen в MainActivity
   • Вызовите SplashScreen.show(this) перед super.onCreate
   • Добавьте макет launch_screen.xml
   • Обновите AndroidManifest

5. Скройте экран-заставку в вашем коде React Native:

   // App.js (или index.js)
   import React, { useEffect } from 'react';
   import { View, Text } from 'react-native';
   import SplashScreen from 'react-native-splash-screen';  // импортируйте библиотеку
   
   const App = () => {
     useEffect(() => {
       // Скрыть экран-заставку, когда приложение готово
       SplashScreen.hide();
     }, []);
   
     return (
       <View>{/* Здесь начинаются компоненты UI вашего приложения */}
         <Text>Привет, основное приложение!</Text>
       </View>
     );
   };
   
   export default App;
   

Управление временем отображения и переходами экрана-заставки

• Держите его коротким: Экран-заставка должен быть виден только столько, сколько необходимо (в идеале 1-3 секунды)
• Скрывайте, когда готово: Вызывайте SplashScreen.hide(), как только основной контент вашего приложения готов к отображению
• Согласуйте переход: Используйте тот же цвет фона на начальном экране вашего приложения, что и на экране-заставке
• Плавные анимации: Рассмотрите возможность добавления тонкой анимации при скрытии экрана-заставки
• Постоянная продолжительность: Некоторые приложения показывают заставку минимальное время (например, 2 секунды), даже если приложение загружается быстрее

Распространенные проблемы и советы по отладке

• Экран-заставка не отображается: Проверьте UILaunchStoryboardName в Info.plist, убедитесь, что файл LaunchScreen включен в целевой объект приложения, и подтвердите, что ресурсы изображений включены
• Изображение растянуто или обрезано: Проверьте настройки Content Mode, ограничения и убедитесь, что вы предоставили изображения правильных размеров
• Экран-заставка мигает, затем появляется пустой экран: Скрывайте заставку только когда ваш UI готов, и согласуйте цвета фона
• Экран-заставка застревает: Убедитесь, что SplashScreen.hide() вызывается, и проверьте наличие ранних ошибок
• Неправильное соотношение сторон на iPad: Используйте ограничения вместо фиксированных размеров, установите устройства раскадровки на Universal и предоставьте изображения высокого разрешения
• Изменения не отражаются: Очистите сборку, переустановите приложение и убедитесь, что вы редактируете правильные файлы

Заключение

Добавление экрана-заставки в ваше приложение React Native — это небольшой шаг, который обеспечивает более профессиональный и удобный для пользователя опыт. Настраивая экран-заставку вручную в Xcode или используя библиотеки, такие как react-native-splash-screen, вы можете интегрировать экран-заставку, который отображает ваш бренд и удерживает внимание пользователей во время запуска.

Помните о времени отображения и обеспечьте плавные переходы между экраном-заставкой и первым экраном вашего приложения. При правильной реализации ваш экран-заставка повысит воспринимаемое качество вашего приложения с момента его запуска.

Часто задаваемые вопросы