如何修改TopTabNavigator中选中标签的底部边框颜色

你要修改的活跃标签底部线条，在react-navigation的createMaterialTopTabNavigator里叫做标签指示器（Tab Indicator），可以通过tabBarIndicatorStyle属性直接定制样式。

以下是修改后的完整代码，直接在screenOptions中添加对应配置即可：

const TopTab = createMaterialTopTabNavigator()

function ProgressNavigator() {
  const themes = useThemes()

  return (
    <TopTab.Navigator
      screenOptions={{
        tabBarStyle: {
          backgroundColor: themes.lightBackground,
        },
        tabBarLabelStyle: {
          paddingTop: 10,
          fontSize: 14,
          fontWeight: "bold",
        },
        tabBarActiveTintColor: themes.secondary.color,
        tabBarInactiveTintColor: "#FFF",
        // 新增：修改活跃标签底部指示器样式
        tabBarIndicatorStyle: {
          backgroundColor: themes.secondary.color, // 设置你需要的边框颜色
          height: 3 // 可按需调整指示器高度
        }
      }}
    >
      <TopTab.Screen name="Table" component={ProgressTable} />
      <TopTab.Screen name="Chart" component={ProgressChart} />
    </TopTab.Navigator>
  )
}

额外自定义选项： #

如果需要更灵活的样式（比如调整指示器宽度、添加圆角），tabBarIndicatorStyle支持所有View组件的样式属性，例如：

tabBarIndicatorStyle: {
  backgroundColor: '#FF5722',
  height: 2,
  width: '70%', // 让指示器比标签文字窄一些
  borderRadius: 1,
  alignSelf: 'center'
}

要是需要完全自定义指示器的结构，还可以用tabBarIndicator属性传入自定义组件：

tabBarIndicator: () => (
  <View style={{
    backgroundColor: '#2196F3',
    height: 3,
    marginLeft: 15,
    marginRight: 15
  }} />
)

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