Я працюю з додатком React Native і намагаюся встановити налаштований екран запуску, але цього не можу.

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

Я також читав, що мені потрібно змінити "Запуск файлу екрана" у розділі "Піктограми додатків та запуску зображень" у своїх параметрах:

Після того, як я зробив це, мій екран запуску став повністю чорним, і коли програма завантажується, з’являються як верхня, так і нижня чорні рамки:

Тому я не знаю, що мені потрібно зробити, щоб встановити свій запуск в моєму проекті React Native.

Я буду вдячний, якщо хтось може мені допомогти у вирішенні цих неприємностей.

Заздалегідь спасибі.

Мені вдалося вирішити проблему за допомогою цієї теми: Запуск зображення не відображається в додатку iOS (використовуючи Images.xcassets)

Тому я поясню це глибоко, якщо це може допомогти комусь іншому.

Спочатку потрібно створити певні образи. Для цього я використовував цей шаблон і цю веб-сторінку з автоматичним генератором: TiCons

Коли я завантажував свої зображення, я брав ті, які знаходяться в папці "Актив" / iphone, я брав лише ті:

• За замовчуванням@2x.png ( 640x960 )
• За замовчуванням-568h@2x.png (640x1136)
• За замовчуванням-667h@2x.png (750x1334)
• За замовчуванням-Por Portrait-736h@3x.png (1242x2208)
• За замовчуванням-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 всередині нашого проекту ) і натисніть " Використовувати каталог активів " після цього. Відкриється модальний режим, ми вирішуємо перенести каталог зображень

Тепер, у селекторі " Запустити джерело зображень ", ми можемо вибрати папку, яку ми створили раніше, 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застаріло. Використовуйте натомість react-native-make .

стара відповідь

Я рекомендую generator-rn-панель інструментів для застосування екрана запуску або головного значка, використовуючи на нативної реакції. Це простіше і простіше у використанні через cli як натиснута на реакцію.

• Не потрібно відкривати XCode.
• Не потрібно робити багато файлів зображень для різних дозволів.
• У будь-який час змінити екран запуску за допомогою одного рядка.

Вимоги

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

Встановити

1. Встановіть generator-rn-toolbox та yo
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 і додав файл startScreen.xib із зображенням заставки.

КРОК: 2 змініть код так, як написано всередині тегу субпрезентацій. з цим кодом<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>

КРОК: 3 Вам слід відкрити додаток у Xcode. Ось такі кроки:

а) Перейдіть до папки свого проекту

b) Відкрийте папку ios

c) Перейдіть до файлу, у якому розширення .xcodeproj, у моєму випадку це splasScreenTutorial.xcodeproj

d) Відкрийте цей файл у своєму Xcode.

д) Видаліть файл launchScreen.xib.

f) Клацніть папку splashScreenTutorial, а потім перейдіть до розділу ЦІЛИ

g) Клацніть на вкладці Загальні у верхньому лівому куті вашого Xcode та прокрутіть униз до значків додатків та запуску зображень.

h) Перейдіть до «Запуск джерела зображень» та натисніть «Використовувати каталог активів». Клацніть на міграції.

i) Видаліть текст LaunchScreen з файла запуску екрана.

j) Поверніться до папки проекту та відкрийте файл Images.xcassets. Ви повинні побачити AppIcon та LaunchImage.

k) Далі, натисніть на LaunchImage, нарешті, перетягніть зображення різних розмірів на екран сплеску в поле Launch Image.

Перетягніть подібні зображення.

Тестовий екран заставки a) Щоб побачити зміни, потрібно видалити додаток зі свого тренажера, якщо ви запустили програму спочатку.

b) Щоб видалити додаток, натисніть меню "Обладнання" на панелі симулятора та перейдіть додому.

в) Торкніться і утримуйте конкретну піктограму програми, яку ви хочете видалити, і натисніть на значку X на піктограмі.

г) Запустіть додаток ще раз, використовуючи рідну реакцію ios

Ви можете побачити свій екран сплеску

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

• Клацніть правою кнопкою миші на зображення, натисніть Show in Finder, а потім відредагуйте своєContents.json файл
• Додайте зображення до розділів 2x та 3x
• Перейдіть до аркуша розгортки Launch Screen з меню "лінійка"
• Переконайтеся, що увімкнено лише червоні стрілки всередині , а не зовнішні червоні стрілки
• Натисніть "Відносні поля безпечної зони"

Зображення тепер має бути зосереджено на всіх iPhone-розмірах (тестовано на портреті).

Якщо ви хочете використовувати існуючий файл .xib Launch Screen .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.xibщоб зробити це goto 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), і він повинен працювати.