在本机组件上使用带有 borderRadius 的阴影

Question

我正在尝试在 React Native 中的自定义卡片组件上设置阴影，边框半径 属性 为 10。

代码如下：

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

如何将圆角应用于阴影？

Answer 1

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

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

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