Image的border(x)Radius不生效(在iOS下出现)
borderTopRightRadius
borderTopLeftRadius
borderBottomRightRadius
borderTopLeftRadius
某些时候我们需要设置图片在某个方向上的圆角,然而,我发现在iOS下,这四个style的属性是不生效的,但是对于View是生效的。解决办法是给Image加一个View,给View设置overflow: 'hidden'
。
再等等!!可能你的还是没有生效,比如下面这位童鞋的:
这个时候,试着把
border(x)Radius
设置的大一点,我不知道为什么在某个数值范围下,你是看不到圆角效果的,但是确实已经生效了,先将数值设置的大一点,确定生效,再慢慢改到你需要的值就好了。
作为背景图的Image的borderRadius属性不生效(在Andorid和iOS下出现)
最开始我也没有发现这个问题,给Image设置borderRadius效果就是那么明显啊,然而,当我把Image作为背景图使用比如:
<Image source={require('test.png')}>
<Text>hello</Text>
</Image>
就发现这个属性怎么也不起作用了,没什么解决办法,如果这张图片的圆角效果很重要,那就不要作为背景图了,只能将要放在图片上的内容设置为绝对定位了,position: 'absolute'
。
View的shadow属性(在Andorid下不生效)
这个其实人家官网也说啦,我们这个属性确实只针对iOS平台,Android平台也有一个属性可以用,但是你无法设置什么阴影颜色,阴影偏移,只能设置一个阴影数值,针对一般的情况也勉强够用的,所以我们的样式可以写成:
{
elevation: 3,
shadowColor: Colors.lightgrey,
shadowOffset: {width: 1, height: 1},
shadowOpacity: 0.5,
shadowRadius: 3,
}
若想在Android下使用比较好的阴影效果就用插件吧:https://www.npmjs.com/package/react-native-shadow 这个插件也说啦:我们建议您在iOS平台下使用原生的阴影。
网友评论