reactjs - 如何使条码扫描器的中心透明?
问题描述
我正在使用 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%',
},
})
我试图将它包裹在一个视图周围,但它也使中心框变为彩色
我已经尝试过世博会的条形码,但也不是很好的实现
解决方案
您可以使用多个绝对定位视图在透明部分周围建立覆盖,将中心留空。
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>;
推荐阅读
- c# - 在数据库 Jquery 中添加 CheckBox 检查值
- vue.js - toggle class conditionally in Vue.js
- selenium - 自动化测试用例的行业标准是什么?
- spyder - 如何更新 Spyder 3.3.0
- reactjs - 如何配置 webpack2?
- c++11 - 如何获得 boost::mpl::map 的 *any* 示例?
- javascript - Formik & yup 表单验证无法在 VirtualizedSelect 中按预期工作
- reactjs - React Firebase Hosting 部署空白页面
- jquery - 通过 jquery 中的索引相互更改两个选择框选项
- php - PHP - 创建类的实例(数组参数)