在 React Native 的开发中，列表组件是必不可少的，而一个好的列表组件不仅能够展示数据，还能够让用户自主排序。而 @hawkrives/react-native-sortable-list 正是一个能够提供列表排序功能的 React Native 组件，下面我们将详细介绍它的使用方法。
安装
安装 @hawkrives/react-native-sortable-list 有两种方式：
- 使用 npm：
npm install --save @hawkrives/react-native-sortable-list
- 使用 yarn：
yarn add @hawkrives/react-native-sortable-list
示例代码
下面是一个使用 @hawkrives/react-native-sortable-list 的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ---- - ---- ---------------
------ ------------ ---- ----------------------------------------
----- ---- - -
-- - ----- ----- --
-- - ----- ----- --
-- - ----- ----- --
-- - ----- ----- --
-- - ----- ----- --
--
----- --------------------- - -- -- -
----- ----------- ------------- - ---------------
----- ------------ - -------- -- -
-----------------------
--
----- --------- - -- ----- ------ -- -- -
------ -
----- -------- ----- - ---
----- -------- -------- -- ---------------------
-------
--
--
------ -
-------------
-------- ----- - --
----------------
---------------------
---------------------------
--
--
--
------ ------- ----------------------使用方法
@hawkrives/react-native-sortable-list 组件需要传入以下 3 个属性：
- data：数据源
- renderRow：列表项渲染方法
- onReleaseRow：拖动列表项结束时触发的操作
data 属性
这个属性是必须的，是组件的数据源。你需要把你的数据转成这个样子：
const data = {
1: { text: '第一项' },
2: { text: '第二项' },
3: { text: '第三项' },
4: { text: '第四项' },
5: { text: '第五项' },
};每一项的键值对代表了一条列表项数据，其中键是这个列表项的 ID，值是这个列表项的数据，可以是任何类型。这个键值对的顺序并不重要，列表项在渲染时会根据键值对的键来排序。如果你的数据源未知，可以在传入组件前将其转换为这种形式。
renderRow 属性
这个属性是必须的，是用于定义列表项的渲染方式。你需要传入一个函数来返回一个列表项 React Element。
const renderRow = ({ data, active }) => {
return (
<View style={{ flex: 1 }}>
<Text style={{ padding: 20 }}>{data.text}</Text>
</View>
);
};这个函数接收两个参数：
- data：这个列表项的数据，就是 data 属性中每个键值对的值
- active：一个布尔值，代表这个列表项是否目前处于拖动状态
onReleaseRow 属性
这个属性是必须的，是拖动结束后触发的操作。你需要传入一个函数，这个函数将接收一个新的列表项数据源，这个新的数据源中的键值对的键就是列表项的 ID。
const onReleaseRow = nextData => {
setStateData(nextData);
};结语
@hawkrives/react-native-sortable-list 是一个非常实用的 React Native 组件，可以帮助你快速实现列表项的排序功能。希望本文的介绍可以帮助到你。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663d81e8991b448e2416