在react native组件上使用带有borderRadius的阴影

Question

[我正在尝试在Border Native属性为10的React Native中的自定义卡组件上设置阴影。

这里是代码：

borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
shadowOffset: {
  width: 0,
  height: 3, 
},
elevation: 3,

如何将圆角应用于阴影？

Answer 1

您可以使用shadowRadius属性来塑造圆角。但这仅适用于iOS，因为Android仅采用height属性创建阴影。您可以在此处的官方文档中了解更多信息。 https://reactnative.dev/docs/shadow-props

您可以将以下示例中的样式应用于自定义卡片的容器视图。

 const shadowsStyling = {
    width: 100,
    height: 100,
    shadowColor: "#000000",
    shadowOpacity: 0.8,
    shadowRadius: 2,
    shadowOffset: {
      height: 1,
      width: 0
    }
}