React Native长按+滑动/拖拽选择元素功能实现求助

我正尝试创建长按并滑动/拖拽来聚焦/选择元素的功能，想要实现类似Facebook/LinkedIn应用中的React按钮交互效果，具体需求如下：

• 长按Select按钮且不移动手指时，显示元素列表，抬手即可选中元素
• 长按后移动手指，显示元素列表，在手势区域内滑动可聚焦元素，抬手完成选中
• 手指移出手势区域时，取消元素聚焦
• 移出区域后抬手，取消聚焦并隐藏元素列表
• 移出区域后再移回手势区域，重新显示列表并允许滑动聚焦选中元素

我尝试给GestureItemRenderer添加PanResponder，但组件渲染后拖拽功能无法正常工作，当前代码如下：

import React, {useState} from 'react';
import {
  View,
  StyleSheet,
  Text,
  ViewProps,
  TouchableOpacity,
} from 'react-native';

const GestureItemRenderer = (
  props: ViewProps & {
    items: number[];
    selectedItem: number | null;
    setViewItems: React.Dispatch<React.SetStateAction<boolean>>;
    handleSelection: (item: number) => void;
  },
) => {
  const itemArea = 30;
  const [focusedItem, setFocusedItem] = useState<number | null>(null);

  const handleFocus = (item: number | null) => {
    setFocusedItem(item);
  };

  const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      padding: 6,
      gap: 6,
      borderWidth: 1,
      borderColor: 'red',
    },
    itemContainer: {
      borderWidth: 1,
      borderColor: 'black',
      height: itemArea,
      width: itemArea,
    },
    selectedItem: {
      backgroundColor: 'red',
    },
    focusedItem: {
      backgroundColor: 'blue',
    },
  });

  return (
    <View style={styles.container} {...props}>
      {props.items.map((item, index) => (
        <TouchableOpacity
          onPress={() => props.handleSelection(item)}
          style={[
            styles.itemContainer,
            item === props.selectedItem && styles.selectedItem,
            item === focusedItem && styles.focusedItem,
          ]}
          key={index}>
          <Text>{item}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

const SelectorComponent = () => {
  const items = [1, 2, 3, 4, 5, 6, 7, 8];

  const [selectedItem, setSelectedItem] = useState<number | null>(null);
  const [viewItems, setViewItems] = useState(false);

  const styles = StyleSheet.create({
    container: {},
  });

  const handleSelectionFromSelectButton = () => {
    if (selectedItem) {
      setSelectedItem(null);
    } else {
      setSelectedItem(items[0]);
    }
  };

  const handleSelection = (value: number) => {
    setSelectedItem(value);
    setViewItems(false);
  };

  const handleLongPress = () => {
    // I want these functionalities when the user long presses:
    // If user long presses on the select button and doesn't move their finger, show the item and let user lift their finger to select it
    // If user long presses on the select button and moves their finger, show the item and let user move their finger inside the gesture area to focus on an item and lift their finger to select it
    // If user long presses on the select button and moves their finger outside the gesture area, unfocus the item
    // If user long presses on the select button and moves their finger outside the gesture area and lifts their finger, unfocus the item and hide the gesture area
    // If user long presses on the select button and moves their finger outside the gesture area and moves their finger back inside the gesture area, show the gesture area and let user move their finger inside the gesture area to focus on an item and lift their finger to select it
  };

  return (
    <View style={styles.container}>
      {viewItems && (
        <GestureItemRenderer
          items={items}
          selectedItem={selectedItem}
          setViewItems={setViewItems}
          handleSelection={handleSelection}
        />
      )}
      <TouchableOpacity
        onPress={handleSelectionFromSelectButton}
        onLongPress={handleLongPress}>
        <Text>Select</Text>
      </TouchableOpacity>
    </View>
  );
};

export default SelectorComponent;

要实现这类手势交互，核心是利用PanResponder监听全局手势，结合元素位置测量来追踪手指与元素的交互状态。以下是完整实现代码：

import React, { useState, useRef, useEffect } from 'react';
import {
  View,
  StyleSheet,
  Text,
  ViewProps,
  TouchableOpacity,
  PanResponder,
  LayoutChangeEvent,
} from 'react-native';

interface ItemRect {
  item: number;
  x: number;
  y: number;
  width: number;
  height: number;
}

const GestureItemRenderer = (
  props: ViewProps & {
    items: number[];
    selectedItem: number | null;
    focusedItem: number | null;
    onItemLayout: (item: number, rect: ItemRect) => void;
    handleSelection: (item: number) => void;
  },
) => {
  const itemArea = 30;

  const handleItemLayout = (item: number) => (e: LayoutChangeEvent) => {
    const { x, y, width, height } = e.nativeEvent.layout;
    props.onItemLayout(item, { item, x, y, width, height });
  };

  const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      padding: 6,
      gap: 6,
      borderWidth: 1,
      borderColor: 'red',
    },
    itemContainer: {
      borderWidth: 1,
      borderColor: 'black',
      height: itemArea,
      width: itemArea,
      justifyContent: 'center',
      alignItems: 'center',
    },
    selectedItem: {
      backgroundColor: 'red',
    },
    focusedItem: {
      backgroundColor: 'blue',
    },
  });

  return (
    <View style={styles.container} {...props}>
      {props.items.map((item, index) => (
        <TouchableOpacity
          onPress={() => props.handleSelection(item)}
          style={[
            styles.itemContainer,
            item === props.selectedItem && styles.selectedItem,
            item === props.focusedItem && styles.focusedItem,
          ]}
          key={index}
          onLayout={handleItemLayout(item)}>
          <Text>{item}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

const SelectorComponent = () => {
  const items = [1, 2, 3, 4, 5, 6, 7, 8];
  const [selectedItem, setSelectedItem] = useState<number | null>(null);
  const [viewItems, setViewItems] = useState(false);
  const [focusedItem, setFocusedItem] = useState<number | null>(null);
  const [itemRects, setItemRects] = useState<ItemRect[]>([]);
  const listRef = useRef<View>(null);
  const [listRect, setListRect] = useState<{ x: number, y: number, width: number, height: number } | null>(null);

  // 测量列表容器位置
  const handleListLayout = (e: LayoutChangeEvent) => {
    const { x, y, width, height } = e.nativeEvent.layout;
    setListRect({ x, y, width, height });
  };

  // 收集每个元素的位置信息
  const handleItemLayout = (item: number, rect: ItemRect) => {
    setItemRects(prev => {
      const existingIndex = prev.findIndex(r => r.item === item);
      if (existingIndex !== -1) {
        const newRects = [...prev];
        newRects[existingIndex] = rect;
        return newRects;
      }
      return [...prev, rect];
    });
  };

  // 判断手指是否在列表区域内
  const isPointInList = (x: number, y: number) => {
    if (!listRect) return false;
    return (
      x >= listRect.x &&
      x <= listRect.x + listRect.width &&
      y >= listRect.y &&
      y <= listRect.y + listRect.height
    );
  };

  // 判断手指落在哪个元素上
  const getHoveredItem = (x: number, y: number) => {
    return itemRects.find(rect => {
      return (
        x >= rect.x &&
        x <= rect.x + rect.width &&
        y >= rect.y &&
        y <= rect.y + rect.height
      );
    })?.item || null;
  };

  // 初始化PanResponder
  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onStartShouldSetPanResponderCapture: () => true,
      onMoveShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponderCapture: () => true,

      // 手势移动时更新状态
      onPanResponderMove: (_, gestureState) => {
        const { moveX, moveY } = gestureState;
        const inList = isPointInList(moveX, moveY);
        
        if (inList) {
          setViewItems(true);
          const hovered = getHoveredItem(moveX, moveY);
          setFocusedItem(hovered);
        } else {
          setFocusedItem(null);
        }
      },

      // 手势释放时处理选中或隐藏列表
      onPanResponderRelease: (_, gestureState) => {
        const { moveX, moveY } = gestureState;
        const inList = isPointInList(moveX, moveY);
        
        if (inList && focusedItem !== null) {
          setSelectedItem(focusedItem);
          setViewItems(false);
        } else {
          setFocusedItem(null);
          setViewItems(false);
        }
      },

      // 手势取消时重置状态
      onPanResponderTerminate: () => {
        setFocusedItem(null);
        setViewItems(false);
      },
    })
  ).current;

  const handleLongPress = () => {
    // 长按立即显示列表，默认聚焦第一个元素
    setViewItems(true);
    setFocusedItem(items[0]);
  };

  const handleSelectionFromSelectButton = () => {
    if (selectedItem) {
      setSelectedItem(null);
    } else {
      setSelectedItem(items[0]);
    }
  };

  const handleSelection = (value: number) => {
    setSelectedItem(value);
    setViewItems(false);
  };

  const styles = StyleSheet.create({
    container: {
      paddingTop: 50,
      alignItems: 'center',
    },
    selectButton: {
      padding: 10,
      backgroundColor: '#e0e0e0',
      borderRadius: 4,
    },
  });

  return (
    <View style={styles.container}>
      {viewItems && (
        <GestureItemRenderer
          ref={listRef}
          items={items}
          selectedItem={selectedItem}
          focusedItem={focusedItem}
          onItemLayout={handleItemLayout}
          handleSelection={handleSelection}
          onLayout={handleListLayout}
          {...panResponder.panHandlers}
        />
      )}
      <TouchableOpacity
        onPress={handleSelectionFromSelectButton}
        onLongPress={handleLongPress}
        style={styles.selectButton}
        {...panResponder.panHandlers}>
        <Text>{selectedItem ? `Selected: ${selectedItem}` : 'Select'}</Text>
      </TouchableOpacity>
    </View>
  );
};

export default SelectorComponent;

关键实现说明 #

• PanResponder全局监听：将PanResponder绑定到Select按钮和列表容器，确保手势从按钮开始后能持续追踪
• 元素位置测量：通过onLayout事件获取列表容器和每个元素的坐标、尺寸，用于判断手指位置
• 状态联动：根据手指位置动态切换列表显示状态、元素聚焦状态，手势释放时执行选中或重置操作
• 边界处理：覆盖了手指移出/移回列表、释放手势等所有需求场景

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