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

Question

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

Я бегу ionic cordova run android для моего проекта ионных Cordova. В настоящее время мой мобильный телефон подключен к компьютеру через USB. поэтому, когда я запускаю эту команду, она устанавливает приложение на моем реальном устройстве Android Redmi Note 6 PRO. но на самом деле происходит, когда приложение открывается, появляется только белый экран, больше ничего. Сначала он показывает заставку, а затем белый экран навсегда. Почему такое поведение происходит? Я где-то читал, и я думаю, что некоторые люди имели эту проблему из-за ionic 4. Пожалуйста, помогите.

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

Вот. https://pastebin.com/nLiY8w0b

Chrome отладчик показывает - https://pastebin.com/EzdyV3Tw

21

angular ionic-framework ionic2 ionic3 ionic4

Источник

user10046099 10 фев '19 в 20:07

10 ответов

Другие вопросы по тегам angular ionic-framework ionic2 ionic3 ionic4

user9759011 18 мар '19 в 09:32 2019-03-18 09:32 · Answer 1 · 2019-03-18 09:32

Я решил эту проблему, установив правильные параметры в config.xml

<preference name="AutoHideSplashScreen" value="false" />
 <preference name="SplashScreenDelay" value="10000" />
 <preference name="FadeSplashScreenDuration" value="1000" />
 <preference name="SplashScreen" value="screen" />
 <preference name="ShowSplashScreen" value="true" />
 <preference name="ShowSplashScreenSpinner" value="false" />
 <preference name="SplashShowOnlyFirstTime" value="false" />
 <preference name="FadeSplashScreen" value="true" />

Тогда на моем platform.ready() instruction all I do is Splashscreen.hide();

и после этого запустите проект на Android с помощью

ionic cordova run android

user11194470 02 апр '19 в 09:40 2019-04-02 09:40 · Answer 2 · 2019-04-02 09:40

Нашел решение. Проблема была в https://github.com/NeoLSN/cordova-plugin-android-permissions. На Android 6+ (может быть Android 5 тоже, у меня его нет на моих устройствах) пользователь должен принимать разрешения вручную. В приложении разрешение на запрос выглядит как предупреждение. И это предупреждение автоматически останавливает заставку (даже если вы не скрываете заставку автоматически и еще не вызываете метод скрытия) и отключает анимацию исчезновения. Также этот запрос разрешений нарушил заставку, даже если разрешения уже добавлены.

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

пример:
config.xml

<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="SplashScreenDelay" value="30000" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="ShowSplashScreen" value="true" />

В app.components.ts

  initializeApp() {
    this.platform.ready().then(() => {
      setTimeout(() => {
        this.splashScreen.hide();
      }, 1000);
    }
  }

ОТМЕТИЛ!!! задержка setTimeout должна быть равна значению параметра FadeSplashScreenDuration в config.xml

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

user6747251 28 май '20 в 17:30 2020-05-28 17:30 · Answer 3 · 2020-05-28 17:30

При изменении config.xmlу вас не сработало, ПОПРОБУЙТЕ ЭТО

Шаг 1:
Открытьindex.html
Измените базовый href с <base href="/" /> к <base href="./" />

Шаг 2:
Открытьtsconfig.json
Измените цель в compilerOptions с "target": "es2015" к "target": "es5"

Ссылка: https://github.com/ionic-team/capacitor/issues/1878

7

Источник

user6747251 28 май '20 в 17:30

user4222574 30 апр '19 в 16:57 2019-04-30 16:57 · Answer 4 · 2019-04-30 16:57

Я также столкнулся с этой проблемой, но в моем случае проблема с маршрутизацией по умолчанию.

Когда приложение инициализируется, оно пытается открыть маршрут по умолчанию, который является Пустым маршрутом, который далее мы перенаправляем на фактический рабочий маршрут. В моем случае Пустой маршрут был перенаправлен на "/ панель инструментов".

Пример кода

const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    canActivate: [AuthGuard],
    loadChildren: './home/home.module#HomePageModule'
  },
  { path: 'login',
    loadChildren: './public/login/login.module#LoginPageModule' }

В приведенном выше коде мой пустой маршрут перенаправляется на панель инструментов, где [AuthGuard] активен, и он застрял в обращении, поэтому я решил перенаправить на маршрут, где [AuthGuard] не активен, то есть "/login" в моем случае, Обновлен код путем перенаправления на страницу входа, где [Authgaurd] не активен.

 const routes: Routes = [
      {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
      },
      {
        path: 'dashboard',
        canActivate: [AuthGuard],
        loadChildren: './home/home.module#HomePageModule'
      },
      { path: 'login',
        loadChildren: './public/login/login.module#LoginPageModule' }

После создания проекта для Andriod, приложение работает успешно.

Justed опубликовал ответ, если у кого-то есть такая же проблема, как и у меня, по той же проблеме.

user3156224 04 ноя '19 в 09:34 2019-11-04 09:34 · Answer 5 · 2019-11-04 09:34

config.xml

 <preference name="auto-hide-splash-screen" value="false" /> 
 <preference name="AutoHideSplashScreen" value="false" />

main.js, пожалуйста, измените

this.platform.ready().then(function () {
        _this.statusBar.styleDefault();
        _this.splashScreen.hide();
    });

к

this.platform.ready().then(function () {
            _this.statusBar.styleDefault();
            setTimeout(function(){
                _this.splashScreen.hide();

            }, 3000);
        });

user8200279 26 фев '19 в 17:37 2019-02-26 17:37 · Answer 6 · 2019-02-26 17:37

Отладьте ваше приложение и проверьте, не показывало ли приложение ошибки на белом экране, главным образом из-за ошибок в приложении.

1

Источник

user8200279 26 фев '19 в 17:37

user6908204 21 апр '21 в 16:44 2021-04-21 16:44 · Answer 7 · 2021-04-21 16:44

Если вы все еще здесь без ответа, вот как я это решил.

      $ ionic cordova run android --simulator --verbose --optimization=false

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

chrome: // inspect / # устройств

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

Примечание: флаг --optimization=false важен, чтобы вы могли легко читать ошибки.

Удачи

user10657086 24 фев '19 в 19:16 2019-02-24 19:16 · Answer 8 · 2019-02-24 19:16

Поместите это в ваш файл config.xml

<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="3000" />

затем выполните эту команду: ionic cordova build android создаст файл apk здесь: your_project_folder/platform / android / app / build / output /apk/debug/app-debug.apk

Это должно работать без зависания белого экрана после заставки

user1802179 09 мар '20 в 06:18 2020-03-09 06:18 · Answer 9 · 2020-03-09 06:18

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

удалять android папка (в каталоге вашего проекта или в каталоге платформ.)
Запустите команду, чтобы добавить Android в качестве платформы.

npx cap добавить android

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

Откройте Android Studio и создайте APK. Этот APK должен работать должным образом.

user5671787 22 окт '23 в 09:02 2023-10-22 09:02 · Answer 10 · 2023-10-22 09:02

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

удалить папку андроид
удалить папку www
запустить: ионный конденсатор добавить андроид
запустить: ионную сборку (при этом будет создана папка www со всеми необходимыми файлами html и js)
запустить: синхронизация ограничения npx
запустить: открыть крышку npx andorid
запустите проект на своем телефоне.

вот и все.