为什么在 Ionic 4 启动画面后出现白屏？

Question

我运行 ionic cordova run android 我的 Ionic Cordova 项目。此时，我的手机通过 USB 连接到 PC。因此，当我运行该命令时，它会在我的真实设备上安装该应用程序 Android Redmi Note 6 PRO。

但真正发生的是当应用程序打开时，只出现白屏，没有其他任何东西。首先它显示闪屏，然后永远显示白屏。为什么会发生这种行为？我在某处读到有人因为 Ionic 4 而遇到这个问题。

以下是我在 Android 模拟器上单击应用程序打开后的 logcat 日志（它在 Android 模拟器上也显示白屏）。

2019-02-11 00:01:24.131 5945-5945/? I/zygote: Not late-enabling -Xcheck:jni (already on)
2019-02-11 00:01:24.148 5945-5945/? W/zygote: Unexpected CPU variant for X86 using defaults: x86
2019-02-11 00:01:24.312 5945-5945/io.ionic.starter I/CordovaLog: Changing log level to DEBUG(3)
2019-02-11 00:01:24.312 5945-5945/io.ionic.starter I/CordovaActivity: Apache Cordova native platform version 7.1.4 is starting
2019-02-11 00:01:24.312 5945-5945/io.ionic.starter D/CordovaActivity: CordovaActivity.onCreate()
2019-02-11 00:01:24.342 5945-5945/io.ionic.starter I/WebViewFactory: Loading com.android.chrome version 61.0.3163.98 (code 316409812)
2019-02-11 00:01:24.350 5945-5945/io.ionic.starter I/zygote: The ClassLoaderContext is a special shared library.
2019-02-11 00:01:24.392 5945-5945/io.ionic.starter I/cr_LibraryLoader: Time to load native libraries: 8 ms (timestamps 2894-2902)
2019-02-11 00:01:24.421 5945-5945/io.ionic.starter I/chromium: [INFO:library_loader_hooks.cc(136)] Chromium logging enabled: level = 0, default verbosity = 0
2019-02-11 00:01:24.422 5945-5945/io.ionic.starter I/cr_LibraryLoader: Expected native library version number "61.0.3163.98", actual native library version number "61.0.3163.98"
2019-02-11 00:01:24.436 5945-5963/io.ionic.starter W/cr_ChildProcLH: Create a new ChildConnectionAllocator with package name = com.android.chrome, sandboxed = true
2019-02-11 00:01:24.464 5945-5945/io.ionic.starter I/cr_BrowserStartup: Initializing chromium process, singleProcess=false
2019-02-11 00:01:24.513 5945-5945/io.ionic.starter W/o.ionic.starter: type=1400 audit(0.0:48): avc: denied { read } for name="vmstat" dev="proc" ino=4026532039 scontext=u:r:untrusted_app:s0:c512,c768 tcontext=u:object_r:proc:s0 tclass=file permissive=0
2019-02-11 00:01:24.544 5945-5945/io.ionic.starter I/zygote: android::hardware::configstore::V1_0::ISurfaceFlingerConfigs::hasWideColorDisplay retrieved: 0
2019-02-11 00:01:24.553 5945-5945/io.ionic.starter D/EGL_emulation: eglCreateContext: 0xa4516160: maj 3 min 0 rcv 3
2019-02-11 00:01:24.555 5945-5945/io.ionic.starter D/EGL_emulation: eglMakeCurrent: 0xa4516160: ver 3 0 (tinfo 0x94123730)
2019-02-11 00:01:24.635 5945-5945/io.ionic.starter D/IonicWebViewEngine: Ionic Web View Engine Starting Right Up 1...
2019-02-11 00:01:24.659 5945-5945/io.ionic.starter D/SystemWebViewEngine: CordovaWebView is running on device made by: Google
2019-02-11 00:01:24.675 5945-5945/io.ionic.starter D/PluginManager: init()
2019-02-11 00:01:24.718 5945-5999/io.ionic.starter D/OpenGLRenderer: HWUI GL Pipeline
2019-02-11 00:01:24.787 5945-5945/io.ionic.starter D/CordovaWebViewImpl: >>> loadUrl(file:///android_asset/www/index.html)
2019-02-11 00:01:24.793 5945-5963/io.ionic.starter I/cr_LibraryLoader: Using linker: org.chromium.base.library_loader.ModernLinker
2019-02-11 00:01:24.795 5945-5992/io.ionic.starter W/cr_media: Requires BLUETOOTH permission
2019-02-11 00:01:24.800 5945-5945/io.ionic.starter D/CordovaActivity: Started the activity.
2019-02-11 00:01:24.805 5945-5945/io.ionic.starter D/CordovaActivity: Resumed the activity.
2019-02-11 00:01:24.834 5945-5999/io.ionic.starter I/OpenGLRenderer: Initialized EGL, version 1.4
2019-02-11 00:01:24.834 5945-5999/io.ionic.starter D/OpenGLRenderer: Swap behavior 1
2019-02-11 00:01:24.836 5945-5999/io.ionic.starter W/OpenGLRenderer: Failed to choose config with EGL_SWAP_BEHAVIOR_PRESERVED, retrying without...
2019-02-11 00:01:24.836 5945-5999/io.ionic.starter D/OpenGLRenderer: Swap behavior 0
2019-02-11 00:01:24.856 5945-5999/io.ionic.starter D/EGL_emulation: eglCreateContext: 0xa48062c0: maj 3 min 0 rcv 3
2019-02-11 00:01:24.871 5945-5999/io.ionic.starter D/EGL_emulation: eglMakeCurrent: 0xa48062c0: ver 3 0 (tinfo 0xa48038d0)
2019-02-11 00:01:25.188 5945-5999/io.ionic.starter D/EGL_emulation: eglMakeCurrent: 0xa48062c0: ver 3 0 (tinfo 0xa48038d0)
2019-02-11 00:01:25.209 5945-6010/io.ionic.starter D/EGL_emulation: eglCreateContext: 0x94170560: maj 3 min 0 rcv 3
2019-02-11 00:01:25.212 5945-6010/io.ionic.starter D/EGL_emulation: eglMakeCurrent: 0x94170560: ver 3 0 (tinfo 0x92f2a180)
2019-02-11 00:01:25.302 5945-6010/io.ionic.starter I/VideoCapabilities: Unsupported profile 4 for video/mp4v-es
2019-02-11 00:01:25.302 5945-5999/io.ionic.starter D/EGL_emulation: eglMakeCurrent: 0xa48062c0: ver 3 0 (tinfo 0xa48038d0)
2019-02-11 00:01:25.313 5945-6010/io.ionic.starter W/cr_MediaCodecUtil: HW encoder for video/avc is not available on this device.
2019-02-11 00:01:25.372 5945-5999/io.ionic.starter D/EGL_emulation: eglMakeCurrent: 0xa48062c0: ver 3 0 (tinfo 0xa48038d0)
2019-02-11 00:01:25.450 5945-5999/io.ionic.starter D/EGL_emulation: eglMakeCurrent: 0xa48062c0: ver 3 0 (tinfo 0xa48038d0)
2019-02-11 00:01:25.458 5945-6010/io.ionic.starter D/EGL_emulation: eglCreateContext: 0x941716a0: maj 3 min 0 rcv 3
2019-02-11 00:01:25.460 5945-6010/io.ionic.starter D/EGL_emulation: eglMakeCurrent: 0x941716a0: ver 3 0 (tinfo 0x92f2a180)
2019-02-11 00:01:25.537 5945-6012/io.ionic.starter W/cr_CrashFileManager: /data/user/0/io.ionic.starter/cache/WebView/Crash Reports does not exist or is not a directory
2019-02-11 00:01:25.537 5945-5950/io.ionic.starter I/zygote: Do partial code cache collection, code=22KB, data=30KB
2019-02-11 00:01:25.541 5945-5950/io.ionic.starter I/zygote: After code cache collection, code=22KB, data=30KB
2019-02-11 00:01:25.541 5945-5950/io.ionic.starter I/zygote: Increasing code cache capacity to 128KB
2019-02-11 00:01:25.546 5945-5945/io.ionic.starter D/CordovaWebViewImpl: onPageDidNavigate(file:///android_asset/www/index.html)
2019-02-11 00:01:25.611 5945-5945/io.ionic.starter D/CordovaWebViewImpl: onPageFinished(file:///android_asset/www/index.html)
2019-02-11 00:01:25.619 5945-5945/io.ionic.starter D/CordovaWebViewImpl: onPageDidNavigate(http://localhost/)
2019-02-11 00:01:25.619 5945-5988/io.ionic.starter D/SERVER: Handling local request: http://localhost/
2019-02-11 00:01:25.640 5945-5988/io.ionic.starter D/SERVER: Handling local request: http://localhost/runtime.js
2019-02-11 00:01:25.641 5945-5988/io.ionic.starter D/SERVER: Handling local request: http://localhost/polyfills.js
2019-02-11 00:01:25.644 5945-5988/io.ionic.starter D/SERVER: Handling local request: http://localhost/styles.js
2019-02-11 00:01:25.645 5945-5988/io.ionic.starter D/SERVER: Handling local request: http://localhost/cordova.js
2019-02-11 00:01:25.646 5945-5988/io.ionic.starter D/SERVER: Handling local request: http://localhost/vendor.js
2019-02-11 00:01:25.647 5945-5988/io.ionic.starter D/SERVER: Handling local request: http://localhost/main.js
2019-02-11 00:01:25.663 5945-5945/io.ionic.starter D/SystemWebChromeClient: http://localhost/: Line 10 : The key "viewport-fit" is not recognized and ignored.
2019-02-11 00:01:25.663 5945-5945/io.ionic.starter I/chromium: [INFO:CONSOLE(10)] "The key "viewport-fit" is not recognized and ignored.", source: http://localhost/ (10)
2019-02-11 00:01:25.997 5945-5991/io.ionic.starter E/chromium: [ERROR:service_manager.cc(156)] Connection InterfaceProviderSpec prevented service: content_renderer from binding interface: blink::mojom::BudgetService exposed by: content_browser
2019-02-11 00:01:26.012 5945-5945/io.ionic.starter D/JsMessageQueue: Set native->JS mode to EvalBridgeMode
2019-02-11 00:01:26.083 5945-5988/io.ionic.starter D/SERVER: Handling local request: http://localhost/cordova_plugins.js
2019-02-11 00:01:26.101 5945-5988/io.ionic.starter D/SERVER: Handling local request: http://localhost/plugins/cordova-plugin-statusbar/www/statusbar.js
2019-02-11 00:01:26.102 5945-5988/io.ionic.starter D/SERVER: Handling local request: http://localhost/plugins/cordova-plugin-device/www/device.js
2019-02-11 00:01:26.106 5945-5988/io.ionic.starter D/SERVER: Handling local request: http://localhost/plugins/cordova-plugin-splashscreen/www/splashscreen.js
2019-02-11 00:01:26.107 5945-5988/io.ionic.starter D/SERVER: Handling local request: http://localhost/plugins/cordova-plugin-ionic-webview/src/www/util.js
2019-02-11 00:01:26.108 5945-5988/io.ionic.starter D/SERVER: Handling local request: http://localhost/plugins/cordova-plugin-ionic-keyboard/www/android/keyboard.js
2019-02-11 00:01:26.201 5945-5945/io.ionic.starter W/zygote: Attempt to remove non-JNI local reference, dumping thread
2019-02-11 00:01:26.213 5945-5999/io.ionic.starter D/EGL_emulation: eglMakeCurrent: 0xa48062c0: ver 3 0 (tinfo 0xa48038d0)
2019-02-11 00:01:26.268 5945-5999/io.ionic.starter D/EGL_emulation: eglMakeCurrent: 0xa48062c0: ver 3 0 (tinfo 0xa48038d0)
2019-02-11 00:01:27.505 5945-5999/io.ionic.starter D/EGL_emulation: eglMakeCurrent: 0xa48062c0: ver 3 0 (tinfo 0xa48038d0)
2019-02-11 00:01:27.812 5945-5945/io.ionic.starter W/zygote: Attempt to remove non-JNI local reference, dumping thread
2019-02-11 00:01:27.826 5945-5999/io.ionic.starter D/EGL_emulation: eglMakeCurrent: 0xa48062c0: ver 3 0 (tinfo 0xa48038d0)
2019-02-11 00:01:27.878 5945-5945/io.ionic.starter W/zygote: Attempt to remove non-JNI local reference, dumping thread
2019-02-11 00:01:27.887 5945-5945/io.ionic.starter D/SystemWebChromeClient: http://localhost/main.js: Line 3385 : TypeError: Cannot read property 'apply' of null
2019-02-11 00:01:27.887 5945-5945/io.ionic.starter I/chromium: [INFO:CONSOLE(3385)] "TypeError: Cannot read property 'apply' of null", source: http://localhost/main.js (3385)
2019-02-11 00:01:27.894 5945-5945/io.ionic.starter D/SystemWebChromeClient: http://localhost/vendor.js: Line 75947 : Ionic Native: deviceready event fired after 973 ms
2019-02-11 00:01:27.895 5945-5945/io.ionic.starter I/chromium: [INFO:CONSOLE(75947)] "Ionic Native: deviceready event fired after 973 ms", source: http://localhost/vendor.js (75947)
2019-02-11 00:01:27.896 5945-5988/io.ionic.starter D/SERVER: Handling local request: http://localhost/assets/icon/favicon.png
2019-02-11 00:01:27.916 5945-5945/io.ionic.starter W/zygote: Attempt to remove non-JNI local reference, dumping thread
2019-02-11 00:01:27.924 5945-5945/io.ionic.starter D/CordovaWebViewImpl: onPageFinished(http://localhost/)
2019-02-11 00:01:27.951 5945-5945/io.ionic.starter W/zygote: Attempt to remove non-JNI local reference, dumping thread
2019-02-11 00:01:28.063 5945-5945/io.ionic.starter I/chatty: uid=10080(io.ionic.starter) identical 3 lines
2019-02-11 00:01:28.110 5945-5945/io.ionic.starter W/zygote: Attempt to remove non-JNI local reference, dumping thread

Chrome 调试器显示：

TypeError: Cannot read property 'apply' of null
    at vendor.js:88820
    at NgRedux.push../node_modules/ng2-redux/lib/components/ng-redux.js.NgRedux.configureStore (vendor.js:87925)
    at new AppModule (main.js:1511)
    at _createClass (vendor.js:56970)
    at _createProviderInstance (vendor.js:56940)
    at initNgModule (vendor.js:56873)
    at new NgModuleRef_ (vendor.js:57600)
    at createNgModuleRef (vendor.js:57589)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (vendor.js:59420)
    at NgModuleFactory_.push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (vendor.js:60124)
vendor.js:75947 Ionic Native: deviceready event fired after 776 ms

Answer 1

将其放入您的 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/platforms/android/app/build/outputs/apk/debug/app-debug.apk

这应该可以工作，启动画面后不会卡住白屏

Answer 2

调试您的应用程序并检查其是否显示任何错误应用程序卡在白屏主要是因为应用程序中的错误

Answer 3

我已经通过在 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() 指令中，我所做的只是 Splashscreen.hide() 然后运行 android 上的项目使用。

ionic cordova run android

Answer 4

找到解决方案。问题出在 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);
    }
  }

NOTED!!! the setTimeout delay should be equal to FadeSplashScreenDuration param value in config.xml

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

Answer 5

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

当 App 初始化时，它会尝试打开默认路由，即空路由，我们进一步将其重定向到实际工作路由，在我的例子中，空路由被重定向到“/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] 未处于活动状态的路由，即“/登录”在我的例子中。通过重定向到 [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构建项目后，应用成功运行。

刚刚发布了答案，如果有人和我一样遇到同样的问题。

Answer 6

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);
        });

Answer 7

在我的例子中，它与 android 平台配置有关。我做了以下事情来解决这个问题：

删除 android 文件夹（在您的项目目录或平台目录下。）
运行命令添加 android 作为平台。

npx cap add android

以上命令适用于带有电容器的离子。如果您使用的是 cordova，则可以使用常规命令。

打开 Android Studio 并创建 APK。此 APK 应按预期运行。

Answer 8

如果更改 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 9

如果你仍然在这里没有答案，我就是这样解决的。

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

如果构建、运行然后进入白屏，请设置 chrome 开发者模式，然后打开以下页面。

chrome://inspect/#devices

检查控制台日志是否有任何错误，并根据需要修复它们。奇怪的是它在普通的网络浏览器中运行得很好。

注意：--optimization=false 标志很重要，可以让您轻松阅读错误。

祝你好运

为什么在 Ionic 4 启动画面后出现白屏？

Why white screen stuck after splash screen in Ionic 4?

ionic-framework

ionic2

ionic3

angular

ionic4