createBottomTabNavigator установка высоты tabBar вызывает исчезновение верхней строки

Question

Перед тем, как установить высоту, она выглядит примерно так: обратите внимание, что над панелью вкладок есть линия.

Я изменяю высоту 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'
        },
    }
}