React Native 实现列表拖拽

• 如何使用RN实现下面流畅的拖拽单元格

  
  拖拽结果

下面我就说说我的思路

想要手指触摸的时候有反应，就需要在手指触摸到焦点的时候监听到触摸的变化，在RN中使用的是PanResponder监听手势的变化，参考官方文档PanResponder 介绍

其中几个比较重要的事件在这里提一下：

• onPanResponderGrant: (evt, gestureState) ：当手指开始触摸view的时候响应此事件，在这里处理拖拽开始时需要记录的数据
• onPanResponderMove: (evt, gestureState)：手指拖着view移动时响应此事件，处理拖拽交互单元格就在这个方面中完成，属性gestureState是个object对象，它里面的属性包含了拖拽移动的几个重要参数，在拖拽实现中我们使用的是dy，它是记录从手势触发开始的位置到拖拽移动的位置之间的距离，向下拖拽是正数，向上拖拽为负。
• onPanResponderRelease: (evt, gestureState)：手指离开view响应此方法，拖拽结束，这里主要处理拖拽完成数据交换更新数据的操作。

处理拖拽的操作主要在这几个事件中完成，具体代码可在我的GitHub中查看

拖拽原理

当监听到onPanResponderMove的时候，随着拖拽位置的移动不断修改当前view样式top高度的位置，达到view随着拖拽移动的效果。

在移动过程中，手指拖拽一个单元格移动到下一个单元格之上，两个单元格交换位置，看似两个单元格交互位置，实则只是更改目标单元格的top位置到拖拽的原始位置，在移动的时候只修改位置的高度，实质上数组中的数据顺序没有更改，只是在移动拖拽过程中，展示上将位置交换移动，记录当前交换位置的index值，等到拖拽结束之后再交换位置。

实现原理