能否不借助外部包实现React Native中FlatList项的拖拽功能？

要在原生FlatList里实现拖拽排序，核心是利用React Native的触摸响应器API结合FlatList的数据源状态管理，不需要依赖第三方组件。以下是完整的实现方案：

核心思路 #

通过给列表项绑定触摸响应器方法，监听拖拽的开始、移动和释放事件，实时调整数据源的顺序，同时添加视觉反馈提升体验。

实现步骤与代码示例 #

1. 初始化状态 #

需要维护以下状态变量：

• data：FlatList的原始数据源
• draggedIndex：当前正在拖拽的项的索引
• hoveredIndex：当前拖拽到的目标项索引
• dragStartY：拖拽开始时的Y轴位置（用于计算移动距离）

import React, { useState } from 'react';
import { View, Text, FlatList, TouchableWithoutFeedback, StyleSheet, Animated } from 'react-native';

const DragSortFlatList = () => {
  const [data, setData] = useState([
    { id: '1', text: '列表项1' },
    { id: '2', text: '列表项2' },
    { id: '3', text: '列表项3' },
    { id: '4', text: '列表项4' },
    { id: '5', text: '列表项5' },
  ]);
  const [draggedIndex, setDraggedIndex] = useState(null);
  const [hoveredIndex, setHoveredIndex] = useState(null);
  const [dragStartY, setDragStartY] = useState(0);
  const dragY = new Animated.Value(0);

  // 交换两个索引的项
  const swapItems = (fromIndex, toIndex) => {
    if (fromIndex === toIndex) return;
    const newData = [...data];
    const draggedItem = newData[fromIndex];
    newData.splice(fromIndex, 1);
    newData.splice(toIndex, 0, draggedItem);
    setData(newData);
    setDraggedIndex(toIndex);
  };

2. 绑定触摸响应器方法 #

给每个列表项添加触摸监听，处理拖拽的各个阶段：

// 开始拖拽：记录初始位置和当前项索引
  const handleDragStart = (index, y) => {
    setDraggedIndex(index);
    setDragStartY(y);
    dragY.setValue(0);
  };

  // 拖拽移动：计算当前位置对应的目标索引，交换项
  const handleDragMove = (event) => {
    if (draggedIndex === null) return;
    const moveY = event.nativeEvent.locationY - dragStartY;
    dragY.setValue(moveY);

    // 计算当前触摸位置对应的列表项索引（这里需要根据你的列表项高度调整）
    const itemHeight = 60; // 列表项的固定高度
    const currentY = event.nativeEvent.pageY;
    const targetIndex = Math.floor(currentY / itemHeight);
    
    // 边界判断，确保索引在有效范围内
    if (targetIndex >= 0 && targetIndex < data.length && targetIndex !== hoveredIndex) {
      setHoveredIndex(targetIndex);
      swapItems(draggedIndex, targetIndex);
    }
  };

  // 结束拖拽：重置状态
  const handleDragEnd = () => {
    setDraggedIndex(null);
    setHoveredIndex(null);
    Animated.spring(dragY, { toValue: 0, useNativeDriver: false }).start();
  };

3. 渲染FlatList与列表项 #

给拖拽中的项添加视觉反馈（比如偏移、透明度变化），同时绑定触摸事件：

const renderItem = ({ item, index }) => {
    const isDragging = draggedIndex === index;
    const animatedStyle = {
      transform: [{ translateY: isDragging ? dragY : 0 }],
      opacity: isDragging ? 0.7 : 1,
      zIndex: isDragging ? 1 : 0,
    };

    return (
      <TouchableWithoutFeedback
        onStartShouldSetResponder={() => true}
        onResponderGrant={(event) => handleDragStart(index, event.nativeEvent.locationY)}
        onResponderMove={handleDragMove}
        onResponderRelease={handleDragEnd}
        onResponderTerminate={handleDragEnd}
      >
        <Animated.View style={[styles.item, animatedStyle]}>
          <Text style={styles.itemText}>{item.text}</Text>
        </Animated.View>
      </TouchableWithoutFeedback>
    );
  };

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      contentContainerStyle={styles.listContainer}
    />
  );
};

const styles = StyleSheet.create({
  listContainer: {
    paddingVertical: 10,
  },
  item: {
    height: 60,
    backgroundColor: '#f0f0f0',
    marginHorizontal: 15,
    marginVertical: 5,
    borderRadius: 8,
    justifyContent: 'center',
    paddingHorizontal: 15,
  },
  itemText: {
    fontSize: 16,
  },
});

export default DragSortFlatList;

关键细节说明 #

• 列表项高度：如果你的列表项高度不固定，需要动态获取每个项的高度，可以用onLayout方法记录每个项的位置信息，再计算目标索引。
• 视觉反馈：通过Animated API实现拖拽时的位移、透明度变化，提升用户体验。
• 响应器判断：onStartShouldSetResponder={() => true}确保组件能捕获触摸事件，你也可以改成长按触发（结合LongPressGestureHandler，属于原生API）。
• 性能优化：如果数据源较大，建议使用useCallback包裹状态更新方法，避免不必要的重渲染。

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