如何在React Native中实现类似Pinterest的长按选择菜单？

你需要的长按条目弹出菜单、滑动手指即可选择对应选项的效果，可按以下方案实现：

核心实现逻辑 #

• 手势依赖可以选择RN自带的手势响应系统，也可以用react-native-gesture-handler获得更流畅的原生手势体验，无需引入额外大型UI库。
• 给列表的每个条目绑定长按手势，长按触发时：
  1. 计算当前长按条目在屏幕中的坐标位置，确定菜单弹出的定位坐标
  2. 渲染全屏的菜单浮层（层级设置为最高，避免被其他元素遮挡），浮层内渲染所有菜单选项
• 给菜单浮层绑定手势移动、抬起事件：
  1. 手指移动时实时获取触点坐标，和每个菜单项的预设坐标范围做匹配，匹配成功的菜单项切换为高亮状态
  2. 手指抬起时，若当前触点在某个菜单项范围内，执行对应选项的业务逻辑，否则直接关闭菜单
  3. 菜单关闭时销毁浮层，避免占用多余渲染资源

核心代码示例 #

import React, { useState, useRef } from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';
import { LongPressGestureHandler, State, GestureHandlerRootView, PanGestureHandler } from 'react-native-gesture-handler';

const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
const MENU_OPTIONS = ['分享', '收藏', '隐藏', '举报'];

const PinterestMenuItem = ({ item, onMenuSelect }) => {
  const [menuVisible, setMenuVisible] = useState(false);
  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
  const [activeOption, setActiveOption] = useState(null);
  const itemRef = useRef(null);
  const optionLayouts = useRef([]);

  const handleLongPress = () => {
    // 获取长按条目位置，计算菜单弹出坐标
    itemRef.current.measure((x, y, width, height, pageX, pageY) => {
      setMenuPosition({
        x: Math.max(0, Math.min(pageX, screenWidth - 200)),
        y: Math.max(0, Math.min(pageY - 100, screenHeight - 300))
      });
      setMenuVisible(true);
    });
  };

  const handlePanMove = ({ nativeEvent }) => {
    if (!menuVisible) return;
    const touchX = nativeEvent.absoluteX;
    const touchY = nativeEvent.absoluteY;
    // 匹配当前触点对应的菜单项
    const matched = optionLayouts.current.find((layout) => {
      return touchX >= layout.x && touchX <= layout.x + layout.width 
        && touchY >= layout.y && touchY <= layout.y + layout.height;
    });
    setActiveOption(matched ? matched.index : null);
  };

  const handlePanEnd = () => {
    if (activeOption !== null) {
      onMenuSelect(MENU_OPTIONS[activeOption], item);
    }
    setMenuVisible(false);
    setActiveOption(null);
  };

  return (
    <GestureHandlerRootView>
      <LongPressGestureHandler
        onHandlerStateChange={({ nativeEvent }) => {
          if (nativeEvent.state === State.ACTIVE) handleLongPress();
        }}
        minDurationMs={500}
      >
        <View ref={itemRef} style={styles.itemCard}>
          <Text style={styles.itemText}>{item.content}</Text>
        </View>
      </LongPressGestureHandler>

      {menuVisible && (
        <PanGestureHandler onGestureEvent={handlePanMove} onEnded={handlePanEnd}>
          <View style={styles.menuOverlay}>
            <View style={[styles.menuContainer, { left: menuPosition.x, top: menuPosition.y }]}>
              {MENU_OPTIONS.map((option, index) => (
                <View
                  key={index}
                  style={[
                    styles.optionItem,
                    activeOption === index && styles.optionActive
                  ]}
                  onLayout={(e) => {
                    e.target.measure((x, y, width, height, pageX, pageY) => {
                      optionLayouts.current[index] = { x: pageX, y: pageY, width, height, index };
                    });
                  }}
                >
                  <Text style={styles.optionText}>{option}</Text>
                </View>
              ))}
            </View>
          </View>
        </PanGestureHandler>
      )}
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  itemCard: {
    padding: 20,
    margin: 10,
    backgroundColor: '#fff',
    borderRadius: 12,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 6
  },
  itemText: { fontSize: 16 },
  menuOverlay: {
    position: 'absolute',
    width: screenWidth,
    height: screenHeight,
    top: 0,
    left: 0,
    backgroundColor: 'rgba(0,0,0,0.3)',
    zIndex: 999
  },
  menuContainer: {
    position: 'absolute',
    backgroundColor: '#fff',
    borderRadius: 8,
    overflow: 'hidden',
    minWidth: 150
  },
  optionItem: {
    paddingVertical: 12,
    paddingHorizontal: 16
  },
  optionActive: {
    backgroundColor: '#f0f0f0'
  },
  optionText: { fontSize: 15 }
});

export default PinterestMenuItem;

优化提示 #

• 可以给菜单弹出和收起加淡入淡出的动画，提升交互流畅度
• 边界场景处理：如果长按位置靠近屏幕边缘，自动调整菜单弹出的方向，避免菜单超出屏幕范围
• 可自定义菜单的样式、图标，匹配自身产品的设计风格

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