反应原生：不透明视图中的透明视图

Posted 2023-03-15

【中文标题】反应原生：不透明视图中的透明视图

【英文标题】：React native: transparent view inside opaque view

【发布时间】：2016-10-05 21:01:09

【问题描述】：

我想用不透明的框架和透明的中心显示来自相机的视图。像图片中的东西（黑色部分是相机的视图）。我正在寻找具有纯 react-native 组件的解决方案，没有额外的库（如 https://github.com/gilbox/react-native-masked-view），没有添加具有透明中心或其他黑客的全屏图像。

【参考方案1】：

我找到了简单的解决方案，我添加了View，内部透明，边框不透明，如下所示：

let width, height = Dimensions.get('window');
<View
  style=

    position: 'absolute',
    top: -width/2 + 100,
    left: -width/2 + 50,
    right: -width/2 + 50,
    bottom: -width/2 + 200,
    backgroundColor: 'transparent',

    borderWidth: width/2,
    borderRadius: width,
    borderColor: 'red',
    opacity: 0.3,
  
/>

【讨论】：

我试过了，但它不像我想要的那样工作。它显示带有红色中心的透明边框。

要获得透明的中心和不透明的边框，您可以使用：<View style=position: 'absolute', alignSelf: 'center', width: (width*2.5), height: (width*2.5), left:-(width*0.75), top:-(width*width/height), borderWidth: width, borderRadius: width*1.02, borderColor: 'rgba(0, 0, 0, 0.5)' />