解决React Native在Andorid和iOS下某些样式不生效的问题

Image的border(x)Radius不生效(在iOS下出现)

borderTopRightRadius
borderTopLeftRadius
borderBottomRightRadius
borderTopLeftRadius

某些时候我们需要设置图片在某个方向上的圆角,然而,我发现在iOS下,这四个style的属性是不生效的,但是对于View是生效的。解决办法是给Image加一个View,给View设置overflow: 'hidden'
再等等!!可能你的还是没有生效,比如下面这位童鞋的:

解决React Native在Andorid和iOS下某些样式不生效的问题_第1张图片
2017-06-09_121304.jpg

这个时候,试着把 border(x)Radius设置的大一点,我不知道为什么在某个数值范围下,你是看不到圆角效果的,但是确实已经生效了,先将数值设置的大一点,确定生效,再慢慢改到你需要的值就好了。

作为背景图的Image的borderRadius属性不生效(在Andorid和iOS下出现)

最开始我也没有发现这个问题,给Image设置borderRadius效果就是那么明显啊,然而,当我把Image作为背景图使用比如:


  hello

就发现这个属性怎么也不起作用了,没什么解决办法,如果这张图片的圆角效果很重要,那就不要作为背景图了,只能将要放在图片上的内容设置为绝对定位了,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平台下使用原生的阴影。

你可能感兴趣的:(解决React Native在Andorid和iOS下某些样式不生效的问题)