React Native，为圆形视图添加阴影

Question

如何为圆角视图放置阴影。

我正在将borderRadius设置为圆角的值。但高程特性使其再次变平。没有海拔，就不会有阴影。

我使用的代码是

<View style={styles.container}>
<View style={styles.box}></View>
</View>

对于样式

const styles = StyleSheet.create({
container: {
padding: 20,
paddingTop: 60,
flex: 1,
backgroundColor: "#efefef",
alignItems: "center",
justifyContent: "flex-start",
flexDirection: "column"
},
box: {
width: "95%",
height: 250,
elevation: 1,
padding: 10,
borderRadius: 10,
shadowOpacity: 0.5,
backgroundColor: "#FFFFFF",
alignItems: "center",
justifyContent: "center"
},
});

Answer 1

您必须使用shadowRadius设置阴影半径，例如：

const styles = StyleSheet.create({
container: {
elevation: 8,
shadowColor: 'black',
shadowOpacity: 0.3,
shadowOffset: {
width: 2,
height: 2
},
shadowRadius: 5, // <- Radius of the shadow
borderRadius: 5,
padding: 16,
margin: 8,
},
})

查看React Native docs:中的ShadowProps文档

https://reactnative.dev/docs/shadow-props