react-native - 如何在 React Navigation v5 中更改出现在 BottomTab 后面的背景颜色？

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

但是set position: absolute还有一个问题：在ScrollViews中看不到所有内容：

我尝试在 te 容器中设置填充或边距，但它不起作用。

标签： react-nativereact-navigation

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>
  );
}