活动时更改顶部标签栏背景颜色

Question

我在屏幕上有一个带有两个选项卡的顶部选项卡栏，它是使用 React Navigation 创建的。我想在选项卡处于活动状态时将灰色背景颜色更改为粉红色，我试图找到一些解决方案，但找不到任何解决方案。这甚至可以做到吗？

感谢任何帮助！

Navigator.js:

import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import { Tab1 } from "../pages/Tab1";
import { Tab2 } from "../pages/Tab2";

const TopTab = createMaterialTopTabNavigator();

export function TopTabNavigator() {
  return (
    <TopTab.Navigator
      screenOptions={{
        tabBarLabelStyle: {
          fontSize: 12,
          textTransform: "none",
        },
        tabBarItemStyle: {
          fontSize: 12,
          textTransform: "none",
          height: 30,
          minHeight: 10,
          backgroundColor: "#706c6c",
          borderRadius: 100,
          margin: 10,
          marginVertical: 10,
          padding: 3,
        },
        tabBarStyle: {
          backgroundColor: "transparent",
        },
        tabBarIndicator: () => null,
      }}
    >
      <TopTab.Screen name="Tab1" component={Tab1} />
      <TopTab.Screen name="Tab2" component={Tab2} />
    </TopTab.Navigator>
  );
}

App.js:

import { NavigationContainer } from "@react-navigation/native";
import { TopTabNavigator } from "./src/routes/Navigator";

export default function App() {
  return (
    <NavigationContainer>
      <TopTabNavigator />
    </NavigationContainer>
  );
}

这是现在的样子，只有文本颜色在激活时会变成更白的颜色。

Answer 1

给你，我做了一个小吃，你可以试试看：snack

你基本上可以玩变量 isFocused 来改变你想要的任何东西

活动时更改顶部标签栏背景颜色

Changing top tab bar background color when active

navigation

tabs

colors

reactjs

react-native