如何在不影响内部视图元素的情况下应用阴影来反应原生视图? [英] How to apply shadow to react native View without affecting inner view elements?

问题描述

我想知道如何仅将阴影应用于主外部视图.在这里应用阴影，它被应用到所有内部元素

I would like to know how to apply shadow only to the main outer view. Here on applying shadow, it's getting applied to all the inner elements

推荐答案

让父元素的阴影属性不继承到子元素的诀窍是为设置阴影的组件设置背景颜色.例如:

The trick to make the shadow props of parent don't inherit to children element, is to set a background color to the component on which you set the shadow. For example that would be:

<View 
  style={{ backgroundColor: '#fff' }}
  shadowOffset={{height: 10}}
  shadowColor='black'
  shadowOpacity={0.5}
>
  <Text>{title}</Text>
</View>

不幸的是，这仅适用于彩色背景 - 当使用 RGBA 或透明"设置透明背景时无济于事.

Unfortunately this only works with colored backgrounds – when setting a transparent background with RGBA or 'transparent' is doesn't help.

这篇关于如何在不影响内部视图元素的情况下应用阴影来反应原生视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！