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

mwg9r5ms 于 2023-04-03 发布在 Ionic

关注(0)|答案(2)|浏览(142)

我有问题与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

ionic-framework

来源：https://stackoverflow.com/questions/69109307/ionic-capacitor-qr-scanner-black-screen-on-dark-mode-set-from-phone-itself

2条答案

按热度按时间

wi3ka0sx1#

在他们的github上有一个关于这个问题的问题，但它仍然是开放的，所以我猜他们还没有解决这个问题。你可以尝试检查这个link，看看他们的解决方法。
提到的一个可能的解决方法是在www.example.com的QRScanner.java第473行用下面的代码手动设置后台模式。

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

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

赞(0）回复(0）举报 2023-04-03

ulydmbyx2#

问题是黑暗模式将主体背景颜色设置为黑色。当扫描QR码时，您可以使主体颜色透明，但这意味着您的整个应用程序都变得透明。
所以首先我去了variables.css，并确保不是body本身，而是里面的所有元素在黑暗模式下都变成了黑色：

.md body > * {
    --ion-background-color: #121212;
    --ion-background-color-rgb: 18,18,18;
}

然后从.md body {部分删除背景色。
现在您可以在扫描时简单地将离子含量背景颜色更改为透明，例如：

<ion-content color="{{ is_scanning ? '' : 'light' }}" [style.--background]="is_scanning ? '#00000000' : '#fff'">

赞(0）回复(0）举报 2023-04-03

我来回答

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

2条答案

相关问题

热门标签

最新问答