React Native：不透明视图内的透明视图

Question

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

Answer 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,
  }}
/>