如何在React Native中创建拖放嵌套列表

如何解决如何在React Native中创建拖放嵌套列表

我对React本机还不是很陌生，我正在寻找一种具有拖放嵌套列表的方法。基本上，我需要创建一个按组划分的待办事项列表，在其中，不仅可以在组内而且可以在组之间更改待办事项的顺序。我设法分别创建了一个拖放列表（使用“可拖动的平面列表”组件）和一个嵌套列表，但是在组合它们方面我很费力。 有谁解决了这个问题或知道某种可重用的组件？谢谢。

解决方法

尝试以下操作：

    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",}
    ]
    const Goal_data1 = [
      {
        key: "0",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",};
        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}
                  debug={true}
                  extraData={Goal_data}
                  keyExtractor={(item,index) => `draggable-item-${item.key}`}
                  //onMoveBegin={() => this.setState({ scrollEnabled: false })}
                  onDragEnd={({ data }) => this.setState({ data: data })}
                  renderItem={({ item,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}
                            debug={true}
                            keyExtractor={(item,index) => `draggable-item-${index}`}
                            //onDragEnd={({ data }) => this.setState({ data: data })}
                            renderItem={({ item,isActive }) => {
                              console.log('index',item)
                              return (
                                <TouchableOpacity
                                  style={{
                                    height: 30,borderBottomWidth: 1,justifyContent: "center"
                                  }}
                                  onLongPress={drag}
                                >
                                  <Text
                                    style={{
                                      fontWeight: "bold",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>
        )
      }
    }