React-navigation TabNavigator适配ios机型

项目中使用TabNavigator实现底部三个tab页的跳转,在android机型上没有问题,但是适配IOS的时候发现图标都靠上如下图:

React-navigation TabNavigator适配ios机型_第1张图片

经查看TabNavigator的实现发现如下问题:

React-navigation TabNavigator适配ios机型_第2张图片

在TabBarBottom的_renderIcon方法里初始化TabBarIcon的时候有传一个style

showLabel是外边传进来的控制是否显示tab上的标题的。useHorizontalTabs的实现如下:

意思是如果ios的系统版本大于11就用已定义好的styles.icon如果小于11style就传个{}

但经过测试ios 9 10 11 都需要传Style = {{}}才能适配成功所以代码修改如下:

React-navigation TabNavigator适配ios机型_第3张图片

ios适配问题解决,效果图如下:

React-navigation TabNavigator适配ios机型_第4张图片






你可能感兴趣的:(React-navigation TabNavigator适配ios机型)