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

时间:2018-08-07 04:46:35

标签: node.js react-native

我有一个标签栏导航器(水平滑动),并设置在屏幕的底部,我希望该栏仅包含图标,没有标题,这是当前设计:

enter image description here

这是代码:

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:''

但是结果很糟糕:

enter image description here

我希望图标几乎不触碰屏幕底部,就像唯一的填充同样位于图标的上方和下方。

2 个答案:

答案 0 :(得分:1)

使用

SELECT COUNT(*)
  FROM
(
  SELECT id_employee, COUNT(*) AS CNT
    FROM Department_Employee
GROUP BY id_employee
) AS T
WHERE CNT > 1

答案 1 :(得分:1)

您可以使用showLabel的{​​{1}}属性为false。

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