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

Question

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

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

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

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

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

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

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

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

11 85

ios xcode4 react-native asset-catalog

11 ответов:

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

11

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

когда мы создаем новый проект react-native, что мы видим для стартовый экран?

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

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

6

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

не нужно открывать XCode.

не нужно делать много файлов изображения для различных разрешений.

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

требования

узел >= 6

один площадью изображение или psd-файл размером более 2208x2208 разрешение пикселей на экране запуска(экран-заставка)

позитивный взгляд ;)

установить

установите генератор-RN-toolbox и yo

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

вот и все. :)

источник

6

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

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

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

4

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

4

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

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

Шаг 1 Во-первых, я создал папку splashImageResource и добавил экран запуска.xib файл с фоновым изображением.

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

Шаг 3 Вы должны открыть свое приложение в Xcode. Вот шаги, которые необходимо выполнить:

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

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

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

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

e) удалите экран запуска.файл xib.

f) нажмите на папку splashScreenTutorial, затем перейдите к целям раздел

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

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

i) удалите текстовый экран запуска из файла экрана запуска.

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

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

перетащите изображения, как это.

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

b) чтобы удалить приложение, нажмите на аппаратное меню на панели симулятора и перейдите домой.

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

d) запустите приложение снова с помощью react-native run-ios

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

1

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

0

Если вы создаете экран запуска с помощью React, то вы должны добавить то же самое в экран запуска.xib файл в iOS Xcode для этого вы можете сделать снимок экрана и добавить его в качестве изображения в изображениях.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 в папке проекта и удалите ключ" Main nib file base name". Затем перестройте и, надеюсь, проблема исчезнет.

0

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

-5

JV Lobo · Accepted Answer · 2017-05-23 15:34:53

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

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

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

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

Default@2x.png (640x960)

Default-568h@2x.png (640x1136)

Default-667h@2x.png (750x1334)

Default-Portrait-736h@3x.png (1242x2208)

Default-Landscape-736h@3x.png (2208x1242)

Также вам нужно это содержание.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 внутри картинки.xcassets папка в моем проекте React Native и сохраните изображения и содержание.json файл внутри него:

второй, вы должны открыть свой проект в Xcode и в настройках" общие", ниже "значки приложений и запуск изображений" мы должны оставить опцию " Файл Стартового Экрана" пустой (также мы можем удалить LaunchScreen.xib файл внутри нашего проекта), и нажмите в "Использовать Каталог Активов" после этого. Модальный откроется, мы выбираем Migrate каталоге изображения

в "Запустить Источник Изображений" селектор, мы можем выбрать папку мы создали раньше,LaunchImage (тот, с нашими изображениями):

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

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

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