电容器和离子本机状态栏

Question

我已经创建了 Ionic 4 Capacitor 应用程序。它默认显示这个并且没有 Cordova 插件。

package.json

   "@ionic-native/splash-screen": "^5.0.0",
   "@ionic-native/status-bar": "^5.0.0",

app.component.ts

 async initializeApp(): Promise<void> {
    await this.platform.ready();

    this.statusBar.styleDefault();
    this.splashScreen.hide();

  }

但是 Capacitor 文档说它在哪里 not compatible with it。我是否需要删除此原生插件并使用 Capacitor 实现，或者因为这里没有 Cordova，这不会有问题吗？

Answer 1

电容器声明与 cordova 插件不兼容，因为它提供了自己的 cordova-plugin-statusbar (not needed, Capacitor has its own) 因此，我建议您应该使用电容器中的那个。

与此类似的内容：

const { SplashScreen, StatusBar } = Plugins;
try {
  await SplashScreen.hide();
  await StatusBar.setStyle({ style: StatusBarStyle.Light });
} catch (err) {
  console.log('This does not have influence on the browser', err);
}

Answer 2

我们正在努力更新入门应用模板 - 很快，它们将默认为 Capacitor API。

我认为这两个确实与 Cap 一起工作，但正如 Ricardo 所写，我们的建议是使用 Capacitor API。

这是我在我们的 sample apps 之一中使用的内容：

import { Component } from '@angular/core';
import { Plugins } from '@capacitor/core';
const { SplashScreen } = Plugins;

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

  initializeApp() {
    /* To make sure we provide the fastest app loading experience 
       for our users, hide the splash screen automatically 
       when the app is ready to be used:

        https://capacitor.ionicframework.com/docs/apis/splash-screen#hiding-the-splash-screen
    */
    SplashScreen.hide();
  }
}

Answer 3

四处寻找都没有找到解决方法。

但在试用 Xcode 之后，我发现了一个临时解决方案。

您将不得不使用 Xcode 中的本机代码更改状态栏颜色...这是我唯一可以提供的解决方案

电容器和离子本机状态栏

Capacitor and Ionic native status-bar

cordova

ionic-native

angular

ionic4

capacitor