105

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

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

Я также читал, что мне нужно изменить «Файл экрана запуска» в разделе «Значки приложений и изображения запуска» в моих опциях:

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

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

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

Заранее спасибо.

ios xcode react-native asset-catalog СП Лобо
источник

Почему на втором снимке экрана пустой файл экрана запуска?

Стефан

1

Поскольку я читал, что должен оставить его пустым, если я хочу, чтобы приложение использовало изображения из каталога ресурсов

СП Лобо,

Хорошо, ты прав. Чтобы лучше понять: текст в черной рамке вверху от вас или от React?

Стефан

Это от React. Сначала отображается черный экран (который будет экраном запуска), затем текст, который я показываю на снимке экрана, а после текста появляется мое приложение. Этот текст также появлялся раньше, когда у моего приложения был экран запуска React Native по умолчанию.

СП Лобо

1

удалить с устройства, очистить проект и попробовать установить заново

LS_ 02

120

Мне удалось решить проблему с помощью этой ветки: Изображение запуска не отображается в приложении iOS (с использованием Images.xcassets)

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

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

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

Default@2x.png ( 640x960 )
По умолчанию - 568h@2x.png (640x1136)
По умолчанию-667h@2x.png (750x1334)
Default-Portrait-736h@3x.png (1242x2208)
Default-Landscape-736h@3x.png (2208x1242)

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

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

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

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

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

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

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

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

СП Лобо
источник

Должны ли изображения быть в формате .png Я пытаюсь использовать .jpg

Адам Кац

Я не пробовал с изображениями .jpg. Может быть, это работает только с .png

СП Лобо

спасибо за ошибку, которую я получаю в xcode, это файл не имеет допустимого расширения файла, поэтому похоже, что это проблема, хотя я не понимаю, почему jpg не работает

Адам Кац

1

У вас должны быть все 5 вариантов, мое приложение не предназначено для использования в альбомной ориентации, поэтому я оставил его, но оно не работает, поэтому мне интересно, так ли это?

Адам Кац

1

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

Дэн Джи Нельсон

16

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

Дэн Джи Нельсон
источник

удаление приложения из симулятора работает для меня. спасибо

Энди

Ты мой спасатель. Большое вам спасибо.

Остановка

9

Я много смотрел на эти ответы в 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 правой кнопкой мыши в пустом пространстве щелкните, **import**затем выберите изображение, которое хотите добавить.

шаг 3:

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

шаг 4

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

шаг 5

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

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

Поезд
источник

1

@Noitidart Рад, что смог помочь.

Поезд

1

Я даже не удалил LaunchScreen.xib, я просто удалил текстовые узлы, затем перетащил в представление изображения, импортировал изображение, как вы описали, затем установил изображение в UIImageView :) Есть ли способ сделать это отзывчивый? Как на планшете должно быть 3х, а на телефоне должно быть 2х? Также мой UIImageView не сосредоточен на всех устройствах. :( Вот скриншот того, что у меня есть - i.imgur.com/o5SMgHN.png

Noitidart

1

@Noitidart Хорошая находка. Я уверен, что они будут полезны тем, кто просматривает этот ответ.

Поезд

1

Спасибо брат! Я думаю, что способ, которым вы открыли, - это реальный способ сделать это. Создание изображений с заданным цветом фона, которые соответствуют размеру каждого устройства в каждом ландшафте / портрете, - это не способ сделать это (как это делает самый популярный ответ здесь). Теперь я могу ЛЕГКО настроить цвет фона. Масштабирование и т.д. может быть достигнуто отлично. С изображением все на изображении.

Noitidart

1

таким образом, процесс такой же, как если бы вы разрабатывали быстрое собственное приложение. cool

jasan

9

Обновить

generator-rn-toolboxустарела. Вместо этого используйте response-native-make .

старый ответ

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

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

Требования

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

Установить

Установить генератор-рН-инструмент и йо
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

Вот и все. :)

Источник

Джефф Гу Канг
источник

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

AlxVallejo 01

@AlxVallejo Ваш главный каталог проекта.

Джефф Гу Канг

«✖ splash не удалось найти» Я не думаю, что это

сработает

@AlxVallejo Был ли там ваш файл изображения? Пользуюсь с пользой.

Джефф Гу Канг

1

generator-rn-toolboxактуальность делает все то же, что и принятый ответ.

Феликс

6

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

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

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

Грязь
источник

5

Убедитесь, что флажок "Файл экрана запуска" пуст:

PoseLab
источник

1

Перейдите по этой ссылке:

Если вы хотите добавить заставку в мое приложение 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>

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

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

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

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

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

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

е) Щелкните папку splashScreenTutorial, затем перейдите в раздел ЦЕЛИ.

ж) Щелкните вкладку «Общие» в верхнем левом углу Xcode и прокрутите вниз до значков приложений и изображений запуска.

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

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

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

k) Затем щелкните LaunchImage, и, наконец, перетащите изображения экрана-заставки разных размеров в поле Launch Image.

Перетащите изображения вот так.

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

б) Чтобы удалить приложение, щелкните меню «Оборудование» на панели симулятора и перейдите на главную.

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

г) Запустите приложение еще раз, используя встроенную версию run-ios.

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

Панкадж Шарма
источник

1

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

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

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

Сара Инес Кальдерон
источник

0

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

Келли Роуз
источник

0

Если вы создаете экран запуска с помощью 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

Ронит
источник

0

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

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

Лукас Андреаделис
источник

0

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

Откройте Xcode и найдите LaunchScreen.xibфайл в своем проекте (обратите внимание, что это экран, который по умолчанию отображается в ios)
Чтобы удалить / отредактировать текст на экране, нажмите на него и внесите необходимые изменения по своему усмотрению.
Чтобы изменить цвет фона, найдите следующие значки на правой боковой панели и нажмите маленькую кнопку с пиктограммой в самом верху, четвертую слева (при наведении курсора появится надпись «Показать инспектор атрибутов»)

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

Теперь нам нужно добавить изображение в, Images.xcassetsчтобы мы могли ссылаться на него в LaunchScreen.xibgoto, чтобы сделать это Images.xcassets. нажмите +кнопку, importа затем добавьте изображение, которое хотите отобразить на заставке. Ниже AppIconвы увидите имя файла изображения. Это имя мы будем использовать для ссылки в нашемLaunchScreen.xib
Теперь нам нужно сослаться на изображение, которое мы добавили в LaunchScreen.xibфайл, поэтому вернитесь LaunchScreen.xibи щелкните то, image viewчто мы добавили ранее, и в правом углу вы увидите кучу параметров. нажмите на первый, который говорит, imageи выберите изображение, которое вы импортировали на шаге 5

очистите проект и запустите, react-native run-iosи вы должны увидеть изменения.

Хади Мир
источник

-5

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

eyal83
источник

Спасибо за Ваш ответ. Я не очень хорошо понимаю, потому что думаю, что вы сделали опечатку. Я выполнил глобальный поиск в своем проекте, чтобы удалить ссылки на LaunchScreen.xib, pero нет ссылок на этот файл: puu.sh/lGu7z/8fd88a886e.png Спасибо.

СП Лобо

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

Ответы:

Обновить

старый ответ

Требования

Установить