推荐开源项目:React Native Drag to Sort Tags
React Native Drag to Sort Tags 是一个用于在 React Native 应用程序中实现可排序标签的库。以下是如何使用该库的基本步骤:
- 安装库:
npm install react-native-drag-to-sort-tags
或者
yarn add react-native-drag-to-sort-tags
- 导入并使用组件:
import DraggableFlatList from 'react-native-drag-to-sort-tags';
export default function App() {
const [tags, setTags] = React.useState([
{ id: 1, text: '标签1' },
{ id: 2, text: '标签2' },
// ...更多标签
]);
const renderItem = ({ item, index, drag, isActive }) => (
<Tag
key={item.id}
text={item.text}
active={isActive}
onPress={() => alert(`你点击了标签: ${item.text}`)}
drag={drag}
/>
);
return (
<DraggableFlatList
data={tags}
renderItem={renderItem}
onDragEnd={({ data }) => setTags(data)}
/>
);
}
// 自定义标签组件
const Tag = ({ text, active, onPress, drag }) => (
<TouchableOpacity onPress={onPress}>
<View style={active ? styles.activeTag : styles.tag}>
<Text>{text}</Text>
{drag}
</View>
</TouchableOpacity>
);
const styles = StyleSheet.create({
tag: {
// 样式定义标签的基础样式
},
activeTag: {
// 样式定义当标签被拖拽时的样式
}
});
在这个例子中,我们创建了一个简单的标签列表,并使用 DraggableFlatList 组件允许用户通过拖放对它们进行排序。每个标签都是一个可拖动的项目,并且可以通过点击触发事件。当拖动结束时,onDragEnd
回调函数更新标签列表的状态,以保存新的排序。
评论已关闭