React Native Drax拖拽功能失效求助：如何启用拖拽排序？

问题分析 #

你的代码存在几个关键问题导致拖拽功能失效：

1. 未启用拖拽交互容器：DraxList的可拖拽项必须通过DraxView组件包裹，普通View无法触发Drax的拖拽事件。
2. 状态未更新：onItemReorder方法中重组了数组，但没有调用setAlphaData更新状态，导致列表无法响应排序变化，也无法触发拖拽后的UI更新。
3. 布局属性冲突：horizontal={true}与flexWrap: 'wrap'无法共存，横向FlatList不支持自动换行，这种冲突会导致布局异常，间接影响拖拽交互。

修复步骤 #

1. 引入并使用DraxView：将列表项的外层View替换为DraxView，开启拖拽能力。
2. 更新状态触发重排：在onItemReorder中调用setAlphaData把重组后的数组设置为新状态。
3. 调整布局逻辑：移除horizontal={true}，通过flatListStyle设置flexDirection: 'row'和flexWrap: 'wrap'来实现换行的横向列表布局。

修复后的完整代码 #

import * as React from 'react';
import {Text, View, StyleSheet} from 'react-native';

// 引入DraxView组件
import {DraxProvider, DraxList, DraxView} from 'react-native-drax';

const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

const getItemStyleTweaks = alphaItem => {
  return {
    backgroundColor: 'green',
    height: 50,
  };
};

const AppTest = () => {
  const [alphaData, setAlphaData] = React.useState(alphabet);
  
  return (
    <DraxProvider>
      <View style={styles.container}>
        <DraxList
          data={alphaData}
          renderItemContent={({item}) => (
            // 使用DraxView包裹可拖拽内容
            <DraxView style={[styles.alphaItem, getItemStyleTweaks(item)]}>
              <Text style={styles.alphaText}>{item}</Text>
            </DraxView>
          )}
          onItemReorder={({fromIndex, toIndex}) => {
            const newData = [...alphaData];
            // 重组数组
            const [movedItem] = newData.splice(fromIndex, 1);
            newData.splice(toIndex, 0, movedItem);
            // 更新状态触发列表刷新
            setAlphaData(newData);
          }}
          keyExtractor={item => item}
          // 移除horizontal属性，通过flatListStyle实现横向换行布局
          flatListStyle={{
            flexWrap: 'wrap',
            flexDirection: 'row',
          }}
        />
      </View>
    </DraxProvider>
  );
};

// 补充缺失的样式定义
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    marginTop: 50,
  },
  alphaItem: {
    width: 50,
    margin: 5,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },
  alphaText: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default AppTest;

内容的提问来源于stack exchange，提问作者Shiva Giri