javascript - 如何在本机反应中创建 Dragabble 列表？

Question

在我的带有 expo 的本机应用程序中，我的任务是启用重新排序列表中的项目（通过拖动/移动）。我尝试使用“React Native Draggable FlatList”（“https://www.npmjs.com/package/ react-native-draggable-flatlist") 并且我得到了列表，但它没有拖动，即我无法更改列表中每个项目的位置。我复制了相同的代码。我的代码是：

列表.js

   import React, { Component } from "react";
   import { View, TouchableOpacity, Text } from "react-native";
   import DraggableFlatList from "react-native-draggable-flatlist";

   const exampleData = [...Array(20)].map((d, index) => ({
         key: `item-${index}`, // For example only -- don't use index as your key!
         label: index,
         backgroundColor: `rgb(${Math.floor(Math.random() * 255)}, ${index *
    5}, ${132})`
   }));

  class Example extends Component {
  state = {
  data: exampleData
  };

  renderItem = ({ item, index, drag, isActive }) => {
  return (
  <TouchableOpacity
    style={{
      height: 100,
      backgroundColor: isActive ? "blue" : item.backgroundColor,
      alignItems: "center",
      justifyContent: "center"
    }}
    onLongPress={drag}
  >
    <Text
      style={{
        fontWeight: "bold",
        color: "white",
        fontSize: 32
      }}
    >
      {item.label}
    </Text>
  </TouchableOpacity>
);
};

render() {
return (
  <View style={{ flex: 1 }}>
    <DraggableFlatList
      data={this.state.data}
      renderItem={this.renderItem}
      keyExtractor={(item, index) => `draggable-item-${item.key}`}
      onDragEnd={({ data }) => this.setState({ data })}
    />
  </View>
  );
  }
  }

  export default Example;

用户界面是这样的：

整个列表正在滚动，但每个项目都不可拖动。我怎样才能使这个列表可拖动？有什么帮助吗？