如何清除响应原生的中心区域

Question

我想在react-native相机上创建一个叠加层。但是，我希望只有中心区域清晰，所有其他区域都有一些不透明度较小的叠加。

我创建了一个作为包装器并添加角落的组件，但除了在中心之外我无法覆盖。如果我添加具有背景不透明度的叠加层，则它适用于整个屏幕，包括中心框。 这是我到目前为止所做的。

<Camera style={[cameraStyle.camera]}>
  <CustomView center style={[cameraMarkerStyles.container]}>
    <CustomView
      transparentBg
      spaceBetween
      style={[cameraMarkerStyles.cameraMarker]}
    >
      <CustomView row spaceBetween>
        <CornerBox status={status} position="topLeft" />
        <CornerBox status={status} position="topRight" />
      </CustomView>
      <CustomView row spaceBetween>
        <CornerBox status={status} position="bottomLeft" />
        <CornerBox status={status} position="bottomRight" />
      </CustomView>
    </CustomView>
    <CustomView
      style={[cameraMarkerStyles.container, cameraMarkerStyles.overlay]}
    />
  </CustomView>
</Camera>

基本上我添加了一个View，它是中心区域，在所有角落都有4个框，用于创建边框。然后在最后有一个View作为整个屏幕的叠加层。现在最后View如果我将背景颜色更改为透明以外的颜色，它也会覆盖中心区域。 我尝试过更改zIndex，也将其设置为-1。然而，这也行不通。

我有一个非常肮脏的解决方案是我可以将视图放在中心区域上方和中心区域下方以及它的每一侧，然后将这些视图作为一些背景和不透明度。通过这种方式，我们可以在中心区域之外添加叠加层。

有谁知道实现这种布局的任何好方法？即使是简单的想法也足够了，我不需要整个代码。

添加样式以防任何人需要查看。

const markerSize = 250
const cornerBoxSize = 50
const cornerBoxBorderSize = 5

const cameraMarkerStyles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
  },
  overlay: {
    zIndex: -1,
    backgroundColor: 'rgba(0, 0, 0, 0.2)',
  },
  cameraMarker: {
    width: markerSize,
    height: markerSize,
  },
  cornerBox: {
    width: cornerBoxSize,
    height: cornerBoxSize,
  },
  topLeftBox: {
    borderTopWidth: cornerBoxBorderSize,
    borderLeftWidth: cornerBoxBorderSize,
  },
})

const cameraStyle = StyleSheet.create({
  camera: {
    height: Dimensions.get('screen').height,
    backgroundColor: 'transparent',
  },
})

Answer 1

我们在推特上讨论了这个问题，但我想确保提出的解决方案已经记录下来了......

我建议你为屏幕的四边创建四个半透明的灰色框。屏幕中心将为空白，这四个框将在中心区域的每一侧形成一个掩模