DraggableFlatList 操作完成后总是先返回原位置再重新渲染到最终位置

Question

引入'react-native-draggable-flatlist'使用DraggableFlatList，进行拖拽操作，操作完成后总是先返回原位置再重新渲染到最终位置，求经验解决！

Answer 1

让【道友老李】来帮你解答，本回答参考gpt编写，并整理提供，如果还有疑问可以点击头像关注私信或评论。

如果答案让您满意，请采纳、关注，非常感谢！

在`react-native-draggable-flatlist`中，可以通过设置`onDragEnd`函数来处理拖拽结束后的操作。在这个回调函数中，可以通过调整数据源的顺序来实现拖拽完成后总是返回原位置再重新渲染到最终位置的效果。 以下是一个简单的示例代码：

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
import DraggableFlatList from 'react-native-draggable-flatlist';
const data = [
  { key: '1', text: 'Item 1' },
  { key: '2', text: 'Item 2' },
  { key: '3', text: 'Item 3' },
  { key: '4', text: 'Item 4' }
];
const App = () => {
  const [items, setItems] = useState(data);
  const onDragEnd = ({ data }) => {
    setItems(data);
  };
  const renderItem = ({ item, index, drag }) => {
    return (
      <View onLongPress={drag}>
        <Text>{item.text}</Text>
      </View>
    );
  };
  return (
    <DraggableFlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={item => item.key}
      onDragEnd={onDragEnd}
    />
  );
};
export default App;

在这个例子中，我们使用useState来管理数据源items，并在onDragEnd函数中更新items，确保拖拽完成后总是返回原位置再重新渲染到最终位置。同时，通过onLongPress触发拖拽操作。