启动画面、Ionic2、Android 设备后的白屏 [英] White screen after splashscreen, Ionic2, android device
问题描述
我目前正在开发 Ionic2 应用程序.我遇到的问题是在启动屏幕之后，在应用主屏幕之前有 6-7 秒的白屏.
我尝试了一些谷歌搜索，但没有任何效果.我最后一次尝试解决的是
hideSplashScreen() {如果(启动画面){设置超时(() => {闪屏.hide();},100)}};//请帮我解决这个问题；
: 我的 ionic info 是
Cordova CLI:6.4.0离子框架版本:2.0.0-rc.4离子 CLI 版本:2.1.17离子应用程序库版本:2.1.7离子应用脚本版本:0.0.47ios-部署版本:1.8.6操作系统:OS X El Capitan节点版本:v6.3.1Xcode 版本:Xcode 7.2 构建版本 7C68更新 Ionic 项目 并更改一些首选项对我有用.
这里是变更日志和信息.
1 - 更新到最新版本的 Ionic CLI、Cordova 和 Typescript:
npm uninstall -g ionic cordova typescriptnpm install -g ionic cordova typescript2 - 更新您的 package.json 以匹配以下依赖项，删除现有 node_modules 目录，然后运行 npm install:
"脚本": {"build": "ionic-app-scripts build","clean": "ionic-app-scripts clean","ionic:build": "ionic-app-scripts build",离子:服务":离子应用脚本服务"},依赖":{"@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",离子角":3.1.1"，离子":3.0.0"，rxjs":5.1.1"，"sw 工具箱": "3.4.0",zone.js":0.8.9"},开发依赖":{"@ionic/app-scripts": "1.3.6",打字稿":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"/>4 - 然后我从这里 进入我的项目(Ionic 2 演示和最新的应用程序 - 检查 Github).
现在应用程序成功启动，没有长的启动画面.
ps:
- livereview:
ionic run android -l - 生产:
ionic run android --prod --release - 请记住，您必须在 app.component.ts 中手动隐藏启动画面(如 @Markus Wagner 所说):
this.platform.ready().then(() => { Splashscreen.hide(); });
更新到 Ionic v3.1.1 (2017-04-28)
I am currently developing Ionic2 app. I face a problem that after Splash screen, there is a white screen for 6-7 seconds, before app home screen.
I tried some googling but nothing works. My last attempt to solve is
hideSplashScreen() {
if(Splashscreen){
setTimeout(() => {
Splashscreen.hide();
},100)
}
};//
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="FadeSplashScreenDuration" value="300"/>
Please help me in this issue;
EDIT:: My ionic info is
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
Updating Ionic project and change some preferences did the trick for me.
Here the changelog and infos.
1 - Update to the latest version of the Ionic CLI, Cordova and Typescript:
npm uninstall -g ionic cordova typescript
npm install -g ionic cordova typescript
2 - Update your package.json to match the following dependencies, remove existing node_modules directory, and then run 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 - Update your config.xlm with these preferences (live review is ok):
<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 - Then I have copy/pasted some code that had been modified recently from here into my project (Ionic 2 demo and up to date app - Check the Github).
Now the application starts successfully without long splashscreen.
ps:
- livereview:
ionic run android -l - production:
ionic run android --prod --release - Remember that you have to hide manually the splashscreen (like @Markus Wagner said) in your app.component.ts:
this.platform.ready().then(() => { Splashscreen.hide(); });
EDIT: Update to Ionic v3.1.1 (2017-04-28)
这篇关于启动画面、Ionic2、Android 设备后的白屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
