神坑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
加强火绒防御级别的设置方法
加强火绒防御级别的设置方法
2
神坑react native之react-native-swiper组件导入react-navigation中不显示文字图片等内容的解决方案
神坑react native之react-native-swiper组件导入react-navigation中不显示文字图片等内容的解决方案
3
安装草图大师(sketchup)时提示“模块C:\Program Files\SketchUp\SketchUp 2018\ThumbsUp.dll注册失败。请与您的支持人员联系”错误的解决方法
安装草图大师(sketchup)时提示“模块C:\Program Files\SketchUp\SketchUp 2018\ThumbsUp.dll注册失败。请与您的支持人员联系”错误的解决方法
4
程序员大哥给你介绍的对象,靠谱!
程序员大哥给你介绍的对象,靠谱!
5
易语言静态编译报错,提示“无法定位链接器!请检查 tools\link.ini 中的配置是否正确。 静态连接失败”的问题解决方法
易语言静态编译报错,提示“无法定位链接器!请检查 tools\link.ini 中的配置是否正确。 静态连接失败”的问题解决方法
最新评论
比比拉布
比比拉布
5月7日
太感谢了!!!!!!找了这么多的教程,只有你点出来了关键点——设计视图!!!!
Jake
Jake
3月7日
Halo 啊~麻烦更新下我的博客地址,原名:Jing Blog。麻烦更新如下: Jake Blog(后缀可以省略,也可以保留,看哪个风格适合) 网址:htt
评论于关于博主