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'
        },
    }
}