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}里