如何从 React Native Navigator 中删除标题？

Question

我有一个标签栏导航器（水平滑动）并设置在屏幕底部，我想让栏只有图标，没有标题，这是当前的设计：

这是代码：

const AppTabNavigator = createMaterialTopTabNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarLabel: 'Home',
            tabBarIcon: ({ tintColor }) => (
                <Icon name="ios-home" style={{color: 'white'}} color={tintColor} size={24} />
            )
        }
    },
    Hot: {
        screen: SettingsScreen,
        navigationOptions: {
            tabBarLabel: 'Hot',
            tabBarIcon: ({ tintColor }) => (
                <Icon name="ios-flame" style={{color: 'white'}} color={tintColor} size={24} />
            )
        }
    }
}, {
        order: ['Home', 'Hot'],
        tabBarPosition: 'bottom',
        swipeEnabled: true,
        animationEnabled: true,
        tabBarOptions: {
            activeTintColor: 'orange',
            inactiveTintColor: 'grey',
            style: {
                backgroundColor: '#4050B5',
                borderTopWidth: 0.5,
                borderTopColor: 'grey'
            },
            indicatorStyle: {
                height: 0
            },
            showIcon: true
        }
})

我想要没有标题的标签栏，只是图标，但是如果我删除 tabBarLabel，它仍然从“Home：{”和“Hot：{”中获取名称，我发现删除标题的唯一方法是将 tabBarLabel 设置为空格，空不起作用：

tabBarLabel: ' '

但结果很糟糕：

我希望图标几乎不接触屏幕底部，就像唯一的填充一样在图标的上方和下方。

Answer 1

用

 tabBarLabel:() => {return null},

Answer 2

您可以使用showLabel属性tabBarOptions为假。

这是参考链接：https : //reactnavigation.org/docs/en/material-top-tab-navigator.html