createBottomTabNavigator 设置 tabBar 高度导致顶行消失

Question

在我设置高度之前，它看起来像这样，注意在 tabBar 上方有一条线。

我像这样更改 tabBar 高度

{
    initialRouteName: "Find",
    tabBarOptions: {
        activeTintColor: '#0a0a0a',
        labelStyle: {
            fontSize: ScreenUtil.scale(14),
        },
        style: {
            backgroundColor: '#f7f7f7',
            //----------add this line------------------------//
            height: 70;
        },
    }
}

结果是这样的，那条线现在已经消失了。

如果我想更改tabBar高度并保持该行，我该怎么办？

Answer 1

您可以使用自定义标签栏或尝试设置边框。这是显示自定义标签栏的示例。

export const MainTabNavigator = TabNavigator({
  Home: { screen: HomeScreen },
  Activity: { screen: ActivityScreen },
  Contacts: {screen: ContactsScreen },
  More: { screen: MoreScreen }
}, {
  tabBarComponent: TXTabBar, // custom tabbar component
  tabBarPosition: 'bottom',
});

这是设置边框的代码。

{
    initialRouteName: "Find",
    tabBarOptions: {
        activeTintColor: '#0a0a0a',
        labelStyle: {
            fontSize: ScreenUtil.scale(14),
        },
        style: {
            backgroundColor: '#f7f7f7',
            //----------add this line------------------------//
            height: 70;
            borderTopWidth: 1,
            borderTopColor: 'red'
        },
    }
}