React Native是否支持box-shadow参数传播半径？

Question

Wiki仅指：shadowColor(color)、shadowOffset(object)、shadowOpacity(number) 和shadowRadius(number)。可以使用传播半径或者不支持此属性？

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 200px;
  height: 200px;
  box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.2);
}

<div/>

Answer 1

您不能使用box-shadow，并且 React Native 不支持任何与spread radius css 参数等效的参数。

box-shadow: 0 0 16px 0 #666代表 ：

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

所以，你需要做的是：

container: {
    backgroundColor:'white',
    padding: 24,
    margin:15,
    borderRadius: 8,
    borderColor: '#33CC99',
    borderWidth: 1,
    ...Platform.select({
     ios: {
       shadowColor: "#000",
       shadowOffset: {
         width: 0,
         height: 5,
       },
       shadowOpacity: 0.36,
       shadowRadius: 6.68,
     },
     android: {
       elevation: 11,
     },
    })
},

仅shadow*在 iOS 和elevationAndroid 中，

这是两个操作系统的阴影生成器。