React native：不透明视图内的透明视图 [英] React native: transparent view inside opaque view

问题描述

我想用不透明的框架和透明的中心显示相机的视图。像图片中的东西（黑色部分是来自相机的视图）。我正在寻找具有纯反应原生组件的解决方案，没有额外的库（如

解决方案

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

  let {width，height} = Dimensions.get （'窗口'）; 
<查看
 style = {{
 
 position：'absolute'，
 top：-width / 2 + 100，
 left：-width / 2 + 50，
右：-width / 2 + 50，
底部：-width / 2 + 200，
 backgroundColor：'transparent'，
 
 borderWidth ：width / 2，
 borderRadius：width，
 borderColor：'red'，
 opacity：0.3，
}} 
 /> 
  

I want to show view from camera with opaque frame and transparent center. Something like in the picture (black part is a view from camera). I'm looking for solution with pure react-native components, no additional libs (like https://github.com/gilbox/react-native-masked-view), without adding fullscreen image with transparent center or other hacks.

解决方案

I found simple solution, I added View, transparent inside with opaque border, something like this:

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

这篇关于React native：不透明视图内的透明视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！