如何在 React Native 中实现两个 FlatList 之间的拖放功能？

Question

我在网上搜索了解决方案，但没有找到符合我要求的明确示例或教程。有人可以提供如何实现这一目标的指导吗？任何可以简化实现的库或方法将不胜感激。

我需要在两个 FlatList 之间实现拖放功能。具体来说，我有两个显示不同项目集的 FlatList，我希望用户能够将一个项目从一个 FlatList 拖放到另一个中。

Answer 1

您可以使用 React Native Draggable FlatList 使用 npm 安装：

npm install --save react-native-draggable-flatlist

或用纱线：

yarn add react-native-draggable-flatlist

并通过导入使用：

import DraggableFlatList from 'react-native-draggable-flatlist'

示例：

import React, { useState } from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
import DraggableFlatList, {
  ScaleDecorator,
  onDragEnd,
} from "react-native-draggable-flatlist";

const NUM_ITEMS = 10;
function getColor(i: number) {
  const multiplier = 255 / (NUM_ITEMS - 1);
  const colorVal = i * multiplier;
  return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`;
}

type Item = {
  key: string;
  label: string;
  height: number;
  width: number;
  backgroundColor: string;
  listId: string; // new property to identify list
};

const initialDataLeft: Item[] = [...Array(NUM_ITEMS / 2)].map((d, index) => {
  const backgroundColor = getColor(index);
  return {
    key: `left-item-${index}`,
    label: String(index) + "",
    height: 100,
    width: 60 + Math.random() * 40,
    backgroundColor,
    listId: "left", // assign list ID
  };
});

const initialDataRight: Item[] = [...Array(NUM_ITEMS / 2)].map((d, index) => {
  const backgroundColor = getColor(NUM_ITEMS / 2 + index);
  return {
    key: `right-item-${index}`,
    label: String(index) + "",
    height: 100,
    width: 60 + Math.random() * 40,
    backgroundColor,
    listId: "right", // assign list ID
  };
});

export default function App() {
  const [leftData, setLeftData] = useState(initialDataLeft);
  const [rightData, setRightData] = useState(initialDataRight);

  const renderItem = ({ item, drag, isActive }: RenderItemParams<Item>) => {
    return (
      <ScaleDecorator>
        <TouchableOpacity
          onLongPress={drag}
          disabled={isActive}
          style={[
            styles.rowItem,
            { backgroundColor: isActive ? "red" : item.backgroundColor },
          ]}
        >
          <Text style={styles.text}>{item.label}</Text>
        </TouchableOpacity>
      </ScaleDecorator>
    );
  };

  const handleDragEnd = (fromListId, toListId, item) => {
    const fromList = (fromListId === "left") ? leftData : rightData;
    const toList = (toListId === "left") ? setLeftData : setRightData;

    const updatedFromList = fromList.filter((i) => i.key !== item.key);
    toList((prevData) => [...prevData, item]);
  };

  // Custom DraggableFlatList for each list
  const LeftFlatList = () => (
    <DraggableFlatList
      data={leftData}
      keyExtractor={(item) => item.key}
      renderItem={renderItem}
      onDragEnd={({ data }) => {
        handleDragEnd("left", "right", data[0]); // assuming only 1 item is dragged
        setLeftData(data);
      }}
    />
  );

  const RightFlatList = () => (
    <DraggableFlatList
      data={rightData}
      keyExtractor={(item) => item.key}
      renderItem={renderItem}
      onDragEnd={({ data }) => {
        handleDragEnd("right", "left", data[0]); // assuming only 1 item is dragged
        setRightData(data);
      }}
    />
  );

  return (
    <View style={styles.container}>
      <View style={styles.listContainer}>
        <LeftFlatList />
      </View>
      <View style={styles.listContainer}>
        <RightFlatList />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  rowItem: {
    height: 100,
    width: 100,
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    color: "white",
    fontSize: 24,
    fontWeight: "bold",
    textAlign: "center",
  },
});

了解更多详细信息：访问文档