先贴出样式不兼容的图片:(此问题只出现在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