react-native-draggable-flatlist - 如何实现两个可拖动的Flatlist

Question

我对 React Native 很陌生，我正在寻找一种方法来拥有拖放嵌套列表。基本上，我需要创建一个按组划分的 ToDo 列表，其中 ToDo 的顺序不仅可以在组内更改，还可以在组间更改。我设法分别创建了一个拖放列表（使用“可拖动的平面列表”组件）和一个嵌套列表，但我正在努力处理内部列表中不需要的空间（边距）。请参阅图片以供参考。有没有人解决了这个问题或知道某种可重用的组件？谢谢你。

import React, { useState, useCallback, Component } from 'react';
import { View, TouchableOpacity, Text, SafeAreaView, ScrollView } from 'react-native';
import DraggableFlatList, { RenderItemParams, } from 'react-native-draggable-flatlist';
const Goal_data = [
  {
    key: "0",
    label: "Group",
    backgroundColor: "#ababab",
  },
  {
    key: "1",
    label: "Group",
    backgroundColor: "#ababab",
  }
]
const Goal_data1 = [
  {
    key: "0",
    label: "Task",
  },
  {
    key: "1",
    label: "Task",
  }
]
export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: Goal_data,
      data1: Goal_data1,
      scrollEnabled: true
    }
  }
  onEnableScroll = (value) => {
    this.setState({
      enableScrollViewScroll: value,
    });
  }
  renderItem1 = ({ item, index, drag, isActive }) => {
    console.log('index', item)
    return (
      <TouchableOpacity
        style={{
          height: 70,
          backgroundColor: isActive ? "blue" : item.backgroundColor,
          alignItems: "center",
          justifyContent: "center"
        }}
        onLongPress={drag}
      >
        <Text
          style={{
            fontWeight: "bold",
            color: "white",
            fontSize: 20
          }}
        >
          {item.label}
        </Text>
      </TouchableOpacity>
    );
  };
  plusdata = (data) => {
    let d = this.state.data1;
    const newRecord = {
      key: "2",
      label: "Task",
    };
    this.setState({
      data1: [...d, newRecord]
    })
  }
  render() {
    return (
      <SafeAreaView style={{ flex: 1, }}>
        <ScrollView>
          <View style={{ backgroundColor: 'aeaeae', flex: 1, paddingHorizontal: 30 }}>
            <Text>Hello</Text>
            <DraggableFlatList
              data={Goal_data}
              ref={c => (this.myRef = c)}
              extraData={Goal_data}
              keyExtractor={(item, index) => `draggable-item-${item.key}`}
              //onMoveBegin={() => this.setState({ scrollEnabled: false })}
              onDragEnd={({ data }) => this.setState({ data: data })}
              renderItem={({ item, index, drag, isActive }) => {
                console.log('index', item)
                return (
                  <TouchableOpacity
                    style={{
                      backgroundColor: isActive ? "blue" : item.backgroundColor,
                      //alignItems: "center",
                      justifyContent: "center",
                      marginVertical: 20
                    }}
                    onLongPress={drag}>
                    <View style={{ backgroundColor: 'aeaeae', borderColor: '#000', borderWidth: 1, paddingHorizontal: 30 }}>
                      <Text>{item.label}{index}</Text>
                      <DraggableFlatList
                        data={this.state.data1}
                        extraData={this.state.data1}
                        ref={React.createRef()}
                        keyExtractor={(item, index) => `draggable-item-${index}`}
                        //onDragEnd={({ data }) => this.setState({ data: data })}
                        renderItem={({ item, index, drag, isActive }) => {
                          console.log('index', item)
                          return (
                            <TouchableOpacity
                              style={{
                                height: 30,
                                borderBottomWidth: 1,
                                backgroundColor: isActive ? "blue" : item.backgroundColor,
                                alignItems: "center",
                                justifyContent: "center"
                              }}
                              onLongPress={drag}
                            >
                              <Text
                                style={{
                                  fontWeight: "bold",
                                  color: "white",
                                  fontSize: 20
                                }}
                              >
                                {item.label}{index}
                              </Text>
                            </TouchableOpacity>
                          );
                        }}
                      />

                      <TouchableOpacity style={{ marginTop: 50, alignSelf: 'center' }} onPress={() => this.plusdata(Goal_data1)}>
                        <Text>Add</Text>
                      </TouchableOpacity>
                    </View>
                  </TouchableOpacity>
                );
              }}
            />
          </View>

        </ScrollView>
      </SafeAreaView>
    )
  }
}