Question

我有一个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;

是的，我已经尝试使用Icon-component，所以我知道它有效。

任何提示或指导都会非常有用，谢谢！

Answer 1

你的反应导航是什么版本???

你可以试试这个 navigationOptions: { tabBar: { label: 'Test', icon: ({tintColor}) => (<Icon ... />), }, }

它可以在版本1.0.0-beta.7

中使用

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

React native react-navigation tabBarIcon不显示

4 个答案: