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

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

您可以使用多个绝对定位的视图在透明零件周围建立覆盖，而将中心留空。