Как изменить цвет фона, который отображается сзади на BottomTab в React Navigation v5?

Question

Я хочу создать свой BottomTab с радиусом границы, но за моей вкладкой появляется цвет фона (белый), и я не знаю, как его удалить или изменить:

Я нашел «решение»:

tabBarOptions={{
        showLabel: false,
        activeTintColor: theme.primary,
        inactiveTintColor: theme.tintInactiveTabBar,
        style: {
          backgroundColor: theme.backgroundTabBar,
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          borderTopWidth: 0,
          borderTopRightRadius: 10,
          borderTopLeftRadius: 10,
          height: 60,
          elevation: 0,
        },
      }}

Но заданная позиция: абсолютная имеет другие проблемы: не может видеть все содержимое в ScrollViews:

Я пытаюсь установить отступы или поля в контейнерах, но это не работает.

Answer 1

Попробуйте:

activeBackgroundColor - Цвет фона активной вкладки, inactiveBackgroundColor - Цвет фона неактивной вкладки.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator tabBarOptions={{
            scrollEnabled: true,
            activeTintColor: '#3684F6', //'rgb(12,157,197)',
            inactiveTintColor: 'black',
            indicatorStyle: {
              backgroundColor: '#ACACAC',
            },
            labelStyle: {
              fontSize: 16,
              color: 'black',
            },
activeBackgroundColor: 'white', 
inactiveBackgroundColor : 'gray',
            style: {
              backgroundColor: 'white',
            },
            statusBarStyle: 'light-content',
          }}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}