2

我想从底部选项卡导航器中删除图标空间/视图。我试图通过删除 tabBarIcon 来删除图标，但它没有用。这是我尝试过的代码和收到的结果。它看起来不太好，标签不在中心。它们看起来好像已经低于可见屏幕。使用的代码：

const TabNavigator = createMaterialBottomTabNavigator(
{
    Home: {
        screen: screen1,
        navigationOptions: {
            // tiitle: "hello"
            // tabBarIcon: () => {
            //     <View></View>
            // },
            tabBarLabel: <Text style={{ fontSize: 15, textDecorationLine: 'underline', }}>Screen1</Text>,
        }
    },
    People: {
        screen: screen2,
        navigationOptions: {
            tabBarLabel: <Text style={{ fontSize: 15, textDecorationLine: 'underline' }}>Screen2</Text>,
            activeColor: '#E8947F',
            inactiveColor: '#C4C9CB',
        }
    },
    Connects: {
        screen: screen3,
        navigationOptions: {
            tabBarLabel: <Text style={{ fontSize: 15, textDecorationLine: 'underline' }}>Screen3</Text>,
            activeColor: '#E8947F',
            inactiveColor: '#C4C9CB',

            // barStyle: { backgroundColor: '#2c6d6a' },
        }
    },
},
{
    initialRouteName: 'Home',
    activeColor: '#E8947F',
    inactiveColor: '#C4C9CB',
    barStyle: { backgroundColor: '#00000000' },
});

结果：

在此处输入图像描述

我是 React-Native 的新手。请帮我。

4

6 回答 6

3

您只需添加screenOptions={{tabBarIconStyle: { display: "none" }}}如下示例。

<Tab.Navigator
  screenOptions={{
    tabBarLabelPosition: "beside-icon",
    tabBarLabelStyle: {
      fontWeight: "700",
      fontSize: 15
    },
    tabBarIconStyle: { display: "none" },
  }}
>
  <Tab.Screen
    component={DemoComponent}
    name="Demo"
    options={{ tabBarLabel: "My Demo" }}
  />
</Tab.Navigator>
于 2021-09-18T15:54:26.527 回答
1

只需在 Tab.Screen 中添加此选项，您想在 TabNavigator 中隐藏它，如下所示。

<Tab.Screen name="Home" component={HomeStack} options={{
    tabBarButton: () => null,
    tabBarVisible: false,
  }} />
于 2021-12-20T10:11:56.600 回答
0

我今天遇到了同样的问题，我在整个互联网上都没有找到单一的解决方案。

幸运的是，我设法用以下样式解决了它：

tabBarOptions={{
  labelStyle: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    textAlignVertical: 'center',
  },
}}
于 2020-09-16T04:40:04.877 回答
0

我用下面的 tabBarOptions 解决了这个问题，

tabBarOptions: {
  style: {
    backgroundColor: 'white',
    alignItems: 'center',
  },
  labelStyle: {
    fontSize: 16,
  },
  activeTintColor: '#444444',
  inactiveTintColor: 'lightgrey',
  showIcon: false,
}
于 2021-02-11T11:23:50.483 回答
0

对我来说，只工作

tabBarLabelStyle: {
    position: 'absolute'
}

如果您想查看差异，请添加borderWith: 1以确保

于 2021-12-16T17:24:12.557 回答
-1

将此添加到您的导航代码中：

tabBarOptions: {
    showIcon: false
},

参考：反应导航文档

于 2020-06-23T09:02:51.203 回答