@youpen/react-native-sortable-listview 是一个前端常用的 npm 包之一，用于在 React Native 应用中实现可排序列表视图。这个包提供了一个高度可定制的列表组件，可以通过拖动和重新排序来重构应用中的数据。
安装
使用 npm 或者 yarn 安装：
npm install @youpen/react-native-sortable-listview --save
或者
yarn add @youpen/react-native-sortable-listview
使用
首先要导入这个包：
import SortableListView from '@youpen/react-native-sortable-listview';
使用 SortableListView 组件来渲染列表视图：
<SortableListView
data={this.state.data}
order={this.state.order}
onRowMoved={e => {
this.state.order.splice(e.to, 0, this.state.order.splice(e.from, 1)[0]);
this.forceUpdate();
}}
/>这里需要注意的是，data 用来存储列表数据，order 用来存储列表项的顺序。onRowMoved 方法会在拖曳事件结束后被调用，它会重新排列 order 数组，然后强制页面重新渲染。
SortableListView 组件支持众多属性和配置，可以通过传递 props 形式进行自定义设置。下面是一份比较详细的配置说明文档：
props
| 属性名 | 类型 | 描述 |
|---|---|---|
| data | Object | 初始数据 |
| order | Array | 列表顺序 |
| onRowMoved | Function | 拖拽结束后的回调函数，onChangeEvents 只触发在拖动结束过程中 |
| onRowActive | Function | 当被拖动的行变得活跃的时候的回调函数 |
| onRelease | Function | 当被拖动的行被释放的时候的回调函数 |
| onSortStart | Function | 当排序开始的时候的回调函数 |
| onSortEnd | Function | 当排序结束的时候的回调函数 |
| orderStyle | String | 序列符样式 |
示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ ---------------- ---- -----------------------------------------
----- -------- - -
---------- -
--------
--------
--------
-----------
-----
--
------------ -
-------
------ --------
-
--
----- --------- - -
----------
-----------
--
------ ------- ----- --- ------- --------- -
----- - -
----- ---------
------ ----------
--
-------- -
------ -
-----------------
----------------------
------------------------
------------- -- -
----------------------------- -- ------------------------------- -------
-------------------
--
-------------- -- ------------- ---------- ---
---------------- -- ----------- ---
--
-
-
-
----- ------------ - -- ---- -- -- -
------ -
------
-------------------
-------
-
-
----- ---------- - -- -- -
------ -
------
-------------- ---- -----------
-------
-
-结语
@youpen/react-native-sortable-listview 这个 npm 包提供了一个方便易用的在线列表组件，可以大大简化应用重构过程，提升团队的开发效率。以上是对它的使用教程和示例代码，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728c81e8991b448e8c2f