本文主要介绍了在ReactNative项目中遇到的TabNavigator在iOS设备上图标位置不正确的问题。针对iOS不同系统版本，分析了TabBarBottom组件的_icon方法，并提出了修复方案，确保在iOS 9、10、11上正确显示底部tab图标。
项目中使用TabNavigator实现底部三个tab页的跳转，在android机型上没有问题，但是适配IOS的时候发现图标都靠上如下图：
经查看TabNavigator的实现发现如下问题：
在TabBarBottom的_renderIcon方法里初始化TabBarIcon的时候有传一个style
showLabel是外边传进来的控制是否显示tab上的标题的。useHorizontalTabs的实现如下：
意思是如果ios的系统版本大于11就用已定义好的styles.icon如果小于11style就传个{}
但经过测试ios 9 10 11 都需要传Style = {{}}才能适配成功所以代码修改如下：
ios适配问题解决，效果图如下：
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
