代码之家  ›  专栏  ›  技术社区  ›  Guilherme Garcia da Rosa

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

  •  0
  • Guilherme Garcia da Rosa  · 技术社区  · 7 年前

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

    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
            }
    })
    

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

    tabBarLabel:“”

    但结果很糟糕:

    enter image description here

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

    2 回复  |  直到 7 年前
        1
  •  1
  •   Jay Thummar    7 年前

    使用

     tabBarLabel:() => {return null},
    
        2
  •  1
  •   Aaditya Paliwal    7 年前

    你可以用 showLabel 财产 tabBarOptions 错了。

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

    推荐文章