介绍
在移动端开发中，经常用到的一个功能就是对多个 item 进行排序，比如对图片进行拖拽排序、对视频进行播放列表排序等等。而 react-native-sort-grid 就是一个可以方便地实现这个功能的 npm 包，它可以让我们快速搭建一个支持拖拽排序的 grid 组件。
安装
安装 react-native-sort-grid 只需要使用一条命令：
npm install react-native-sort-grid --save
使用
react-native-sort-grid 提供了两个组件——Grid 和 SortableItem。
Grid
Grid 组件是一个布局容器，它可以将 SortableItem 组件进行排列。Grid 的示意图如下：
其中，Grid 组件有以下 props：
- data：要显示的所有项，数据格式为一个数组；
- renderItem(item, order)：使用对应的 item 渲染每个 SortableItem；
- onDragRelease(newOrder)：当拖拽结束后触发，传入新的排序结果。
其中，renderItem 需返回一个 SortableItem 组件，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ - ----- ------------ - ---- -------------------------
----- ---- - -
----- ---- ------ ----- ----
----- ---- ------ ----- ----
----- ---- ------ ----- ----
----- ---- ------ ----- ----
----- ---- ------ ----- ----
--
------ ------- -------- ----- -
----- ---------- - ------ ------ -- -
------ -
------------- ------------- ---------------
----- --------------------
-- ---------- -----
-------------------------
-------
---------------
--
--
----- ------------- - -------- -- -
-- ------------------- ---------
--
------ -
-----
-----------
-----------------------
-----------------------------
--
--
-SortableItem
SortableItem 组件代表着一个可移动的、可以排序的 item，它内部可以包含任何组件。SortableItem 支持以下 props：
- order：当前 item 的位置；
- activeOpacity：拖拽时的透明度；
- children：SortableItem 内部渲染内容。
在 Grid 组件中，我们需要通过 renderItem 去渲染 SortableItem。而在 SortableItem 中，我们需要用到 onPressIn、onLongPress、onPressOut 这些事件，因为它们会在拖拽时被调用。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ - ------------ - ---- -------------------------
------ ------- -------- ----- -
----- ----------- - -- -- -
-- ---- -------
--
----- --------------- - -- -- -
-- ---- -------
--
----- -------------- - -- -- -
-- ---- ------
--
------ -
-------------
-------------
-------------------
-----------------------
-----------------------------
---------------------------
-
----- --------------------
-------------------------
-------
---------------
--
-总结
react-native-sort-grid 提供了一个快速、简便的实现拖拽排序的方案。使用该组件可以方便地实现一个移动端应用中用到的拖拽排序功能。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f83238a385564ab6bed