为什么在ionic 4的启动画面后白屏卡住了？

Question

我ionic cordova run android参加了离子科尔多瓦项目。这时，我的手机通过USB连接到PC。因此，当我运行该命令时，它将在我的真实设备android redmi note 6 PRO上安装该应用程序。但是真正发生的是，当应用打开时，仅出现白屏，什么也没有。首先，它显示启动屏幕，然后永远显示白屏。为什么会发生这种现象？我在某处阅读，我认为某些人由于离子4而有此问题。请帮助。

我要粘贴的pastebin链接，在单击应用程序以在android模拟器上打开该应用程序后显示logcat日志（它在android模拟器上也显示白屏）。

这里是。https://pastebin.com/nLiY8w0b

chrome调试器显示-https://pastebin.com/EzdyV3Tw

Answer 1

找到解决方案。问题出在cordova-plugin-android-permissions。在 android 6+（也可能是 android 5，我的设备上没有它）上，用户应该手动接受权限。在应用程序权限请求看起来像警报视图。并且此警报会自动停止启动画面（即使您没有自动隐藏启动画面并且尚未调用 hide 方法）并中断淡出动画。即使已经添加了权限，此权限请求也会破坏启动画面。

所以解决方案是在超时延迟等于淡出超时后，在 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 延迟应等于 config.xml 中的 FadeSplashScreenDuration 参数值

结论： 上面的代码从初始屏幕平滑过渡，这将平滑地淡入您的启动页面。根本不显示白屏。希望这会有所帮助。

Answer 2

我已经通过在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();

之后，使用

ionic cordova run android

Answer 3

如果改变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#issuecomment-523497238

Answer 4

我也遇到了这个问题，但就我而言，问题出在默认路由上。

当应用程序初始化时，它尝试在默认路由（空路由）上打开，这进一步我们重定向到实际工作路由，在我的例子中，空路由被重定向到“/dashboard”。

示例代码

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 发布了答案。