Ionic 4启动页（Splash Screen）无法正常显示问题求助

Hey，我完全懂你现在的糟心——在Ionic 4里折腾启动页，写了自定义的modal，调用了SplashScreen的hide/show却完全没反应，找不到靠谱的官方指引确实头疼。咱们先拆解你的代码问题，再一步步搞定它。

问题根源分析 #

你的代码里有几个关键问题导致启动页失效：

1. Ionic 4已经废弃了rootPage的写法，你还在沿用旧版本的配置逻辑
2. 原生SplashScreen插件的自动隐藏逻辑没关，导致它在你的自定义modal加载前就消失了
3. 自定义启动页和原生启动页的控制逻辑没有配合好，时序混乱

分步解决方案 #

步骤1：确保原生SplashScreen插件配置正确 #

首先确认你已经安装了插件：

ionic cordova plugin add cordova-plugin-splashscreen
npm install @ionic-native/splash-screen

然后修改config.xml，强制关闭自动隐藏，给自定义启动页留足加载时间：

<!-- 核心配置，必须设置 -->
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="10000" /> <!-- 足够长的延迟，等我们手动隐藏 -->

<!-- 可选的动画配置 -->
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashShowOnlyFirstTime" value="false" />

注意：如果AutoHideSplashScreen是true，原生启动页会自动消失，你的自定义modal还没加载就看不到任何启动效果了

步骤2：重构app.component.ts的逻辑 #

把旧的rootPage写法删掉，改用Platform.ready()配合modal和路由来控制启动流程，同时统一管理原生启动页的显示隐藏：

import { Component } from '@angular/core';
import { Platform, ModalController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { SplashPage } from './splash/splash.page';
import { Router } from '@angular/router'; // 引入路由用于跳转主页

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {

  constructor(
    private platform: Platform,
    private statusBar: StatusBar,
    private splashScreen: SplashScreen,
    private modalCtrl: ModalController,
    private router: Router
  ) {
    this.initializeApp();
  }

  async initializeApp() {
    await this.platform.ready();
    this.statusBar.styleDefault();
    
    // 强制显示原生启动页（确保不会提前消失）
    this.splashScreen.show();

    // 创建并显示自定义启动页modal
    const modal = await this.modalCtrl.create({
      component: SplashPage,
      backdropDismiss: false // 禁止点击背景关闭启动页
    });
    await modal.present();

    // 监听modal关闭事件，完成后隐藏原生启动页并跳转到主页
    await modal.onDidDismiss();
    this.splashScreen.hide();
    await this.router.navigate(['/tabs']); // 替换成你的主页路由，比如'/tab1'
  }
}

步骤3：简化SplashPage的逻辑 #

把SplashPage里的SplashScreen依赖删掉，只保留modal关闭的逻辑，让app.component统一控制原生启动页：

import { ModalController } from '@ionic/angular';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-splash',
  templateUrl: './splash.page.html',
  styleUrls: ['./splash.page.scss'],
})
export class SplashPage implements OnInit {

  constructor(public modalCtrl: ModalController) { }

  ionViewDidEnter() {
    setTimeout(() => {
      this.modalCtrl.dismiss(); // 4秒后关闭自定义启动页
    }, 4000);
  }

  ngOnInit() {
  }

}

步骤4：确认路由配置正确 #

在app-routing.module.ts里，确保主页是默认路由，不要把SplashPage设为默认路由：

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: '',
    redirectTo: 'tabs',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

测试验证 #

现在运行ionic cordova run android或ionic cordova run ios，你会看到：

1. 首先显示原生SplashScreen
2. 弹出自定义的动画启动页，显示4秒
3. 启动页关闭后，隐藏原生SplashScreen并跳转到主页

这样就能完美解决启动页无效果的问题了。

内容的提问来源于stack exchange，提问作者Yousef Hamarsheh