推荐开源项目:React Native可排序列表视图
import React from 'react';
import {
View,
Text,
StyleSheet,
FlatList,
TouchableOpacity,
} from 'react-native';
const data = [
{ key: 'Item1', sort: 1 },
{ key: 'Item2', sort: 2 },
// ...
];
export default class SortableList extends React.Component {
render() {
return (
<FlatList
data={data}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => this.handleSort(item)}>
<Text style={styles.item}>{item.key}</Text>
</TouchableOpacity>
)}
/>
);
}
handleSort = (item) => {
const { sort } = item;
// 更新数据源中item的sort值,并重排列表
// ...
};
}
const styles = StyleSheet.create({
item: {
padding: 10,
marginTop: 2,
backgroundColor: '#f9c2ff',
},
});
这个简单的React Native示例展示了如何创建一个可排序的列表视图。用户可以点击列表中的项目来触发排序操作,而后台的数据源会相应更新。注意,实际的排序逻辑需要根据业务需求实现,这里只是提供了一个基本框架。
评论已关闭