如何使用 Tab.Navigator screenOptions 更改活动选项卡颜色？

Question

我正在使用 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 中的某种“聚焦”或“活动”字段？或者我必须制作一个自定义标签栏吗？我只希望 tabBarItemStyle 中的 backgroundColor 属性和 tabBarLabelStyle 中的 color 属性根据选项卡是否处于活动状态而改变。

Answer 1

screenOptions

可以用一个函数来初始化，该函数接收包含

route

和

navigation

的对象，并且导航对象中有一个名为

isFocused

的函数，但我认为它没有达到你想要的效果，你需要制作一个像文档所说的那样的自定义选项卡栏https://reactnavigation.org/docs/material-top-tab-navigator才能实现这一目标。