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