洞察管理小程序实例的关键在于实现跨平台能力与数据安全,如何利用FinClip助力企业在数字化转型中既合规又高效?
1511
2022-11-05
react-native 拖动排序列表
react-native-order-flat-list
你可以通过手势上下拖动自由地排序列表
安装
npm install react-native-order-flat-list --save
示例
属性
parameter | type | required | default | description |
---|---|---|---|---|
style | oneOfType([number, object, array]) | no | 组件样式 | |
orderStyle | oneOfType([number, object, array]) | no | 排序样式 | |
orderWidth | number | no | 44 | 排序按钮宽 |
icon | number | no | 图标 | |
iconStyle | oneOfType([number, object, array]) | no | 图标样式 | |
getListRef | func | no | 获取列表ref | |
itemHeight | number | yes | 列表项高度 | |
orderKeyName | string | no | 列表排序字段 | |
isOrder | bool | no | false | 是否排序 |
renderFrameTime | number | no | 20 | 渲染帧时间(ms;不建议太大或太小) |
onOrder | func | yes | 排序 { 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小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~