如何在反应本机中清除中心区域

问题描述：

我想在反应本机相机上创建覆盖区域。不过，我只希望中心区域清晰，并且所有其他区域都有一些小的不透明覆盖区域。如何在反应本机中清除中心区域

我已经创建了一个组件作为一个包装和添加角落，但我不能覆盖除了在中心。如果我添加背景不透明叠加，它适用于包括中心框在内的整个屏幕。这是我到目前为止。

<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>

Bascially我添加View这是中心区域，其在其中创建边框各个角落的4盒。然后在最后有一个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', 
    }, 
})

答

我们谈到这个在Twitter上，但我想，以确保提出的解决方案是记录......

我建议你创建了屏幕的四个侧面上具有四个半透明的灰色盒子。屏幕中心将为空白，并且这四个框将在中心区域的每一侧形成一个面罩

如何在反应本机中清除中心区域

相关推荐