javascript - Creating a "hole" with 0 opacity inside a container with color - css on react native (Layout for

admin管理员组

文章数量:1317909

I am using react-native-camera so I could scan QRs, this works fine. On top of the camera I would like to have white color with opacity and on the middle of the screen there should be a blank square to indicate that the user should scan the QR in the middle. I am struggling to do this because when I put the white screen layout on top than of the blank square than the blank square is not seen. When I put the blank square on top of the layout then because the blank is with opacity 0 it is not seen.

How can I create a screen where there is a color for the whole screen but a "Hole" in the middle of it?

To help you understand exactly what I need, this is where I am at right now:

I need for the part inside the border to have 0 opacity

I am using react-native-camera so I could scan QRs, this works fine. On top of the camera I would like to have white color with opacity and on the middle of the screen there should be a blank square to indicate that the user should scan the QR in the middle. I am struggling to do this because when I put the white screen layout on top than of the blank square than the blank square is not seen. When I put the blank square on top of the layout then because the blank is with opacity 0 it is not seen.

How can I create a screen where there is a color for the whole screen but a "Hole" in the middle of it?

To help you understand exactly what I need, this is where I am at right now:

I need for the part inside the border to have 0 opacity

• javascript
• html
• css
• reactjs
• react-native

Share Improve this question Follow edited Nov 24, 2019 at 16:21 Contentop asked Nov 24, 2019 at 10:10 ContentopContentop 1,26133 gold badges2525 silver badges4545 bronze badges 5

• white not simple a black square? it should be seen everywhere? – Temani Afif Commented Nov 24, 2019 at 10:47
• What do you mean? I still need the inside of the square to have 0 opacity - just showing the camera as it is. – Contentop Commented Nov 24, 2019 at 10:50
• ah so you mean the inside to be transparent? – Temani Afif Commented Nov 24, 2019 at 10:55
• You need SVG, I believe. – user9408899 Commented Nov 24, 2019 at 11:06
• @Temani Ali yes – Contentop Commented Nov 24, 2019 at 11:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Use a giant box-shadow on your chosen centered element.

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>

I solved it eventually by using SVG. This is for anyone that happens to stumble here.

I used react-native-svg in order to create the background and a mask for the "Hole":

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 height="100%" width="100%">
        <Defs>
            <Mask id="mask" x="0" y="0" height="100%" width="100%">
                <Rect height="100%" width="100%" 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 height="100%" width="100%" 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>
    );
}

I found the answer: put this in your customMarker property

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>
     )
}

then you can set the size of the hole on the borderWidth property(borderwidth:devicewidth/{how big you want the hole to be})

本文标签：