Reactjs 构建爱奥尼亚4闪屏，没有'；什么也不做（不起作用）

我在制作爱奥尼亚4的闪屏时遇到了麻烦。它什么都不做， 寻找答案，尤其是在app.component.ts中。 在《爱奥尼亚4》中没有关于如何制作闪屏的内容。 我试过使用

this.hide

和

this.show

如果有人能帮我弄清楚如何在ionic 4中创建一个初始屏幕，那么它仍然不起作用

Splash.ts

import { ModalController } from '@ionic/angular';
import { Component, OnInit } from '@angular/core';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';



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


  constructor( public splashScreen: SplashScreen, public modalCtrl: ModalController) {

  }

  ionViewDidEnter() {

    this.splashScreen.hide();

    setTimeout(() => {
      this.modalCtrl.dismiss();
    }, 4000);

  }

  ngOnInit() {

  }

}

import { Tab1Page } from './tab1/tab1.page';
import { SplashPage } from './splash/splash.page';
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';


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

    rootPage:any = SplashPage;

    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, 
public modalCtrl: ModalController) {

        platform.ready().then(async () => {

            statusBar.styleDefault();

              const splash = this.modalCtrl.create({component:SplashPage,
              componentProps:{splash: SplashPage}});
               (await splash).present();

        });

    }

}

.sk-folding-cube {
 margin: 20px auto;
 margin-top: 80%;
 width: 40px;
 height: 40px;
 position: relative;
 -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
} 
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
 .sk-folding-cube .sk-cube3:before {
   -webkit-animation-delay: 0.6s;
           animation-delay: 0.6s; 
 }
 .sk-folding-cube .sk-cube4:before {
   -webkit-animation-delay: 0.9s;
           animation-delay: 0.9s;
 }
 @-webkit-keyframes sk-foldCubeAngle {
   0%, 10% {
     -webkit-transform: perspective(140px) rotateX(-180deg);
             transform: perspective(140px) rotateX(-180deg);
     opacity: 0; 
   } 25%, 75% {
     -webkit-transform: perspective(140px) rotateX(0deg);
             transform: perspective(140px) rotateX(0deg);
     opacity: 1; 
   } 90%, 100% {
     -webkit-transform: perspective(140px) rotateY(180deg);
             transform: perspective(140px) rotateY(180deg);
     opacity: 0; 
   } 
 }

 @keyframes sk-foldCubeAngle {
   0%, 10% {
     -webkit-transform: perspective(140px) rotateX(-180deg);
             transform: perspective(140px) rotateX(-180deg);
     opacity: 0; 
   } 25%, 75% {
     -webkit-transform: perspective(140px) rotateX(0deg);
             transform: perspective(140px) rotateX(0deg);
     opacity: 1; 
   } 90%, 100% {
     -webkit-transform: perspective(140px) rotateY(180deg);
             transform: perspective(140px) rotateY(180deg);
     opacity: 0; 
   }
 }

 ion-content {
   --background: rgb(57, 201, 194);
  }

应用程序组件.ts

import { ModalController } from '@ionic/angular';
import { Component, OnInit } from '@angular/core';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';



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


  constructor( public splashScreen: SplashScreen, public modalCtrl: ModalController) {

  }

  ionViewDidEnter() {

    this.splashScreen.hide();

    setTimeout(() => {
      this.modalCtrl.dismiss();
    }, 4000);

  }

  ngOnInit() {

  }

}

import { Tab1Page } from './tab1/tab1.page';
import { SplashPage } from './splash/splash.page';
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';


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

    rootPage:any = SplashPage;

    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, 
public modalCtrl: ModalController) {

        platform.ready().then(async () => {

            statusBar.styleDefault();

              const splash = this.modalCtrl.create({component:SplashPage,
              componentProps:{splash: SplashPage}});
               (await splash).present();

        });

    }

}

.sk-folding-cube {
 margin: 20px auto;
 margin-top: 80%;
 width: 40px;
 height: 40px;
 position: relative;
 -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
} 
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
 .sk-folding-cube .sk-cube3:before {
   -webkit-animation-delay: 0.6s;
           animation-delay: 0.6s; 
 }
 .sk-folding-cube .sk-cube4:before {
   -webkit-animation-delay: 0.9s;
           animation-delay: 0.9s;
 }
 @-webkit-keyframes sk-foldCubeAngle {
   0%, 10% {
     -webkit-transform: perspective(140px) rotateX(-180deg);
             transform: perspective(140px) rotateX(-180deg);
     opacity: 0; 
   } 25%, 75% {
     -webkit-transform: perspective(140px) rotateX(0deg);
             transform: perspective(140px) rotateX(0deg);
     opacity: 1; 
   } 90%, 100% {
     -webkit-transform: perspective(140px) rotateY(180deg);
             transform: perspective(140px) rotateY(180deg);
     opacity: 0; 
   } 
 }

 @keyframes sk-foldCubeAngle {
   0%, 10% {
     -webkit-transform: perspective(140px) rotateX(-180deg);
             transform: perspective(140px) rotateX(-180deg);
     opacity: 0; 
   } 25%, 75% {
     -webkit-transform: perspective(140px) rotateX(0deg);
             transform: perspective(140px) rotateX(0deg);
     opacity: 1; 
   } 90%, 100% {
     -webkit-transform: perspective(140px) rotateY(180deg);
             transform: perspective(140px) rotateY(180deg);
     opacity: 0; 
   }
 }

 ion-content {
   --background: rgb(57, 201, 194);
  }

Splash.html

<ion-header>

</ion-header>


<ion-content>
 <div class="sk-folding-cube">
  <div class="sk-cube1 sk-cube"></div>
  <div class="sk-cube2 sk-cube"></div>
  <div class="sk-cube4 sk-cube"></div>
  <div class="sk-cube3 sk-cube"></div>
</div>
</ion-content>

---

首先，使用以下行更新config.xml文件

<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="ShowSplashScreen" value="true" />

在

app.component.ts

中，我们导入了一个RxJS计时器，它将在3000毫秒后切换覆盖的可见性

import { timer } from 'rxjs/observable/timer';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  // ...omitted

  showSplash = true; // <-- show animation

  initializeApp() {
    this.platform.ready().then(() => {

      this.statusBar.styleDefault();
      this.splashScreen.hide();  // <-- hide static image

      timer(3000).subscribe(() => this.showSplash = false) // <-- hide animation after 3s
    });
  }
}

从'rxjs/observable/timer'导入{timer}；
@组成部分({
templateUrl:'app.html'
})
导出类MyApp{
//…省略
showSplash=true；//{
this.statusBar.styleDefault（）；
this.splashScreen.hide（）；//this.showssplash=false）//您想创建带有动画的自定义飞溅吗？还是使用启动屏幕插件？我想创建带有动画的自定义飞溅，该动画在应用程序准备就绪时或在短时间后消失，它说“SplashPage”类型上不存在属性“statusBar”。对于平台，您可以这样做吗确保已安装并注入插件。请检查此处的参考：