React 导航更改 tabBar 下方的背景颜色

Question

我在 React Native 项目中使用 React Navigations tabBar，但我不知道如何正确更改底部选项卡栏的背景颜色。我使用 Expo 来制作我的应用程序，并且还编辑了 app.json 以具有正确的背景颜色，但没有任何变化。这是我的代码：

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      
      screenOptions={{
        tabBarActiveTintColor: "#E40066",
        tabBarInactiveTintColor: "#fff",
        tabBarActiveBackgroundColor: "#171717",
        tabBarInactiveBackgroundColor: "#171717",
        
        
        headerShown: false,
        tabBarStyle: {
          borderWidth: 1,
        },
        style: {
          backgroundColor: "#171717",
          
          
        },
      }}
    >
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons
              name="glass-cocktail"
              color={color}
              size={size}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Search"
        component={Search}
        options={{
          tabBarLabel: "Search",
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="magnify" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Saved"
        component={Saved}
        options={{
          tabBarLabel: "Saved",
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="heart" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  const navTheme = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      background: "#171717",
    },
  };

  return (
    <NavigationContainer theme={navTheme}>
      <MyTabs style={{ backgroundColor: "#171717" }}></MyTabs>
    </NavigationContainer>
  );
}

但是我的 tabBar 看起来像this，我希望它是#171717，而不是白色...提前谢谢你

Answer 1

解决方案是制作一个主题来更改背景颜色：

export default function App() {
  const navTheme = {
    colors: {
      background: "#171717"
    }
  };

  return (
    <NavigationContainer theme={navTheme}>
      <MyTabs style={{ backgroundColor: "#171717" }}></MyTabs>
    </NavigationContainer>
  );
}

Answer 2

您使用以下代码在选项卡屏幕中设置背景颜色是错误的

style: {
      backgroundColor: "#171717",          
},

请使用以下代码设置背景颜色

<Tab.Navigator 
screenOptions={{
        tabBarStyle: {
          backgroundColor: '#fff',
        },
      }}>
</Tab.Navigator>

我希望这能解决您的问题

Answer 3

你可以用这个

<Tab.Navigator
      tabBarOptions={{
      style: {
        backgroundColor:'#171717 '
      }
    }}>
    {Screens}
    </Tab.Navigator>

Answer 4

如果您使用的是Expo 51v 使用此代码更改选项卡背景颜色：

  screenOptions={{
        tabBarStyle: {
          backgroundColor: "red",
        },
      
      }}