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

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

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

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

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

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

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

Мне удалось решить проблему с помощью этой ветки: Изображение запуска не отображается в приложении 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 с нашими пользовательскими образами запуска:

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

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

Я много смотрел на эти ответы в 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или отредактируйте, как вам нравится.

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

Обновить

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

старый ответ

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

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

Требования

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

Установить

1. Установить генератор-рН-инструмент и йо
2. npm install -g yo generator-rn-toolbox
3. Установите imagemagick brew install imagemagick

4. Применить заставку на iOS

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

   или Android

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

Вот и все. :)

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. Теперь нам нужно сослаться на изображение, которое мы добавили в LaunchScreen.xibфайл, поэтому вернитесь LaunchScreen.xibи щелкните то, image viewчто мы добавили ранее, и в правом углу вы увидите кучу параметров. нажмите на первый, который говорит, imageи выберите изображение, которое вы импортировали на шаге 5

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

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