React Native中的“Cut hole”

Question

我正在尝试为条形码扫描仪构建一个十字线，需要达到这样的效果：

视图中心有指定尺寸的方孔。这个洞的目的是暴露它下面的视图。在过去，我一直在使用图像，但我想尝试在代码中重新创建它，以便我可以更好地控制它的属性。

编辑：这就是我认为View层次结构应该是

1. 相机预览

2. 在洞中查看

1在2以下

Answer 1

我会通过使用4个单独的View元素创建叠加来实现此目的。

以下是示例代码。您需要根据视口大小（使用ReactNative.Dimensions）和所需的光圈来确定尺寸。

然后你绝对将叠加层放在摄像机视图上方。

render() {
  return (
    <View style={styles.overlayContainer}>
      <View style={[styles.overlaySegment, styles.overlayTop]} />
      <View style={[styles.overlaySegment, styles.overlayLeft]} />
      <View style={[styles.overlaySegment, styles.overlayRight]} />
      <View style={[styles.overlaySegment, styles.overlayBottom]} />
    </View>
  );
}

const styles = StyleSheet.create({
  overlayContainer: {
    flex: 1,
  },
  overlaySegment: {
    backgroundColor: '#0f0',
    position: 'absolute',
  },
  overlayBottom: {
    bottom: 0,
    height: 200,
    left: 0,
    right: 0,
  },
  overlayLeft: {
    height: 200,
    left: 0,
    width: 100,
  },
  overlayRight: {
    height: 200,
    right: 0,
    width: 100,
  },
  overlayTop: {
    height: 200,
    left: 0,
    right: 0,
    top: 0,
  },
});