React-Native RN 列表拖拽交换Item功能

在React Native中，可以使用react-native-gesture-handler库和react-native-reanimated库来实现列表拖拽交换项的功能。以下是一个简单的示例代码：

首先，安装必要的库：

npm install react-native-gesture-handler react-native-reanimated

然后，可以使用react-native-gesture-handler的GestureHandlerRootView替代默认的AppRegistry.runApplication方法，在app.js中：

import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
export default function App() {
  return (
    <GestureHandlerRootView>
      {/* Your app content */}
    </GestureHandlerRootView>
  );
}

接下来，使用react-native-reanimated的AnimatedFlatList来实现拖拽效果，并处理拖拽事件来交换列表项：

import React, { useState } from 'react';
import { AnimatedFlatList, useAnimatedScrollHandler } from 'react-native-reanimated';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
 
const App = () => {
  const [items, setItems] = useState([...Array(20).keys()]); // 初始化列表项
 
  const renderItem = ({ item, index }) => (
    <View style={styles.item}>
      <Text>{item}</Text>
    </View>
  );
 
  const onMove = (index, toIndex) => {
    const newItems = [...items];
    const item = newItems.splice(index, 1)[0];
    newItems.splice(toIndex, 0, item);
    setItems(newItems);
  };
 
  return (
    <SafeAreaView style={styles.container}>
      <AnimatedFlatList
        data={items}
        renderItem={renderItem}
        keyExtractor={(item) => item.toString()}
        onMove={onMove}
      />
    </SafeAreaView>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    height: 100,
    backgroundColor: '#ddd',
    justifyContent: 'center',
    alignItems: 'center',
    marginVertical: 4,
  },
});
 
export default App;

请注意，AnimatedFlatList是一个自定义组件，不是React Native的标准组件，它需要你安装react-native-reanimated并且按照其文档进行配置。上面的代码提供了一个简单的列表，其中每个列表项都是一个数字，并且可以通过拖拽来交换它们的位置。