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

里兹万·艾哈迈德·希瓦利

我正在使用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的条形码,但是它也不是很好的实现方式

basbase

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

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>;

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使条形码扫描仪从数据库中检查条形码编号?

来自分类Dev

如何从C#Winforms中的条形码扫描仪读取条形码值

来自分类Dev

蓝牙条形码扫描仪的解码输出

来自分类Dev

Rails应用的条形码扫描仪

来自分类Dev

从Swing中的条形码扫描仪读取

来自分类Dev

Winforms按键和条形码扫描仪

来自分类Dev

Xamarin形成条形码扫描仪

来自分类Dev

片段中的条形码扫描仪

来自分类Dev

蓝牙条形码扫描仪的解码输出

来自分类Dev

从条形码扫描仪iOS 7保存图像

来自分类Dev

Worklight 6.1-条形码扫描仪插件

来自分类Dev

Phonegap条形码扫描仪失败Jasmine错误

来自分类Dev

片段中的条形码扫描仪

来自分类Dev

符号条形码扫描仪-不起作用

来自分类Dev

Xamarin形成条形码扫描仪

来自分类Dev

浏览器的QR /条形码扫描仪

来自分类Dev

在IOS中实施条形码扫描仪

来自分类Dev

条形码扫描仪仅显示条形码的第一位

来自分类Dev

条形码扫描仪仅显示条形码的第一位

来自分类Dev

如何设置条形码扫描仪的多种格式或排除成对格式?

来自分类Dev

Javascript:如何最好地阅读手持式条形码扫描仪?

来自分类Dev

如何在IBM Worklight的多个平台上实施条形码扫描仪?

来自分类Dev

如何使用Android Mobile与CT10蓝牙条形码扫描仪连接?

来自分类Dev

如何将GitHub的条形码扫描仪项目导入Eclipse

来自分类Dev

如何在phonegap构建中从条形码扫描仪打开URL

来自分类Dev

如何从条形码扫描仪解码原始数据(非ASCII字符)

来自分类Dev

如何在其他地方使用条形码扫描仪的结果?

来自分类Dev

我如何从条形码扫描仪设备获取产品信息

来自分类Dev

如何在IBM Worklight的多个平台上实现条形码扫描仪?

Related 相关文章

热门标签

归档