如何修改React Native中createMaterialTopTabNavigator选中蓝条颜色

你当前使用的是Material Top Tabs导航器，tabBarActiveTintColor仅用于控制标签项（图标/文字）的活跃状态颜色，无法修改底部的指示条样式。要更改指示条的颜色，需要使用tabBarIndicatorStyle属性：

修改你的导航器配置，在screenOptions中添加tabBarIndicatorStyle：

<Tabs.Navigator
    screenOptions={{
        tabBarScrollEnabled: true,
        tabBarShowLabel: false,
        tabBarActiveTintColor: 'green',
        tabBarStyle: {
            backgroundColor: theme.backgroundColor,
            position: 'absolute',
            bottom: 0,
            left: 0,
            right: 0,
            margin: 50,
            maxHeight: 50,
            borderRadius: 10,
            justifyContent: 'center',
            ...style.shadow
        },
        // 添加该行修改指示条颜色
        tabBarIndicatorStyle: {
            backgroundColor: 'green' // 替换为你需要的颜色
        }
    }}
>
    {/* 你的Tab.Screen组件 */}
</Tabs.Navigator>

补充说明： #

• tabBarIndicatorStyle是Material Top Tabs的专属配置项，除了颜色外，还可以设置指示条的高度、圆角等样式属性。
• 如果需要更复杂的自定义效果，也可以通过tabBarIndicator属性传入自定义组件来实现。

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