在透明视图上创建阴影 - 反应本机

Joh*_*ohn 7 javascript android ios react-native

我必须从具有绝对位置/尺寸的透明视图投射阴影,但似乎无法做到这一点。整个结构从上到下:

  • 一些文字覆盖透明视图
  • 带阴影的透明视图
  • 下面显示的其他内容

如果我将视图的背景颜色定义为“透明”,则阴影将应用于其子元素,在本例中为文本叠加。如果我将背景颜色定义为纯色,则下面显示的其他内容将被遮挡。

我怎样才能实现这个目标?

编辑:我做了一些实验,这很奇怪:子元素或视图本身的阴影似乎基于该视图的 Alpha 通道的透明度。如果我在那里放置一个不完全透明的背景,或者甚至在其中嵌套一个虚拟视图并通过 使其透明opacity,从视图投射的阴影仍然不完全是我指定的 - 这有点像与其共享阴影总和子元素....

任何解决方法将不胜感激!这种行为让我发疯。

我试图用这种风格创建阴影:

shadowColor: 'black',
shadowOffset: {
    width: 0,
    height: 1
},
shadowRadius: 4,
shadowOpacity: 1
Run Code Online (Sandbox Code Playgroud)

另一个编辑:我使用透明图像作为背景,它也不起作用:(