如何使条码扫描器的中心透明？

Question

我正在使用 expo-barcode-scanner 创建条码扫描器

我创建了下面的屏幕，整个屏幕是透明的

我正在尝试创建下面的屏幕，只有 QR 码方块是透明的

<BarCodeScanner
  style={styles.mainContainer}>
  <TouchableOpacity
    onPress={() => {
      navigation.navigate('Home')
    }}
    style={styles.backButton}
  >
    <Entypo
      style={{ color: Colors.SAWhite }}
      name="chevron-thin-left"
      size={25}
    />
  </TouchableOpacity>

  <View style={styles.qrContainer}></View>

  <View style={styles.messageBox}>
    <FontAwesomeIcon
      name="qrcode"
      size={50}
      style={isValid ? styles.initialColor : styles.errorColor}
    />
    {isValid ? (
      <Text style={[fonts.SemiBoldTitle, styles.initialColor]}>
        {Languages.Scanner.initialMessage}
      </Text>
    ) : (
      <Text style={[fonts.SemiBoldTitle, styles.errorColor]}>
        {Languages.Scanner.errorMessage}
      </Text>
    )}
  </View>
</BarCodeScanner>

样式

const styles = StyleSheet.create({
  mainContainer: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
  },
  backButton: {
    alignSelf: 'flex-start',
    marginLeft: '5%',
  },
  qrContainer: {
    width: 220,
    height: 220,
    borderColor: Colors.SAWhite, //white
    borderWidth: 1,
    margin: '10%',
  },
  messageBox: {
    width: '85%',
    height: '30%',
    backgroundColor: Colors.SAWhite,
    borderColor: Colors.SABlack,
    borderWidth: 1,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'space-evenly',
  },
  initialColor: {
    color: Colors.SASecondary,//grey
    textAlign: 'center',
    marginLeft: '10%',
    marginRight: '10%',
  },
  errorColor: {
    color: Colors.SARed,
    textAlign: 'center',
    marginLeft: '10%',
    marginRight: '10%',
  }, 
})

我试图将它包裹在一个视图周围，但它也使中心框变成了彩色

我已经试过了expo's barcode code但是也不是很好的实现

Answer 1

您可以使用多个绝对定位视图在透明部分周围构建叠加层，将中心留空。

const scanOverlay = {
    position:        'absolute',
    backgroundColor: 'rgba(255,0,0,0.5)',
};

<View>
    <Camera />
    <View style={StyleSheet.absoluteFill}>
        <View style={[scanOverlay, {top: 0, left: 0, width: '25%', bottom: 0}]} />
        <View style={[scanOverlay, {top: 0, left: '25%', right: '25%', height: '25%'}]} />
        <View style={[scanOverlay, {bottom: 0, left: '25%', right: '25%', height: '25%'}]} />
        <View style={[scanOverlay, {top: 0, right: 0, width: '25%', bottom: 0}]} />
    </View>
</View>;

如何使条码扫描器的中心透明？

How to make center of barcode scanner transparent?

barcode-scanner

reactjs

react-native

expo