Expo 52 Android端如何移除TabItem按压及默认状态下的阴影

问题描述 #

我正在开发Expo 52应用，使用expo-router的Tabs组件实现底部标签导航。默认情况下，标签项在按压时会显示阴影效果，Android端尤为明显。我尝试通过tabBarStyle和screenOptions自定义标签栏样式，但Android端的阴影仍无法去除。

当前使用的代码：

import { Tabs } from 'expo-router';
import FeatherIcon from 'react-native-vector-icons/Feather'; // Example import, replace with your actual icon component
import Colors from './path-to-colors'; // Your color definitions
import { iconSize, TABBAR_HEIGHT } from './path-to-your-config'; // Your size and height constants

export default function MyTabs() {
  return (
    <Tabs
      screenOptions={({}) => ({
        headerShown: false,
        tabBarActiveTintColor: '#000',
        tabBarHideOnKeyboard: true,
        lazy: true,
        tabBarStyle: {
          position: 'absolute',
          height: TABBAR_HEIGHT - 25,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          paddingVertical: 0,
          borderTopWidth: 0,
          elevation: 0, // Removes shadow on Android
          shadowOpacity: 0, // Removes shadow on iOS
          shadowOffset: {
            width: 0,
            height: 0,
          },
        },
        tabBarIconStyle: {
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        },
        tabBarShowLabel: false,
        animation: 'fade',
      })}
    >
      <Tabs.Screen
        name="home"
        options={{
          tabBarIcon: ({ focused }) => (
            <FeatherIcon
              name="home"
              color={focused ? Colors.redKure : Colors.c7d7d7d}
              width={iconSize.m + 3}
              height={iconSize.m + 3}
            />
          ),
        }}
      />
      {/* The rest of the code.. */}
    </Tabs>
  );
}

解决方案 #

你当前设置的tabBarStyle里的elevation:0仅移除了整个标签栏的阴影，但单个标签项按压时的阴影是由默认TabBarButton组件的Android按压效果（elevation动态变化）导致的，需要针对单个标签项进行样式覆盖。

方法一：自定义TabBarButton组件 #

创建完全自定义的按钮组件，替代默认TabBarButton，彻底控制按压状态样式：

import { Pressable } from 'react-native';

// 自定义标签按钮组件
const CustomTabButton = ({ children, onPress }) => {
  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => ({
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        // 强制移除按压时的elevation
        elevation: 0,
        // 自定义按压状态背景（可选，避免默认视觉变化）
        backgroundColor: pressed ? 'transparent' : 'transparent',
      })}
    >
      {children}
    </Pressable>
  );
};

在每个Tabs.Screen的options中指定使用该组件：

<Tabs.Screen
  name="home"
  options={{
    tabBarButton: (props) => <CustomTabButton {...props} />,
    tabBarIcon: ({ focused }) => (
      <FeatherIcon
        name="home"
        color={focused ? Colors.redKure : Colors.c7d7d7d}
        width={iconSize.m + 3}
        height={iconSize.m + 3}
      />
    ),
  }}
/>

方法二：全局配置标签项样式并禁用涟漪 #

在screenOptions中添加单个标签项的样式配置，同时禁用Android按压涟漪效果：

screenOptions={({}) => ({
  // 保留你已有的配置...
  headerShown: false,
  tabBarActiveTintColor: '#000',
  tabBarHideOnKeyboard: true,
  lazy: true,
  tabBarStyle: {
    position: 'absolute',
    height: TABBAR_HEIGHT - 25,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 0,
    borderTopWidth: 0,
    elevation: 0,
    shadowOpacity: 0,
    shadowOffset: { width: 0, height: 0 },
  },
  tabBarIconStyle: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  tabBarShowLabel: false,
  animation: 'fade',

  // 新增以下配置
  tabBarItemStyle: {
    elevation: 0, // 移除单个标签项的默认阴影
  },
  tabBarButtonStyle: {
    android_ripple: {
      color: 'transparent', // 禁用按压涟漪效果
    },
  },
})}

补充说明 #

如果仍有阴影残留，检查项目中是否存在全局样式（如react-native主题配置）或第三方组件样式影响，确保没有继承的elevation属性。

内容的提问来源于stack exchange，提问作者Hilal Oruç