React-Native中Material Bottom Tabs样式修改技术咨询

以下是针对你提出的样式需求的具体修改方案，基于@react-navigation/material-bottom-tabs实现：

核心配置说明 #

通过Tab.Navigator的属性和screenOptions可以实现绝大多数样式自定义，下面逐个对应你的需求：

1. 修改选中时的指示器颜色（椭圆形） #

使用activeIndicatorStyle属性自定义指示器的背景色，默认样式即为椭圆形，直接设置颜色即可：

<Tab.Navigator
  activeIndicatorStyle={{ backgroundColor: '#FF5722' }} // 自定义指示器颜色
>

2. 修改图标尺寸 #

可以通过screenOptions里的tabIconStyle统一设置所有图标尺寸，也可以在单个页面的图标组件中单独指定：

<Tab.Navigator
  screenOptions={{
    tabIconStyle: { width: 28, height: 28 } // 统一设置图标宽高
  }}
>

单个页面图标单独设置示例：

<Tab.Screen
  name="Home"
  component={HomeScreen}
  options={{
    tabIcon: ({ focused }) => (
      <Icon name="home" size={30} color={focused ? '#FF5722' : '#999'} /> // 单独定义尺寸
    )
  }}
/>

3. 修改底部导航栏背景颜色 #

通过tabBarStyle设置背景色，还可以搭配圆角、阴影等样式增强视觉效果：

<Tab.Navigator
  tabBarStyle={{ backgroundColor: '#FFFFFF', borderRadius: 16, margin: 10, shadowColor: '#000' }}
>

4. 其他可自定义样式 #

• 选中/未选中的图标/文字颜色：用activeTintColor（选中状态）和inactiveTintColor（未选中状态）统一控制

  <Tab.Navigator
    activeTintColor="#FF5722"
    inactiveTintColor="#9E9E9E"
  >
  

• 导航栏高度：在tabBarStyle中设置height属性
• 文字样式：通过screenOptions的tabLabelStyle自定义字体大小、粗细等

  screenOptions={{
    tabLabelStyle: { fontSize: 12, fontWeight: '600' }
  }}
  

• 隐藏文字仅显示图标：设置showLabel为false即可

  <Tab.Navigator
    showLabel={false}
  >
  

完整示例代码 #

import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs";
import { Icon } from "react-native-vector-icons/MaterialCommunityIcons"; // 示例图标库

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeTintColor="#FF5722"
      inactiveTintColor="#9E9E9E"
      activeIndicatorStyle={{ backgroundColor: '#FF5722' }}
      tabBarStyle={{ 
        backgroundColor: '#FFFFFF', 
        borderRadius: 16, 
        margin: 10, 
        height: 60,
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1
      }}
      screenOptions={{
        tabIconStyle: { width: 28, height: 28 },
        tabLabelStyle: { fontSize: 12, fontWeight: '600' }
      }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabIcon: ({ focused }) => (
            <Icon name="home" color={focused ? '#FF5722' : '#9E9E9E'} />
          )
        }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileScreen}
        options={{
          tabIcon: ({ focused }) => (
            <Icon name="account" color={focused ? '#FF5722' : '#9E9E9E'} />
          )
        }}
      />
    </Tab.Navigator>
  );
}

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