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

Question

我对React native还很陌生，我正在寻找一种拥有拖放嵌套列表的方法。基本上，我需要创建一个按组划分的待办事项列表，其中待办事项的顺序不仅可以在组内更改，也可以在组之间更改。我设法分别创建了一个拖拽&下拉列表(使用"可拖动平面列表"组件(和嵌套列表，但我很难将它们组合起来。有人解决了这个问题或者知道某种可重用组件吗？非常感谢。

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>
)
}
}