React Native：如何通过screenOptions修改Tab激活标签的颜色？

我正在使用React Native，具体是React Navigation中的createMaterialTopTabNavigator。我希望实现点击标签时，激活的标签变为紫色，未激活的标签保持灰色。我想知道是否可以通过screenOptions属性实现该效果，还是必须自定义标签栏。

当前代码如下：

function CarouselTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        swipeEnabled: false,
        tabBarScrollEnabled: true,
        tabBarIndicator: () => null,
        tabBarStyle: {
          backgroundColor: "white",
        },
        tabBarItemStyle: {
          width: "auto",
          alignItems: "flex-start",
          backgroundColor: "#5B2FA3",
          marginHorizontal: 5,
          marginVertical: 10,
          borderRadius: 25,
        },
        tabBarLabelStyle: {
          fontSize: 13,
          textTransform: "capitalize",
          fontWeight: "500",
          color: "white"
        },
        tabBarActiveTintColor: "green"
      }}
    >
      <Tab.Screen
        name="Currently Reading"
        component={CurrentlyReadingCarousel}
      />
      <Tab.Screen name="Want To Read" component={Carousel} />
      <Tab.Screen name="Read" component={Carousel} />
      <Tab.Screen name="Did Not Finish" component={Carousel} />
    </Tab.Navigator>
  );
}

目前所有标签都应用了tabBarItemStyle里的样式，而非仅激活标签。尝试过tabBarActiveTintColor但没有效果，想了解是否能在screenOptions中获取focused/active状态字段，还是必须自定义标签栏？我只需要tabBarItemStyle的backgroundColor和tabBarLabelStyle的color根据标签是否激活动态变化。

不需要自定义标签栏，只需将screenOptions设置为函数形式，就能获取当前标签的focused状态，进而动态配置样式。

修改后的代码如下：

function CarouselTabs() {
  return (
    <Tab.Navigator
      // 将screenOptions改为函数，接收包含focused的参数对象
      screenOptions={({ focused }) => ({
        swipeEnabled: false,
        tabBarScrollEnabled: true,
        tabBarIndicator: () => null,
        tabBarStyle: {
          backgroundColor: "white",
        },
        tabBarItemStyle: {
          width: "auto",
          alignItems: "flex-start",
          // 根据激活状态切换背景色：激活为紫色，未激活为灰色
          backgroundColor: focused ? "#5B2FA3" : "#cccccc",
          marginHorizontal: 5,
          marginVertical: 10,
          borderRadius: 25,
        },
        tabBarLabelStyle: {
          fontSize: 13,
          textTransform: "capitalize",
          fontWeight: "500",
          // 根据激活状态切换文字颜色：激活为白色，未激活为深灰色
          color: focused ? "white" : "#666666"
        }
      })}
    >
      <Tab.Screen
        name="Currently Reading"
        component={CurrentlyReadingCarousel}
      />
      <Tab.Screen name="Want To Read" component={Carousel} />
      <Tab.Screen name="Read" component={Carousel} />
      <Tab.Screen name="Did Not Finish" component={Carousel} />
    </Tab.Navigator>
  );
}

核心要点： #

• screenOptions作为函数时，参数会包含当前标签的focused状态（布尔值）；
• 通过三元表达式，根据focused的值分别设置激活和未激活状态下的背景色、文字颜色；
• 无需依赖tabBarActiveTintColor，直接通过focused控制样式更灵活。

这样就能实现需求效果，完全通过screenOptions完成，不需要自定义标签栏。

内容的提问来源于stack exchange，提问作者Kaley