在 nativescript ios 中启动画面后显示白屏答案

【问题标题】：white screen displayed after splashscreen in nativescript ios在 nativescript ios 中启动画面后显示白屏
【发布时间】：2017-09-18 12:58:31
【问题描述】：

在nativescript ios中，闪屏几秒钟后显示白屏。它只发生在我们的项目中，但示例项目运行良好。我检查了模拟器和 iPhone 5、iPhone 6、iPad mini，所有设备都显示白屏。我正在使用带有 Angular 4 的 Nativescript，在这里我包含了我的 package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "com.preludesys.calladoc",
    "tns-ios": {
      "version": "3.1.0"
    }
  },
  "scripts": {
    "tslint": "tslint -p tsconfig.json",
    "ns-bundle": "ns-bundle",
    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
    "start-android-bundle": "npm run ns-bundle --android --run-app",
    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  },
  "dependencies": {
    "@angular/animations": "~4.1.0",
    "@angular/common": "~4.1.0",
    "@angular/compiler": "~4.1.0",
    "@angular/core": "~4.1.0",
    "@angular/forms": "~4.1.0",
    "@angular/http": "~4.1.0",
    "@angular/platform-browser": "~4.1.0",
    "@angular/router": "~4.1.0",
    "nativescript": "^3.2.0",
    "nativescript-angular": "~3.0.0",
    "nativescript-camera": "^3.0.1",
    "nativescript-drop-down": "^3.1.0",
    "nativescript-google-maps-sdk": "^2.3.2",
    "nativescript-imagepicker": "^3.0.6",
    "nativescript-iqkeyboardmanager": "^1.1.0",
    "nativescript-loading-indicator": "^2.3.2",
    "nativescript-phone": "^1.3.1",
    "nativescript-ripple": "^2.0.0",
    "nativescript-telerik-ui": "^3.0.4",
    "nativescript-theme-core": "~1.0.2",
    "nativescript-unit-test-runner": "^0.3.4",
    "nativescript-xml2js": "^0.5.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.3.0",
    "tns-core-modules": "^3.1.1",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.1.0",
    "@ngtools/webpack": "^1.3.0",
    "babel-traverse": "6.24.1",
    "babel-types": "6.24.1",
    "babylon": "6.17.1",
    "codelyzer": "^3.0.1",
    "copy-webpack-plugin": "~4.0.1",
    "extract-text-webpack-plugin": "~2.1.0",
    "filewalker": "^0.1.3",
    "jasmine-core": "^2.6.2",
    "karma": "^1.7.0",
    "karma-jasmine": "^1.0.2",
    "karma-nativescript-launcher": "^0.4.0",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-typescript": "~0.4.0",
    "nativescript-dev-webpack": "next",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.0.2",
    "tslint": "^5.4.2",
    "typescript": "~2.2.1",
    "webpack": "~2.6.1",
    "webpack-bundle-analyzer": "^2.8.2",
    "webpack-sources": "~1.0.1",
    "nativescript-worker-loader": "~0.8.1"
  }
}

我不知道是什么问题以及如何解决它。所以请 j=帮助我。

【问题讨论】：

标签： ios angular nativescript

【解决方案1】：

您应该重复启动屏幕的布局或稍微不同的版本（带有微调器和正在加载...消息）硬编码，一旦实际加载应用程序就会被删除或绘制。这将在启动屏幕和加载的应用程序之间提供流畅而专业的过渡。

【讨论】：

【解决方案2】：

在初始页面加载期间，iOS 上会出现这个简短的“启动画面后的启动画面”。

你无法避免它。但是，您可以使用以下代码更改全局 CSS 文件中的颜色：

Page {
  background-color: black;
}

【讨论】：

【解决方案3】：

在我们的应用中，在添加了一些“重”插件（如 nativescript-telerik-ui、nativescript-google-maps-sdk 等）后，这个白屏变得更加突出。

旧的（慢速）Android 设备也会发生这种情况。

这似乎是不可避免的，这是一个耻辱，真的。您可以尝试的一件事是使用 Webpack、延迟加载等优化加载时间，从而使应用加载更快。

还建议在启动时以编程方式更改页面背景颜色。

【讨论】：

【解决方案4】：

我正在使用框架，我找到了使框架背景与初始屏幕相同的解决方案

Frame {
    background:#4285F4;
}

【讨论】：

【解决方案5】：

要使其也能在 Android {N}7 上运行，请执行以下操作：

frame.ns-root {
    background-color: black;
}

【讨论】：