raidiusTopLeft不生效解决办法

最新推荐文章于 2024-12-30 14:28:27 发布

原创最新推荐文章于 2024-12-30 14:28:27 发布 · 463 阅读

0 ·

CC 4.0 BY-SA版权

web前端，css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了解决React Native中<Image>组件使用borderRadius与margin属性时出现的圆角显示问题的方法。通过将样式提升到包裹的<View>组件层面，可以有效避免样式间的冲突。

学习调试app端样式碰到raidiusTopLeft不生效的问题发现是因为为<Image>属性加raidiusTopLeft的同时加了margin属性导致的

解决办法是：包裹一层View，并把raidiusTopLeft和margin拿到View层。

<View
style={styles.cardbox}>
<Image
style={styles.card}
source={{ 
uri: img1 }}
/>
</View>
const 
styles = StyleSheet.create({
cardbox: {
marginTop: 26,
marginLeft: 20,
marginRight: 
20,
borderTopLeftRadius: 
8,
borderTopRightRadius: 
8,
overflow: "hidden"
},
card: {
height: 154
}
});