如何修改React Native Material Bottom Tab选中项的Splash Color？

方法1：配置Tab导航器的波纹颜色 #

直接在Tab.Navigator或单个Tab.Screen的配置里指定rippleColor，覆盖默认粉色：

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#fff"
      inactiveColor="#ccc"
      barStyle={{ backgroundColor: '#3f51b5' }}
      // 全局设置所有Tab的溅色/波纹颜色
      tabBarOptions={{
        rippleColor: '#808080' // 替换为你需要的颜色值
      }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: '首页',
          tabBarIcon: ({ color }) => (
            <Icon name="home" color={color} size={26} />
          ),
          // 单独给Home Tab设置溅色颜色（优先级高于全局）
          tabBarRippleColor: '#666'
        }}
      />
      {/* 其他Tab配置 */}
    </Tab.Navigator>
  );
}

方法2：修改Android全局主题 #

如果需要全局统一调整所有控件的点击反馈颜色，修改android/app/src/main/res/values/styles.xml（针对Android12+可在values-v31目录下单独配置）：

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- 其他已有属性 -->
    <!-- 控制点击波纹/溅色的颜色 -->
    <item name="android:colorControlHighlight">#your-custom-color</item>
</style>

Android12+的溅色效果会继承这个主题属性的颜色值。

方法3：自定义TabBar组件 #

若上述方法无效，可完全自定义TabBar，自行控制点击反馈：

import { TouchableNativeFeedback, View, Text } from 'react-native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();

const CustomTabBar = ({ state, descriptors, navigation }) => {
  return (
    <View style={{ flexDirection: 'row', backgroundColor: '#3f51b5' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label = options.tabBarLabel ?? route.name;
        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });
          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        // 自定义点击反馈的背景颜色
        const touchBg = TouchableNativeFeedback.Ripple('#666', false);

        return (
          <TouchableNativeFeedback
            key={route.key}
            onPress={onPress}
            background={touchBg}
          >
            <View style={{ flex: 1, paddingVertical: 16, alignItems: 'center' }}>
              <Text style={{ color: isFocused ? '#fff' : '#ccc' }}>{label}</Text>
            </View>
          </TouchableNativeFeedback>
        );
      })}
    </View>
  );
};

// 使用自定义TabBar
function MyTabs() {
  return (
    <Tab.Navigator tabBar={(props) => <CustomTabBar {...props} />}>
      {/* 你的Tab.Screen配置 */}
    </Tab.Navigator>
  );
}

额外提示 #

• 确保@react-navigation/material-bottom-tabs依赖为最新版本，旧版本可能存在Android12适配缺陷
• 单个Tab的tabBarRippleColor优先级高于全局tabBarOptions.rippleColor

内容的提问来源于stack exchange，提问作者Ara The Dev