Экран запуска iOS в React Native

Я работаю с React Native, и я пытаюсь настроить экран запуска, но я не могу.

React Native создает файл LaunchScreen.xib по умолчанию, поэтому я создал LaunchImage внутри Images.xcassets:

Я также прочитал, что мне нужно изменить "Файл экрана запуска" в разделе "Иконки приложений и запуск изображений" в моих параметрах:

Как только я это сделал, мой экран запуска стал полностью черным, и когда приложение загружено, есть верхний и нижний черные кадры:

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

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

Спасибо заранее.

Ответ 1

Я смог решить проблему с помощью этой темы: Запустить изображение, не отображающееся в приложении iOS (используя Images.xcassets)

Итак, я собираюсь объяснить это глубоко, если это может помочь кому-то другому.

Сначала, вам нужно создать определенные изображения. Для этого я использовал этот шаблон и эту веб-страницу с автоматическим генератором: TiCons

Когда я загрузил свои изображения, я взял их в папку assets/iphone, я только взял их:

[email protected] (640x960)
[email protected] (640x1136)
[email protected] (750x1334)
[email protected] (1242x2208)
[email protected] (2208x1242)

Также вам нужен этот файл Contents.json в той же папке, я получил его от друга:

{
  "images": [
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "retina4"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "2x",
      "subtype": "667h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "landscape",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "8.0",
      "orientation": "portrait",
      "scale": "3x",
      "subtype": "736h"
    },
    {
      "extent": "full-screen",
      "idiom": "iphone",
      "filename": "[email protected]",
      "minimum-system-version": "7.0",
      "orientation": "portrait",
      "scale": "2x"
    }
  ],
  "info": {
    "version": 1,
    "author": "xcode"
  }
}

Итак, в этот момент я создал папку LaunchImage.launchimage внутри Images.xcassets в моем проекте React Native и сохранил изображения и Содержание .json внутри него:

Второй, вы должны открыть свой проект в Xcode и в настройках "General", ниже " значки приложений и запуск изображений" нам нужно оставить опцию " Запустить экранный файл" (также мы можем удалить файл LaunchScreen.xib внутри нашего проекта) и после этого нажмите " Использовать каталог активов", Откроется модальный, мы выберем Миграция каталога Изображения

Теперь, в селекторе Launch Images Source ", мы можем выбрать папку, которую мы создали ранее, LaunchImage (тот, у которого есть наши изображения):

Мы выбираем это вместо Активы бренда, и мы можем удалить папку Брендовые активы.

На этом этапе мы сможем запустить наше приложение React Native с помощью наших пользовательских изображений запуска:

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

Ответ 2

Обязательно удалите приложение из симулятора. Затем выполните очистку вашего проекта.

Ответ 3

Я много раз рассматривал эти ответы в SO, содержащих решения о том, как создать новый экран запуска. Я имею в виду, давайте подумаем об этом на минуту.

Когда мы создаем новый реактивный проект, что мы видим на экране запуска?

> Стандартный экран запуска Facebook

Так что это заставило меня задуматься, как они это сделали?

Они создали LaunchScreen.xib

Я думаю, что должна быть причина для этого. Поэтому я зашел в LaunchScreen.xib и внес изменения в текст по умолчанию "React Native..." или что бы там ни было. Я запустил приложение еще раз, чтобы увидеть, что экран запуска отражает мои изменения.

Решение 1 Отредактируйте существующий LaunchScreen.xib

Решение 2 Создай свой

Так что я сделал, мне потребовалось больше времени, чтобы напечатать этот ответ, чем научиться создавать свой собственный. Both of these solutions are compatible with all the devices.

Шаг 1:

Удалить LaunchScreen.xib

шаг 2:

щелкните на images.xcassets щелкните правой кнопкой мыши в images.xcassets пространстве, нажмите **import** затем выберите изображение, которое вы хотите добавить.

шаг 3:

Щелкните правой кнопкой мыши на корневой папке вашего проекта и добавьте новый файл типа Launch Screen и назовите его как хотите.

шаг 4

Нажмите на свой проект в левой навигационной панели, Settings > " General и " App Icons and Launch Images. Убедитесь, что Launch Image Source пуст, а Launch Screen File совпадает с именем вашего только что созданного экрана запуска.

шаг 5

Нажмите на свой новый файл, созданный на step 2, перетащите Image View или отредактируйте его так, как вам удобно.

Тогда, что это, вы сделали. Вам даже не нужно чистить решение, просто восстановить.

Ответ 4

Я рекомендую generator-rn-toolbox для применения стартового экрана или главного значка на реагирующем. Это проще и проще в использовании через cli, как реагирующее.

Не нужно открывать XCode.
Не нужно делать много файлов изображений для разных разрешений.
В любое время меняйте стартовый экран, используя одну строку.

Требования

узел> = 6
Одно квадратное изображение или файл psd с разрешением более 2208x2208 пикселей для экрана запуска (заставки)
Позитивный разум;)

устанавливать

Установите генератор-RS-Toolbox и йо
npm install -g yo generator-rn-toolbox
Установить imagemagick brew install imagemagick
Применить заставку на iOS

yo rn-toolbox:assets --splash YOURIMAGE.png --ios

или Android

yo rn-toolbox:assets --splash YOURIMAGE.png --android

Все это. :)

Источник

Ответ 5

Просто прошел через это и работает. Единственный дорожный блок, который я обнаружил, не очищал содержимое симулятора. Если вы обнаружите, что ваш новый экран запуска не работает, вам нужно открыть симуляцию и перейти к следующему:

Симулятоp > Reset содержание и настройки

В этом симуляторе должно быть какое-то хардкорное кэширование, но как только это будет сделано - повторите попытку, и вы увидите приложение. Убедитесь, что вы делаете это как для симуляторов xcode, так и для реактивных симуляторов!

Ответ 6

Убедитесь, что выбран параметр "Запустить экранный файл":

Ответ 7

Следуйте по этой ссылке:

Если вы хотите добавить заставку в свое приложение React Native. После завершения процесса результат будет вашим.

ШАГ: 1 Во-первых, я создал папку splashImageResource и добавил файл launchScreen.xib с заставкой.

ШАГ: 2 изменить код как написанный внутри тега subviews. с помощью этого кода <subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

STEP: 3 Вы должны открыть приложение в Xcode. Ниже приведены следующие шаги:

a) Перейдите в папку проекта

b) Откройте папку ios

c) Перейдите к файлу с расширением .xcodeproj в качестве расширения, в моем случае это splasScreenTutorial.xcodeproj

d) Откройте этот файл в своем Xcode.

e) Удалите файл launchScreen.xib.

f) Нажмите на папку splashScreenTutorial, затем перейдите в раздел TARGETS

g) Нажмите вкладку "Общие" в верхнем левом углу вашего Xcode и прокрутите вниз до "Значки приложений" и "Запуск изображений"

h) Перейдите в "Источник запуска изображений" и нажмите "Использовать каталог активов". Нажмите "Перенести".

i) Удалите текст LaunchScreen из файла экрана запуска.

j) Вернитесь в папку проекта и откройте файл Images.xcassets. Вы должны увидеть AppIcon и LaunchImage.

k) Затем нажмите "LaunchImage", и, наконец, перетащите изображения с заставкой, которые вы имеете разных размеров, в окно "Запуск изображения".

Перетащите изображения, подобные этому.

Экран всплывающего экрана a) Чтобы увидеть изменения, вам нужно удалить приложение с вашего симулятора, если вы сначала запустили приложение.

b) Чтобы удалить приложение, щелкните меню "Оборудование" на панели "Симулятор" и перейдите в "Домашняя страница".

c) Нажмите и удерживайте значок конкретного приложения, который хотите удалить, и нажмите значок X на значке.

d) Запустите приложение снова, используя run-ios для реакции

Вы можете увидеть свой экран заставки

Ответ 8

Если вы хотите использовать существующий файл запуска .xib. React Native изначально настроен, но с вашим собственным логотипом и цветом фона (и без какого-либо текста по умолчанию для React Native) вы можете выполнить следующие инструкции: https://medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec.

Ответ 9

Если вы создаете экран запуска с помощью React, вы должны добавить то же самое в файл LaunchScreen.xib в iOS Xcode, чтобы вы могли сделать снимок экрана и добавить его в качестве изображения в Images.xcassets.

Откройте LaunchScreen, затем добавьте UIImageView в представление из библиотеки объектов с правой панели в XCode.

Добавьте конечные, ведущие, нижние и верхние ограничения в представление. Как показано ниже -

Не забудьте изменить UIImageView ContentMode на AspectFit, чтобы он выглядел одинаково при запуске приложения.

После этого вам нужно добавить код в AppDelegate, чтобы вы не получили белый экран. Код -

 UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
 launchScreenView.frame = self.window.bounds;
 rootView.loadingView = launchScreenView;

Вы можете обратиться - https://facebook.github.io/react-native/docs/running-on-device.html#pro-tip

Ответ 10

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

Откройте Info.plist в папке проекта и удалите ключ "Основное имя файла пера". Затем восстановить и, надеюсь, проблема исчезла.

Ответ 11

Для меня на XCode 10.1 и react-native 59.2 мне пришлось пройти через дополнительные шаги после добавления изображений, раскадровки и 1 универсального изображения.

Щелкните правой кнопкой мыши на изображении, нажмите " Show in Finder, затем отредактируйте файл Contents.json
Добавьте изображение в разделы 2х и 3х
Перейдите на раскадровку Launch Screen с меню "линейка"
Убедитесь, что включены только красные красные стрелки, а не внешние красные
Нажмите "Относительные поля в безопасной зоне"

Теперь изображение должно быть центрировано на iPhone всех размеров (проверено на Portrait).

Ответ 12

Вы должны установить источник изображения экрана запуска в качестве установленного изображения. После этого удалите файл LauncScreen.xib. После этого выполните глобальный поиск в своем проекте и удалите все ссылки на LaunchScreen.xib(посмотрите во весь проект. Я создаю пользовательский текстовый редактор, поэтому он cmd + shift + f), и он должен работать.