如何在反應本機中清除中心區域

我想在反應本機相機上創建覆蓋區域。不過，我只希望中心區域清晰，並且所有其他區域都有一些小的不透明覆蓋區域。如何在反應本機中清除中心區域

我已經創建了一個組件作爲一個包裝和添加角落，但我不能覆蓋除了在中心。如果我添加背景不透明疊加，它適用於包括中心框在內的整個屏幕。這是我到目前爲止。

<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', 
    }, 
})

來源

2017-08-24 khagesh

我們談到這個在Twitter上，但我想，以確保提出的解決方案是記錄......

我建議你創建了屏幕的四個側面上具有四個半透明的灰色盒子。屏幕中心將爲空白，並且這四個框將在中心區域的每一側形成一個面罩

來源

2017-08-25 00:15:43

如何在反應本機中清除中心區域

回答

相關問題