Question

我想知道如何仅将阴影应用于主外部视图。在应用阴影时，它会应用到所有内部元素

Answer 1

使父级的阴影道具不继承给子元素的诀窍是设置背景色，以为其设置阴影的组件设置背景色。例如，将是：

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

不幸的是，这仅适用于彩色背景–当使用RGBA或“ transparent”设置透明背景无济于事。

Answer 2

我不能真正根据简单的图像进行回答，但是根据我以前的经验，将shadowOffset设置为所需的高度和宽度应该可以解决iOS问题。

在此处详细了解：Shadow Offset

下面是使用以下样式的我的卡片的外观图片：

marginLeft: 10,
    backgroundColor: 'white',
    shadowColor: 'blue',
    alignItems: 'center',
    shadowOffset: {width: 3, height: 3 },
    shadowOpacity: 1.0,
    borderRadius: 10,

My card 希望它对您有效。

Answer 3

创建Shadow.js

export const Shadow = (elevation) => { // Receive elevation as a prop
  return {
    elevation,
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 0.5 * elevation },
    shadowOpacity: 0.3,
    shadowRadius: 0.8 * elevation,
  };
};

将Shadow.js导入到您要应用的页面

import Shadow from './Shadow'  //path to Shadow.js

<View style={{Shadow(5)}}> // pass elevation as a prop to Shadow.js
</View>

如果要在样式中使用

import Shadow from './Shadow'  //path to Shadow.js

<View style={styles.shadow}>
</View>

const styles = StyleSheet.create({
 shadow:{
    ...Shadow(5) //use spread operator
}
});

如何在不影响内部视图元素的情况下应用阴影以响应本机视图？

3 个答案: