React Native中tab切换栏在iPhone 6 Plus(10.2.1)一边有碎屑式的蓝色阴影

先贴出样式不兼容的图片:(此问题只出现在iPhone 6 Plus(10.2.1)的真机上,其余的包括模拟器,Android真机,iOS其余真机都未出现此问题)

尝试了我们研发部的所有的Android机(包括小米,华为,联想,vivo等等)均没有问题;而iOS机型中尝试了iPhone 5c, iPhone 6s PLus, iPhone 7,iPhone 7 Plus均没有问题,只有唯一一个iPhone 6 Plus(系统10.2.1)真机有这个问题的重现。 除此之外,我也试了iOS的simulator,包括iPhone 6 Plus 的10.2.1的机型,模拟器也是没有任何问题的。


针对这个特殊机型偶发出现的问题:bug详情如下:



解决的核心代码:

将以下代码:

borderLeft: {
    borderTopLeftRadius: 5,
    borderBottomLeftRadius: 5,
},
borderRight: {
   borderTopRightRadius: 5,
   borderBottomRightRadius: 5,
},

改成:

borderLeft: {
        borderTopLeftRadius: 5,
        borderBottomLeftRadius: 5,
        borderRightColor:Color.CM_TransparentColor,
        borderRightWidth:1
    },
    borderRight: {
        borderTopRightRadius: 5,
        borderBottomRightRadius: 5,
        borderLeftColor:Color.CM_TransparentColor,
        borderLeftWidth:1
},

即:将选中左边tab栏的时候,添加上右边的透明的边框;选中右边的tab栏的时候,添加上左边的透明的边框。

bug改好之后的完美的样式如下:



完整源码地址:

https://github.com/spicyboiledfish/RNTabDemo




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值