Ionic 5 电容器 Qr Code 相机视图未显示

Question

使用电容二维码包时黑屏

我正在使用 this 构建一个简单的 QrCode 扫描器但是我在调用 scan() 方法时一直黑屏

Answer 1

所以当调用 QrScanner.show() 时，webView 变得像

一样透明

SomeElement{
background : none transparent ;
}

但问题是离子不要使用“背景”而是使用“--背景”所以我所做的就是我把 Android Studio QRScanner.Java 第 473 行中的这一行：

webView.getView().setBackgroundColor(Color.TRANSPARENT);

在 global.scss 中：

ion-app.cameraView,
ion-app.cameraView ion-content,
ion-app.cameraView .nav-decor,
ion-app.cameraView ion-page {
  background: transparent none !important;
  --background :transparent none !important;
  --ion-background-color: none; // this is important
}

加载扫描仪时（就在 QRScanner.prepare() 之前）

(window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');

当然完成后返回正常视图

(window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');

希望这对某人有所帮助

Ionic 5 电容器 Qr Code 相机视图未显示

Ionic 5 capacitor Qr Code camera view not showing

css

qr-code

webview

capacitor

ionic5