将本机相机与条形码扫描仪掩码的透明视图反应
React native camera with a transparent view for barcode scanner mask
如何在 react-native-camera 上添加遮罩?
我正在使用 react-native-camera 为 React Native QRCode 扫描器应用构建 UI。
相机顶部的叠加遮罩应为浅灰色,但中间部分必须保持透明(透视)。
但是当我改变外层面具的背景颜色时,它似乎也影响了中心部分。我的意思是,当然是在它的子视图后面。
下面的代码是快照的简化版本。
<Camera
ref={cam => {
this.camera = cam;
}}
onBarCodeRead={this._onBarCodeRead}
style={styles.cameraView}
aspect={Camera.constants.Aspect.fill}
playSoundOnCapture
>
<View
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(0.2, 0.2, 0.2, 0.2)',
alignItems: 'center',
justifyContent: 'space-around',
}}
>
<View
style={{
width: 300,
height: 300,
backgroundColor: 'transparent',
borderColor: 'white',
borderWidth: 1,
}}
/>
</View>
</Camera>
知道如何完成这项工作吗?
我终于弄明白了。这个想法是像汉堡一样创建3行,然后在运行时计算高度和宽度。
中间一行有 3 个视图组件,中间一个有透明背景和白色边框。
(值,300,来自中心视图(透明区域)的大小,我将它除以 10 来计算 flexboxes 的较小比率)
export default class CameraScreen extends React.Component<any, any> {
render() {
const { height, width } = Dimensions.get('window');
const maskRowHeight = Math.round((AppStore.height - 300) / 20);
const maskColWidth = (width - 300) / 2;
return (
<View style={styles.container}>
<Camera
ref={cam => {
this.camera = cam;
}}
onBarCodeRead={this._onBarCodeRead}
style={styles.cameraView}
aspect={Camera.constants.Aspect.fill}
playSoundOnCapture
>
<View style={styles.maskOutter}>
<View style={[{ flex: maskRowHeight }, styles.maskRow, styles.maskFrame]} />
<View style={[{ flex: 30 }, styles.maskCenter]}>
<View style={[{ width: maskColWidth }, styles.maskFrame]} />
<View style={styles.maskInner} />
<View style={[{ width: maskColWidth }, styles.maskFrame]} />
</View>
<View style={[{ flex: maskRowHeight }, styles.maskRow, styles.maskFrame]} />
</View>
</Camera>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
cameraView: {
flex: 1,
justifyContent: 'flex-start',
},
maskOutter: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'space-around',
},
maskInner: {
width: 300,
backgroundColor: 'transparent',
borderColor: 'white',
borderWidth: 1,
},
maskFrame: {
backgroundColor: 'rgba(1,1,1,0.6)',
},
maskRow: {
width: '100%',
},
maskCenter: { flexDirection: 'row' },
});
更新:
不同品牌手机的高度比变化取决于它使用physical/soft按钮。我用 flex
代替了固定高度。
你可以使用这个:
react-native-barcode-mask
您需要使用一些屏蔽的原生视图(iOs、Android)并将您的内容包裹在其中
或者您可以为此使用我们的小型库 https://github.com/ibitcy/react-native-hole-view
如何在 react-native-camera 上添加遮罩?
我正在使用 react-native-camera 为 React Native QRCode 扫描器应用构建 UI。
相机顶部的叠加遮罩应为浅灰色,但中间部分必须保持透明(透视)。
但是当我改变外层面具的背景颜色时,它似乎也影响了中心部分。我的意思是,当然是在它的子视图后面。
下面的代码是快照的简化版本。
<Camera
ref={cam => {
this.camera = cam;
}}
onBarCodeRead={this._onBarCodeRead}
style={styles.cameraView}
aspect={Camera.constants.Aspect.fill}
playSoundOnCapture
>
<View
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(0.2, 0.2, 0.2, 0.2)',
alignItems: 'center',
justifyContent: 'space-around',
}}
>
<View
style={{
width: 300,
height: 300,
backgroundColor: 'transparent',
borderColor: 'white',
borderWidth: 1,
}}
/>
</View>
</Camera>
知道如何完成这项工作吗?
我终于弄明白了。这个想法是像汉堡一样创建3行,然后在运行时计算高度和宽度。
中间一行有 3 个视图组件,中间一个有透明背景和白色边框。
(值,300,来自中心视图(透明区域)的大小,我将它除以 10 来计算 flexboxes 的较小比率)
export default class CameraScreen extends React.Component<any, any> {
render() {
const { height, width } = Dimensions.get('window');
const maskRowHeight = Math.round((AppStore.height - 300) / 20);
const maskColWidth = (width - 300) / 2;
return (
<View style={styles.container}>
<Camera
ref={cam => {
this.camera = cam;
}}
onBarCodeRead={this._onBarCodeRead}
style={styles.cameraView}
aspect={Camera.constants.Aspect.fill}
playSoundOnCapture
>
<View style={styles.maskOutter}>
<View style={[{ flex: maskRowHeight }, styles.maskRow, styles.maskFrame]} />
<View style={[{ flex: 30 }, styles.maskCenter]}>
<View style={[{ width: maskColWidth }, styles.maskFrame]} />
<View style={styles.maskInner} />
<View style={[{ width: maskColWidth }, styles.maskFrame]} />
</View>
<View style={[{ flex: maskRowHeight }, styles.maskRow, styles.maskFrame]} />
</View>
</Camera>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
cameraView: {
flex: 1,
justifyContent: 'flex-start',
},
maskOutter: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'space-around',
},
maskInner: {
width: 300,
backgroundColor: 'transparent',
borderColor: 'white',
borderWidth: 1,
},
maskFrame: {
backgroundColor: 'rgba(1,1,1,0.6)',
},
maskRow: {
width: '100%',
},
maskCenter: { flexDirection: 'row' },
});
更新:
不同品牌手机的高度比变化取决于它使用physical/soft按钮。我用 flex
代替了固定高度。
你可以使用这个:
react-native-barcode-mask
您需要使用一些屏蔽的原生视图(iOs、Android)并将您的内容包裹在其中
或者您可以为此使用我们的小型库 https://github.com/ibitcy/react-native-hole-view