问题描述
我想将扫描图标置于相机视图之外,我尝试使用<View style={{ position: 'absolute' }} />
,结果是扫描图标已被遮盖。
是否可以将扫描图标置于相机视图之外?
import React from 'react';
import { View,Text,Dimensions,StyleSheet,Image } from 'react-native';
import { RNCamera } from 'react-native-camera';
import { Translate } from '../../assets/translations';
const { width } = Dimensions.get('window');
import QRCodeIcon from '../../assets/image/qrcode.png';
const rectDimensions = width * 0.75; // this is equivalent to 255 from a 393 device width
const overlayColor = "#fff"; // this gives us a black color with a 50% transparency
const QRCodeScreen2 = () => {
return (
<View style={styles.container}>
<RNCamera
// ref={cam => {
// this.camera = cam;
// }}
onBarCodeRead={(data) => console.log('onBarCodeRead data',data)}
style={styles.cameraview}
// aspect={RNCamera.constants.Aspect.fill}
playSoundOnCapture
>
<View style={styles.rectangleContainer}>
<View style={{ position: 'absolute',top: 30,borderColor:'pink',borderWidth: 1 }}>
<Image source={QRCodeIcon} style={{ width: 300,height: 300 }} />
</View>
<View style={{ flexDirection: "row" }}>
<View style={styles.leftAndRightOverlay} />
<View style={styles.rectangle}>
</View>
<View style={styles.leftAndRightOverlay} />
</View>
<View style={styles.bottomOverlay} />
</View>
</RNCamera>
<View style={{ justifyContent: 'center',alignItems: 'center' }}>
<Text style={styles.textStyle}>Test</Text>
<Text style={styles.textStyle}>Test2</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,},cameraview: {
flex: 1,height: rectDimensions,width: rectDimensions,// justifyContent: 'center',alignSelf: 'center'
},rectangleContainer: {
flex: 1,alignItems: "center",justifyContent: "center",backgroundColor: "transparent",rectangle: {
height: rectDimensions,borderWidth: 0,borderColor: '#fff',backgroundColor: "transparent"
},bottomOverlay: {
flex: 3,height: width,width: width,backgroundColor: overlayColor,paddingBottom: width * 0.25
},leftAndRightOverlay: {
height: rectDimensions,textStyle: {
fontFamily: 'PingFang TC',fontWeight: '500',fontSize: 16,letterSpacing: 0.25
}
})
export default QRCodeScreen2;
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)