带透明视图扫描仪的相机

Question

编辑1：

请问我怎样才能掩盖相机卡之间的空间？

卡片左侧的叠加蒙版应为浅灰色。

下面的代码是快照的简化版本。

            <Camera
                ref={this.camera}
                style={styles.camera}
                flashMode={this.state.flashMode}
                {...{type, onCameraReady, ratio}}
            >
                <SafeAreaView style={[styles.cameraSafeArea]} top>
                    <View style={[styles.header, styles.maskFrame]}>
                    </View>
                   
                    <View style={[{flex: 40}, styles.maskFrame]} ></View>
                    <View style={[styles.grid]}>
                    </View>
                    <View style={[{flex: 32}, styles.maskFrame]} ></View>

                    <View style={[styles.footer, styles.maskFrame]}>
                        <IconButton name="cross" onPress={goBack} />
                        <TouchableOpacity onPress={notImplementedYet}>
                            <View style={styles.snapButton}>
                                <View style={[styles.innerSnapButton, { backgroundColor: theme.palette.primary }]}>
                                    <Icon color="white" name="camera" />
                                </View>
                            </View>
                        </TouchableOpacity>
                        <IconButton name="flash" onPress={toggleFlash} />
                    </View>
                </SafeAreaView>
            </Camera>

我的CSS：

camera: {
    flex: 1
},
cameraSafeArea: {
    flex: 1,
    justifyContent: 'flex-start',
    backgroundColor: StyleGuide.palette.transparent
},
header: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: StyleGuide.spacing.small,
},
footer: {
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    padding: StyleGuide.spacing.small
},
grid: {
    alignItems: 'center',
    justifyContent: 'space-around',
    top: 0,
    left: 0,
    borderColor: StyleGuide.palette.white,
    borderWidth: 4,
    marginLeft: StyleGuide.spacing.small,
    width: width - (StyleGuide.spacing.small * 2),
    height: ( width - (StyleGuide.spacing.small * 2) ) * 2 / 3,
    borderRadius: 5,
},
maskFrame: {
    backgroundColor: 'rgba(1,1,1,0.6) !important',
},
maskCenter: { flexDirection: 'row' },

此代码的结果：

我想遮蔽 whiteLine 之间的空间，例如在这张照片中 (RightSide)

知道如何完成这项工作吗？

Answer 1

你可以试试这样的：

<View style={[{flex: 40}, styles.maskFrame]} ></View>
<View style={{ flexDirection: 'row', width: '100%' }>
  <View style={styles.marginViewStyle}></View>
  <View style={[styles.grid]}></View>
  <View style={styles.marginViewStyle}></View>
</View>
<View style={[{flex: 32}, styles.maskFrame]} ></View>

CSS：

marginViewStyle: {
  backgroundColor: 'rgba(1,1,1,0.6)',
  height: ( width - (StyleGuide.spacing.small * 2) ) * 2 / 3,
  width: '5%',
},
grid: {
    alignItems: 'center',
//    justifyContent: 'space-around',
    top: 0,
    left: 0,
    borderColor: StyleGuide.palette.white,
    borderWidth: 4,
//    marginLeft: StyleGuide.spacing.small,
    width: '90%',
    height: ( width - (StyleGuide.spacing.small * 2) ) * 2 / 3,
    borderRadius: 5,
},