推荐：React Native 拖动式FlatList组件——Draggable FlatList

import React from 'react';
import { FlatList, Text, View } from 'react-native';
import DraggableFlatList from 'react-native-draggable-flatlist'; // 假设这是已安装的包
 
export default class DraggableListExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: Array.from({ length: 10 }).map((_, index) => ({ id: index, text: `Item ${index}` }))
    };
  }
 
  renderItem = ({ item, drag, isActive }) => (
    <View style={{backgroundColor: isActive ? 'lightblue' : 'lightgrey'}}>
      <Text onPress={drag} style={styles.text}>{item.text}</Text>
    </View>
  );
 
  render() {
    return (
      <DraggableFlatList
        data={this.state.data}
        renderItem={this.renderItem}
        keyExtractor={item => item.id.toString()}
        onMoveEnd={({ data }) => this.setState({ data })}
      />
    );
  }
}
 
const styles = {
  text: {
    fontSize: 16,
    marginVertical: 2,
    marginHorizontal: 15
  }
};

这个例子中，我们创建了一个名为DraggableListExample的React组件，它使用了DraggableFlatList组件来实现一个可拖动项的FlatList。每个列表项都是一个包含文本的View，允许用户通过按下文本来开始拖动操作。拖动结束后，onMoveEnd回调会更新组件的状态，使得列表的排序得以保存。