在React Native with Shadows上有一些样式问题。
我想在图像上留下一个阴影,它有一个弯曲的边缘(不是正方形),并且我已经给出了borderradius。但是,如果我在父视图上应用阴影,它似乎无法跟随边缘'图像。我希望阴影围绕图像的弯曲边缘,而不是在方形视图周围。
这是我的代码:
<View style={[styles.closedcontainer]}>
<Image source={{uri: props.food.url}}
style={styles.smallimage}
/>
</View>
这是我的造型:
const styles = StyleSheet.create({
closedcontainer: {
height: 100,
width: 100,
flexDirection: 'row',
flexWrap: 'wrap',
paddingLeft: 50,
paddingRight: 50,
paddingBottom: 0,
paddingTop: 0,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff9f9',
shadowColor: 'black',
shadowOffset: {width: 2, height: 5},
shadowOpacity: .30,
shadowRadius: 5,
// overflow: 'hidden'
},
smallimage: {
height: 100,
width: 100,
borderRadius: 30,
borderColor: "#f97070",
borderWidth: 2.75,
margin: 10,
backgroundColor: 'white',
resizeMode: 'contain'
}
我想也许可以在父视图的样式(closedcontainer
)中添加隐藏的溢出,但这会完全隐藏整个阴影。
有什么想法吗?谢谢!
答案 0 :(得分:1)
尝试将borderRadius直接设置为图像上的道具,而不是将其用作样式。
<Image borderRadius={25}/>
或类似的