在 React Native with Shadows 上有一些样式问题。
我只想在图像上得到一个阴影,它有弯曲的边缘(不是正方形)和我给它的边界半径。但是如果我在父视图上应用阴影,它似乎无法“跟随图像的边缘”。我希望阴影围绕图像的弯曲边缘,而不是围绕方形视图。
这是我的代码:
<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
) 的溢出会做到这一点,但这会完全隐藏整个阴影。
有任何想法吗?谢谢!