防溅屏后的白色屏幕，Ionic2，安卓设备

Question

我目前正在开发Ionic2应用程序。我面临的一个问题是，在Splash屏幕之后，在应用程序主屏幕之前，会有6-7秒的白色屏幕。

我试过在谷歌上搜索，但什么都不管用。我最后一次尝试解决

hideSplashScreen() {
if(Splashscreen){
setTimeout(() => {
Splashscreen.hide();
},100)
}
};//
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="FadeSplashScreenDuration" value="300"/>

请在这个问题上帮助我；

编辑：：我的ionic info是

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.8.6 
OS: OS X El Capitan
Node Version: v6.3.1
Xcode version: Xcode 7.2 Build version 7C68

Answer 1

默认情况下，启动屏幕在3秒钟后隐藏(请参阅https://github.com/apache/cordova-plugin-splashscreen#configxml)。但可能是此时此刻你的应用程序还没有准备好。

因此，我总是在config.xml中添加以下首选项：

<preference name="AutoHideSplashScreen" value="false"/>

相反，我会在应用程序准备好后手动隐藏它：

this.platform.ready().then(() => {
Splashscreen.hide();
});

这适用于iOS和Android。

Answer 2

更新Ionic项目并更改一些偏好对我来说很有用。

这里是变更日志和信息。

1-更新至Ionic CLI、Cordova和Typescript:的最新版本

npm uninstall -g ionic cordova typescript
npm install -g ionic cordova typescript

2-更新package.json以匹配以下依赖项，删除现有的node_modules目录，然后运行npm install:

"scripts": {
"build": "ionic-app-scripts build",
"clean": "ionic-app-scripts clean",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "4.0.2",
"@angular/compiler": "4.0.2",
"@angular/compiler-cli": "4.0.2",
"@angular/core": "4.0.2",
"@angular/forms": "4.0.2",
"@angular/http": "4.0.2",
"@angular/platform-browser": "4.0.2",
"@angular/platform-browser-dynamic": "4.0.2",
"@ionic-native/core": "3.6.1",
"@ionic-native/in-app-browser": "3.6.1",
"@ionic-native/splash-screen": "3.6.1",
"@ionic-native/status-bar": "3.6.1",
"@ionic/storage": "2.0.1",
"ionic-angular": "3.1.1",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "0.8.9"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.6",
"typescript": "2.3.2"
}

3-用这些偏好更新config.xlm(实时评论可以)：

<preference name="loadUrlTimeoutValue" value="700000"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="StatusBarStyle" value="default"/>
<preference name="SplashScreen" value="screen"/>
<preference name="orientation" value="default"/>
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="FadeSplashScreenDuration" value="300"/>
<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
<preference name="SplashScreenDelay" value="3000"/>

4-然后我把最近修改过的一些代码复制/粘贴到我的项目中(Ionic 2演示和最新的应用程序-查看Github)。

现在应用程序在没有长屏幕的情况下成功启动。

ps:

• 肝脏视图：ionic run android -l
• 生产：ionic run android --prod --release
• 请记住，您必须手动隐藏app.component.ts:this.platform.ready().then(() => { Splashscreen.hide(); });中的防溅屏(如@Markus Wagner所说)

编辑：更新至Ionic v3.1.1(2017-04-28)

Answer 3

在以下任何CLI命令期间添加--prod标志：

// If iOS
ionic emulate ios --prod
ionic build ios --prod
ionic run ios --prod

// If Android
ionic emulate android --prod
ionic build android --prod
ionic run android --prod

为给定平台构建(准备+编译)Ionic项目的更多信息https://ionicframework.com/docs/cli/cordova/build/

Answer 4

我通过在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()；