我用的是反應原生相機套件。我想使用戶界面將有背景顏色的陰影區域:“rgba(249，250，251，0.7)”和該區域內應該有一個QR框，將有透明的背景。我很難做到這一點，因為我不擅長CSS。目前看起來是這樣的以下是我正在做的事情:

import React from 'react';

import { View, StyleSheet } from 'react-native';
import { Camera, CameraType } from 'react-native-camera-kit';

type Props = {
  cameraType: CameraType;
};

QRScanner.defaultProps = {
  cameraType: CameraType.Front,
};

export default function QRScanner({
  cameraType,
}: Props) {
  const renderMyCamera = () => (
    <View style={styles.container}>
      <Camera
        testID="camera"
        cameraType={cameraType}
        style={{ flex: 1, width: '100%' }}
        torchMode="off"
        scanBarcode
        frameColor="white"
        onReadCode={() => () => {}}
      />
    </View>
  );

  const renderQRScanUI = () => (
    <View style={styles.outerArea}>
      <View style={styles.frame} />
      <View style={styles.maskCenter}>
        <View style={styles.frame} />
        <View
          style={[styles.qrBox, styles.qrBoxPortrait]}
        />
        <View style={styles.frame} />
      </View>
      <View style={styles.frame} />
    </View>
  );

  return (
    <>
      {renderMyCamera()}
      {renderQRScanUI()}
    </>
  );
}

我的樣式表:

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    width: '100%',
    height: '100%',
  },
  outerArea: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'space-around',
    backgroundColor: 'rgba(249, 250, 251, 0.7)',
  },
  frame: {
    flex: 1,
  },
  maskCenter: {
    flexDirection: 'row',
    height: 350,
  },
  qrBox: {
    width: 350,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.2)',
    borderRadius: 10,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    borderBottomLeftRadius: 20,
    borderBottomRightRadius: 20,
  },
  qrBoxPortrait: {
    transform: [{ translateY: -100 }],
  },
});

當我嘗試創建qrbox & quot背景透明或rgba(0，0，0，0.0)。所以我把外面的區域變暗了，但是我想讓它透明。如何實現？