神坑react native之react-navigation组件TabNavigator模式底部图标tabBarIcon不显示的解决方案

在react native项目中使用了react-navigation组件的TabNavigator模式,制作tab切换效果很方便,但是按照官方的写法,编译后在tab标题栏并没有显示icon图标,经排查,icon图标配置没有问题,只是写在tabBarIcon属性里会出现不显示的情况。

经过反复摸索,发现如果要显示icon图标,需要在TabNavigator方法中设置第二个属性,并设置tabBarOptions: { showIcon: true },代码如下:

const StartScreen = TabNavigator({
 Home: {
 ...
 },
 Calendar: {
 ...
 },
}, { 
 tabBarOptions: { 
 showIcon: true 
 }, 
});

 

参考资料:https://stackoverflow.com/questions/44603911/react-native-react-navigation-tabbaricon-does-not-display

关于博主
骨灰级博客玩家
国内第一批90后网站站长/程序员
做过七年前端讲师
目前从事锦鲤观赏鱼电商行业
鱼贝贝锦鲤创始人
文章列表
1
camtasia studio 9.x版本给视频加马赛克效果
camtasia studio 9.x版本给视频加马赛克效果
2
【深度解析】国产软件大行其道耍流氓的原因深度剖析
【深度解析】国产软件大行其道耍流氓的原因深度剖析
3
PHP是世界上最好的语言,不黑不痛快是吗?
PHP是世界上最好的语言,不黑不痛快是吗?
4
玩转京东云主机之②-特惠云主机开通
玩转京东云主机之②-特惠云主机开通
5
MacOS系统中打开Adobe系列软件提示错误“Adobe Photoshop CC 2018 因为出现问题而无法打开”的解决方法
MacOS系统中打开Adobe系列软件提示错误“Adobe Photoshop CC 2018 因为出现问题而无法打开”的解决方法
最新评论
比比拉布
比比拉布
5月7日
太感谢了!!!!!!找了这么多的教程,只有你点出来了关键点——设计视图!!!!
Jake
Jake
3月7日
Halo 啊~麻烦更新下我的博客地址,原名:Jing Blog。麻烦更新如下: Jake Blog(后缀可以省略,也可以保留,看哪个风格适合) 网址:htt
评论于关于博主