美文网首页React交流
解决React Native在Andorid和iOS下某些样式不

解决React Native在Andorid和iOS下某些样式不

作者: 大柚子08 | 来源:发表于2017-06-09 12:28 被阅读174次

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

    borderTopRightRadius
    borderTopLeftRadius
    borderBottomRightRadius
    borderTopLeftRadius

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

    2017-06-09_121304.jpg
    这个时候,试着把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平台下使用原生的阴影。

    相关文章

      网友评论

        本文标题:解决React Native在Andorid和iOS下某些样式不

        本文链接:https://www.haomeiwen.com/subject/wroxqxtx.html