React Native Material Top Tabs Navigator自定义样式实现咨询

从你的当前设计和目标设计的差异来看，核心是要把默认的底部指示器改成选中Tab带圆角高亮背景的样式，同时调整文字和布局细节，下面是修改后的完整代码：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { View, Text } from 'react-native';

const Tab = createMaterialTopTabNavigator();  

// 自定义Tab标签组件，实现选中/未选中状态切换
const CustomTabLabel = ({ focused, label }) => {
  return (
    <View style={{
      paddingHorizontal: 16,
      paddingVertical: 8,
      borderRadius: 20,
      backgroundColor: focused ? '#fff' : 'transparent',
    }}>
      <Text style={{
        color: focused ? '#07509F' : '#fff',
        fontWeight: focused ? 'bold' : 'normal',
        fontSize: 14, // 可根据需求调整字号
      }}>
        {label}
      </Text>
    </View>
  );
};

<Tab.Navigator
  initialRouteName="HOME"
  sceneContainerStyle={{
    backgroundColor: '#fff', // 内容区域背景色，按需调整
  }}
  screenOptions={{
    tabBarScrollEnabled: true,
    tabBarIndicatorStyle: {
      height: 0, // 隐藏默认的底部指示器
    },
    tabBarStyle: {
      width: '100%',
      borderWidth: 0,
      elevation: 0,
      backgroundColor: '#07509F',
      marginBottom: 10,
      height: 50, // 调高导航栏高度适配自定义Tab内边距
      paddingHorizontal: 8, // 左右留白，让Tab不贴边
    },
    tabBarItemStyle: {
      marginHorizontal: 4, // Tab之间的间距
    },
  }}
>
  <Tab.Screen 
    name="HOME" 
    component={Home} 
    options={{ 
      tabBarLabel: ({ focused }) => <CustomTabLabel focused={focused} label="HOME" /> 
    }} 
  />
  <Tab.Screen 
    name="MATCHES" 
    component={Matches} 
    options={{ 
      tabBarLabel: ({ focused }) => <CustomTabLabel focused={focused} label="MATCHES" /> 
    }} 
  />
  <Tab.Screen 
    name="POINTS TABLE" 
    component={Points_Tables} 
    options={{ 
      tabBarLabel: ({ focused }) => <CustomTabLabel focused={focused} label="POINTS TABLE" /> 
    }} 
  />
  <Tab.Screen 
    name="PLAYER STATS" 
    component={Player_Stats} 
    options={{ 
      tabBarLabel: ({ focused }) => <CustomTabLabel focused={focused} label="PLAYER STATS" /> 
    }} 
  />
  <Tab.Screen 
    name="TEAMS" 
    component={Teams} 
    options={{ 
      tabBarLabel: ({ focused }) => <CustomTabLabel focused={focused} label="TEAMS" /> 
    }} 
  />
</Tab.Navigator>

核心修改说明： #

• 移除默认指示器：将tabBarIndicatorStyle的height设为0，因为目标设计用的是Tab背景高亮而非底部线条
• 自定义Tab样式：通过CustomTabLabel组件根据选中状态切换背景色和文字颜色，添加圆角和内边距，完全匹配目标设计的视觉效果
• 优化布局细节：调整导航栏高度、左右内边距和Tab间距，让整体布局更宽松自然
• 可灵活微调：你可以根据目标设计的具体细节，修改borderRadius、paddingHorizontal、fontSize等参数，进一步贴合需求

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