在具有颜色的容器内创建一个不透明度为 0 的“洞” - css on react native（QR 扫描仪的布局）

Posted 2023-03-05

【中文标题】在具有颜色的容器内创建一个不透明度为 0 的“洞” - css on react native（QR 扫描仪的布局）

【英文标题】：Creating a "hole" with 0 opacity inside a container with color - css on react native (Layout for a QR scanner)

【发布时间】：2020-03-19 20:15:40

【问题描述】：

我正在使用 react-native-camera，所以我可以扫描 QR，这很好用。 在相机的顶部，我想要不透明的白色，屏幕中间应该有一个空白方块，表示用户应该扫描中间的 QR。 我正在努力做到这一点，因为当我将白屏布局放在空白方块的顶部时，没有看到空白方块。当我将空白方块放在布局顶部时，因为空白的不透明度为 0，所以看不到它。

如何创建一个屏幕，其中整个屏幕都有颜色但中间有一个“孔”？

为了帮助您准确了解我的需求，这就是我现在所处的位置：

我需要边框内的部分不透明度为 0

【问题讨论】：

白色不是简单的黑色方块？应该随处可见？

什么意思？我仍然需要正方形内部的不透明度为 0 - 只是按原样显示相机。

啊，所以你的意思是里面是透明的？

我相信你需要 SVG。

@Temani Ali 是的

【参考方案1】：

我最终通过使用 SVG 解决了这个问题。这是为碰巧在这里绊倒的人准备的。

我使用 react-native-svg 来为“洞”创建背景和蒙版：

const styles = StyleSheet.create(
container: 
    position: 'absolute',
    width: deviceWidth,
    height: deviceHeight,
,
layout: 
    position: 'absolute',
    width: deviceWidth,
    height: deviceHeight,
    zIndex: 2,
,
camera: 
    position: 'absolute',
    width: deviceWidth,
    height: deviceHeight,
    zIndex: 1,

)

const QrScannerLayout = () => (
<View style=styles.layout>
    <Svg  >
        <Defs>
            <Mask id="mask" x="0" y="0"  >
                <Rect   fill='white' opacity=0.8 />
                <Rect
                    x=(deviceWidth / 2) - (QR_SCAN_SQUARE_SIZE / 2)
                    y=(deviceHeight / 2) - (QR_SCAN_SQUARE_SIZE / 2)
                    rx='50'
                    ry='50'
                    width=QR_SCAN_SQUARE_SIZE
                    height=QR_SCAN_SQUARE_SIZE
                    stroke='white'
                    strokeWidth="5"
                    fill-opacity="0"
                />
            </Mask>
        </Defs>
        <Rect   mask="url(#mask)" fill='white' />
    </Svg>
</View>

);

    render() 
    return (
        <View style=styles.container>
            <QrScannerLayout />
            <RNCamera
                ref=ref => 
                    this.camera = ref;
                
                captureAudio=false
                onBarCodeRead=this.barcodeRecognized
                style=styles.camera
            >
            </RNCamera>
        </View>
    );

【参考方案2】：

在您选择的居中元素上使用巨大的box-shadow。

body 
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  height: 100vh;


.box 
  width: 50vw;
  height: 50vh;
  border: 2px solid white;
  border-radius: 5vh;
  box-shadow: 0 0 0 2000px rgba(255, 255, 255, .5)

<div class="box"></div>

【讨论】：

不适用于 react-native。没有盒子阴影。有阴影不适用于 android，所以这对我来说不是解决方案。谢谢

【参考方案3】：

我找到了答案： 把它放在你的 customMarker 属性中

import Dimensions from "react-native";

let devicewidth=Dimensions.get("window").width
render() 
    return (
        <View>
            <QRCodeScanner 
                showMarker            
                customMarker=
                    <View style=flex:1>
                        <View style=flex:1,backgroundColor:"rgba(0,0,0,0.3)"/>
                        <View style=width:devicewidth,
                            height:devicewidth,
                            borderColor:"rgba(0,0,0,0.3)",
                            borderWidth:devicewidth/6,
                        >
                            <View style=flex:1,borderColor:"red",borderWidth:1/>
                        </View>
                        <View style=flex:1,backgroundColor:"rgba(0,0,0,0.3)"/>
                    </View>
                />
         </View>
     )

那么你可以在borderWidth属性上设置洞的大小(borderwidth:devicewidth/how big you want the hole to be)