Как создать перетаскиваемый вложенный список в React Native

Question

Я новичок в React native, и я ищу способ иметь вложенный список перетаскиванием. По сути, мне нужно создать список ToDo, разделенный на группы, в котором порядок ToDos может быть изменен не только внутри групп, но и между ними. Мне удалось по отдельности создать как список перетаскивания (с использованием компонентов "перетаскиваемого плоского списка"), так и вложенный список, но я изо всех сил пытаюсь их объединить. Кто-нибудь решил проблему или знает какой-то многоразовый компонент? Спасибо.

Answer 1

Попробуйте следующее:

      
    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}
                  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, 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}
                            debug={true}
                            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>
        )
      }
    }