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

React-navigation TabNavigator适配ios机型

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

React-navigation TabNavigator适配ios机型

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

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

React-navigation TabNavigator适配ios机型

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

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

React-navigation TabNavigator适配ios机型

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

React-navigation TabNavigator适配ios机型






相关文章:

  • 2021-12-03
  • 2021-11-28
  • 2021-05-07
  • 2021-05-26
  • 2021-09-18
  • 2021-05-20
  • 2022-02-16
猜你喜欢
  • 2021-10-08
  • 2021-07-04
  • 2021-12-05
  • 2021-06-14
  • 2021-04-12
相关资源
相似解决方案