从手机本身设置的暗模式下的离子电容器 QR 扫描仪黑屏

Posted 2023-03-16

【中文标题】从手机本身设置的暗模式下的离子电容器 QR 扫描仪黑屏

【英文标题】：Ionic Capacitor QR Scanner black screen on DARK MODE set from phone itself

【发布时间】：2021-11-05 14:17:54

【问题描述】：

我在黑暗模式下使用 QR 扫描仪出现问题，在浅色模式下屏幕是黑色的，通过一些 css 调整它可以工作，但在从设备本身而不是从应用程序中选择的黑暗模式下却没有。

使用的插件：https://github.com/bitpay/cordova-plugin-qrscanner

我将这个类名添加到IonPage 和IonContent

.cameraView 
  background: transparent;
  background-color: transparent !important;
  --background: transparent !important;
  --ion-background-color: transparent !important;

Ionic:

   Ionic CLI       : 6.17.0 (/Users/byurhanbeyzat/.nvm/versions/node/v16.3.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.7.0

Capacitor:

   Capacitor CLI      : 3.1.2
   @capacitor/android : 3.2.2
   @capacitor/core    : 3.2.2
   @capacitor/ios     : 3.2.2

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.4.1) : 1.4.0

System:

   NodeJS : v16.3.0 (/Users/byurhanbeyzat/.nvm/versions/node/v16.3.0/bin/node)
   npm    : 7.21.1
   OS     : macOS Big Sur

【参考方案1】：

在他们的 github 中提出了一个关于此的问题，但它仍然是开放的，所以我猜他们还没有解决这个问题。您可以尝试查看此link 并查看他们的解决方法。

提到的一种可能的解决方法是使用下面的代码在 QRScanner.java 的第 473 行手动设置后台模式。

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

注意：如果您愿意更改插件，我建议您尝试使用 Ionic Native Plugin BarcodeScanner。

【讨论】：

我看到了这个解决方法，但它对我不起作用，但我会在今天晚些时候再试一次。我也尝试过barcodescanner，但它无法自定义ui（文本/按钮等）我不太喜欢它