一步步实现一个自适应的react-native拖拽排序

2019.3: 新增单行拖拽演示，其实这个功能一致，这个拖拽插件本来就是自适应行,有时间会整体优化下ScrollView问题，使控件自带ScrollView功能。

2019.2: 优化拖拽不移动时自动恢复，现在这个插件应该没有任何问题。新加一个实战演示例子，后面有时间会对这个例子进行加动画，删除时item向下到待选的item动画，和待选到item。还有滑动时自动向下滑动动画。

最近由于业务需求需要实现一个功能需要实现图片的上传和排序和删除，在网上搜索了几款发现都需要固定列数，感觉不太友好，所以自己实现了一个可以不需要设定列数的排序，而且布局高度实现自适应。

源码链接

效果图对比(固定列数和自适应流布局)

动态图

实现

其实拖拽排序在大多数编程语言里已经有很多中三方插件可以使用,实现方法都差不多，而且例如Android和iOS或者现在的React-Native他们逻辑几乎是可以共用，你会写一个语言的拖拽排序，其他的都差不多。

梳理一下步骤

• 1. 开始触发： 长按或触摸到达一定时间时触发开始排序，这时可以进行把被单机的item放大、透明、抖动动画。
• 2. 开始滑动：
  • (1) 被拖拽的item随着手指的滑动而滑动
  • (2) 被拖动的item滑动到第x个时，item到x之间的item进行左滑右滑一个位置的动画。
• 3. 松开手指：
  • (1) 被拖拽的这个item通过四舍五入进入相应的位置。
  • (2) 数据进行替换并重绘加布局矫正。

tip: 滑动逻辑，例如当你把index=1拖到index=3，不是将1和3替换(0,3,2,1,4)，而是(0,3,1,2,4)这才是拖拽后结果，只将被拖拽的一个替换到要去的位置，其他的向前和向后移动

主要代码

// 触摸事件