反应本机反应导航tabBarIcon不显示答案

【问题标题】：React native react-navigation tabBarIcon does not display反应本机反应导航tabBarIcon不显示
【发布时间】：2017-06-17 11:12:09
【问题描述】：

我有一个 TabNavigator，我希望在每个选项卡上都有图标和标签。然而，即使我尝试了很多方法来让图标出现，也没有任何反应。

// Imports...

const StartScreen =  TabNavigator({
    Home: {
        screen: HomeTab,
        navigationOptions: {
            tabBarLabel: 'Test',
            tabBarIcon:() => <Icon size={ 20 } name={ 'cogs' } color={ 'red' }/>
        }
    },
    Calendar: {
        screen: CalendarTab,
        navigationOptions: {}
    }
});

StartScreen.navigationOptions = {
    title: 'TestApp',
    headerTintColor: '#ffa500',
    showIcon: true
};

export default StartScreen;

是的，我已经尝试过使用图标组件，所以我知道它可以工作。

任何提示或指导都会很有帮助，谢谢！

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

这行得通

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

编辑：我刚刚检查过，没有名为 cogs 的谷歌素材图标。你应该仔细检查你的命名:)

【讨论】：

【解决方案2】：

我在 1.0.0-beta14 版本中遇到了同样的问题。

对我来说，升级到 1.0.0-beta15 修复了它

【讨论】：

【解决方案3】：

尝试使用tabBarOptions = {{ showIcon: true }}

我遇到了同样的问题，我必须强制显示我将 showIcon 设置为 true 的图标。这以前解决了我的问题。

【讨论】：

你应该解释为什么你认为你的答案是正确的。
我遇到了同样的问题，我必须强制显示我将 showIcon 设置为 true 的图标
在您的答案中添加了解释。

【解决方案4】：

尝试在图标前添加 return，如下所示：

tabBarIcon:() => return <Icon size={ 20 } name={ 'cogs' } color={ 'red' }/>

【讨论】：

【解决方案5】：

你的 react-navigation 是什么版本？？？

你可以试试这个

navigationOptions: {
            tabBar: {
                label: 'Test',
                icon: ({tintColor}) => (<Icon ... />),
            },
        }

它将在版本1.0.0-beta.7中工作

【讨论】：

我一直努力拥有最新的软件包，所以现在它的 1.0.0-beta.11 并且我记得在 beta-8 中删除了该语法。最坏的情况是我会退回几个版本