React native draggle section list

Question

我想制作一个可拖动的部分列表。我可以从部分列表中拖动一个项目并将其移动到另一个部分。

我尝试使用。

react-native-draggable-flatlist

问题是，当我选择一个项目并拖动它。它占用了整个列表

import React, { FC, useState } from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
import DraggableFlatList, {
RenderItemParams,
ScaleDecorator,
} from "react-native-draggable-flatlist";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { Data } from "./data";
import Example from "./example";
interface Item {
header: string;
data: string[];
}
const DATA: Item[] = [
{
header: "A",
data: ["A1", "A2", "A3", "A4", "A5", "A6", "A7", "A8", "A9", "A10"],
},
{
header: "B",
data: ["B1", "B2", "B3", "B4", "B5", "B6", "B7", "B8", "B9", "B10"],
},
];
interface IList {
item: string;
selected: (item: string) => void;
active: boolean;
}
const List: FC<IList> = ({ item, selected, active }) => {
const getSelected = () => {
console.log("item", item);
selected(item);
};
return (
<TouchableOpacity
style={[
styles.draggableContainer,
{
backgroundColor: active ? "blue" : "white",
},
]}
onLongPress={getSelected}
onPress={getSelected}
>
<Text style={styles.text}>{item}</Text>
</TouchableOpacity>
);
};
export default function App() {
const renderContent = (item: Item, drag: () => void, isActive: boolean) => {
return (
<View style={styles.item}>
{item?.data?.map((seat) => (
<List key={seat} item={seat} selected={drag} active={isActive} />
))}
</View>
);
};
const renderSectionHeader = (section: Item) => (
<View style={styles.header}>
<Text style={styles.headerText}>{section.header}</Text>
</View>
);
const renderItem = ({ item, drag, isActive }: RenderItemParams<Item>) => (
<View style={{ flex: 1 }}>
<View>{renderSectionHeader(item)}</View>
<View style={{ flex: 1 }}>{renderContent(item, drag, isActive)}</View>
</View>
);
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<View style={styles.container}>
<DraggableFlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item, index) => `draggable-item-${item?.header}`}
/>
</View>
</GestureHandlerRootView>
);
}
const styles = StyleSheet.create({
item: {
borderRadius: 5,
marginVertical: 8,
marginHorizontal: 16,
},
header: {
backgroundColor: "#f9c2ff",
height: 30,
justifyContent: "center",
paddingLeft: 10,
},
headerText: {
fontSize: 16,
fontWeight: "bold",
},
text: {
fontSize: 18,
},
draggableContainer: {
flexDirection: "column",
flex: 1,
paddingVertical: 10,
},
draggable: {
flex: 1,
},
container: {
flex: 1,
},
});

我已经尝试使用draxList，但我得到的性能问题。可拖动的平面列表具有最佳性能。

Answer 1

我有很多次react-native-draggable-flatlist我有下面的代码。你可以像这样更新你的代码。

<DragableFlatlist
ItemSeparatorComponent={() => (
<View style={styles.itemSeprator} />
)}
data={drag}
keyExtractor={(item) => item.id}
nestedScrollEnabled
onDragEnd={({ data }) => setDrag(data)}
renderItem={renderItemDrag}
showsVerticalScrollIndicator={false}
/>