如何为@react-navigation/material-bottom-tabs底部标签添加长按事件监听？

@react-navigation/material-bottom-tabs 默认不直接支持tabLongPress监听器，且直接用手势处理器包裹图标会被底层tab栏容器拦截手势，所以得通过自定义tabBarButton来实现长按功能，具体步骤如下：

实现步骤 #

1. 自定义带长按事件的TabBarButton组件，保留原有点击逻辑的同时添加长按处理：

import { Pressable } from 'react-native';

const CustomTabBarButton = ({ onPress, onLongPress, children, ...rest }) => {
  return (
    <Pressable
      onPress={onPress}
      onLongPress={onLongPress}
      style={({ pressed }) => [
        { opacity: pressed ? 0.7 : 1 },
        { padding: 8 } // 可根据需求调整内边距等样式
      ]}
      {...rest}
    >
      {children}
    </Pressable>
  );
};

2. 在Tab.Screen的options中指定tabBarButton为自定义组件，传入长按事件处理函数，同时保留原有图标逻辑：

<Tab.Navigator ...>
  <Tab.Screen
    ...
    options={{
      tabBarIcon: ({ focused, color }) => (
        <FontAwesomeIcon
          icon={icon}
          color={color}
          size={24}
        />
      ),
      // 绑定自定义tabBarButton
      tabBarButton: (props) => (
        <CustomTabBarButton
          {...props}
          onLongPress={() => console.log('标签被长按了！')}
        />
      )
    }}
    listeners={{
      tabPress: () => console.log('tabPress')
    }}
  />
</Tab.Navigator>

原理说明 #

自定义的CustomTabBarButton用Pressable（React Native官方推荐的交互组件）包裹图标，既保留了原有的onPress点击切换逻辑，又能直接添加onLongPress事件。这种方式不会被底层容器拦截手势，因为我们直接替换了tab栏的按钮组件，完全掌控了交互逻辑。

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