react-native 拖动排序列表

网友投稿 1511 2022-11-05

react-native 拖动排序列表

react-native 拖动排序列表

react-native-order-flat-list

你可以通过手势上下拖动自由地排序列表

安装

npm install react-native-order-flat-list --save

示例

属性

parametertyperequireddefaultdescription
styleoneOfType([number, object, array])no组件样式
orderStyleoneOfType([number, object, array])no排序样式
orderWidthnumberno44排序按钮宽
iconnumberno图标
iconStyleoneOfType([number, object, array])no图标样式
getListReffuncno获取列表ref
itemHeightnumberyes列表项高度
orderKeyNamestringno列表排序字段
isOrderboolnofalse是否排序
renderFrameTimenumberno20渲染帧时间(ms;不建议太大或太小)
onOrderfuncyes排序 {

orderKeys: 排序字段(,分隔;orderKeyName不为空时有值),

list: 列表,

orderItemKey: 排序项字段(orderKeyName不为空时有值),

moveItemKey: 移动项字段(orderKeyName不为空时有值),

orderItemIndex: 排序项位置,

moveItemIndex: 移动项位置

}

属性props支持所有FlatList的props

注意

你应该依赖props.onOrder({orderKeys, list, orderItemKey, moveItemKey, orderItemIndex, moveItemIndex})的回调参数调整props.data使其发生排序改变并操作你的后端api 你可以选择在即将提交到后端时替换你的data数据使其列表即时发生改变,这样不会有卡顿或迟缓。比如在reducer的REQUESTING_${ACTION_TYPES.ACTION_TYPE}里

源码

https://github.com/thisXY/react-native-order-flat-list

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Mybatis 如何传入字符串参数,分割并遍历
下一篇:设计模式——策略模式
相关文章

 发表评论

暂时没有评论,来抢沙发吧~