如何移除React Navigation底部标签栏的点击高亮效果？

针对React Native 0.76.6 + @react-navigation/bottom-tabs 7.2.0的场景，给你几个直接可用的解决方法：

方法一：全局配置禁用按钮反馈 #

直接在Tab.Navigator的screenOptions里设置tabBarButtonProps，禁用Android的波纹和按压效果，代码如下：

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

const Tab = createBottomTabNavigator();

function AppTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarButtonProps: {
          // 禁用Android波纹效果
          android_ripple: null,
          // Android 12+ 禁用系统按压反馈
          pressEffectEnabled: false,
        },
      }}
    >
      {/* 你的页面组件 */}
      <Tab.Screen name="首页" component={HomeScreen} />
      <Tab.Screen name="设置" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

方法二：自定义TabBar完全控制按钮样式 #

如果方法一无效，直接自定义整个底部导航栏，用Pressable实现无反馈的点击：

import { Pressable, View, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function CustomTabs() {
  return (
    <Tab.Navigator
      tabBar={({ state, descriptors, navigation }) => (
        <View style={styles.tabBarContainer}>
          {state.routes.map((route, index) => {
            const isFocused = state.index === index;
            const { options } = descriptors[route.key];
            const tabLabel = options.tabBarLabel || options.title || route.name;

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

            return (
              <Pressable
                key={route.key}
                onPress={handlePress}
                style={[styles.tabItem, isFocused && styles.activeTabItem]}
                android_ripple={null}
                pressEffectEnabled={false}
              >
                <Text style={[styles.tabText, isFocused && styles.activeTabText]}>
                  {tabLabel}
                </Text>
                {/* 如需图标，在这里添加Icon组件 */}
              </Pressable>
            );
          })}
        </View>
      )}
    >
      <Tab.Screen name="首页" component={HomeScreen} />
      <Tab.Screen name="设置" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

const styles = StyleSheet.create({
  tabBarContainer: {
    flexDirection: 'row',
    backgroundColor: '#ffffff',
    borderTopWidth: 1,
    borderTopColor: '#eee',
    paddingVertical: 8,
  },
  tabItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  activeTabItem: {
    // 自定义选中状态样式，比如背景色
  },
  tabText: {
    fontSize: 12,
    color: '#666',
  },
  activeTabText: {
    color: '#2196F3',
    fontWeight: '500',
  },
});

方法三：原生主题修改（不推荐，影响全局） #

如果上面的方法都不生效，可以修改Android项目的res/values/styles.xml，将波纹颜色设为透明：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 其他主题配置 -->
        <item name="android:colorControlHighlight">@android:color/transparent</item>
    </style>
</resources>

注意：这个会全局移除所有控件的波纹反馈，谨慎使用。

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