拖拽排序组件

更新时间：2021-08-27 11:07:18下载pdf

本文介绍了 IPC 拖拽排序组件相关属性及使用方法，手指长按拖拽按钮可进行上下拖动，放开手指进行排序。

示图展示

组件属性及方法概览

字段	说明	是否必填	类型	默认值
containerStyle	排序组件最外层容器样式	否	ViewStyle	{}
orderContain	每一项排序容器样式	否	ViewStyle	{}
orderWidth	拖拽按钮宽度	否	number	44
icon	拖拽按钮	否	ReactNode	默认图片按钮
itemHeight	排序容器高度	否	number	60
data	排序数据	是	Array
touchPosition	拖拽按钮所处位置	否	left or right	right
onOrder	排序完成之后触发事件	是	Function
renderItem	渲染排序项方法	是	Function
onScroll	容器滚动事件	否	Function	() => {}
getListRef	获取容器dom方法	否	Function	() => {}

使用示例

import { TYIpcDragSort } from '@tuya/tuya-panel-ipc-sdk'；
import { View, Text } from 'react-native';
import { useState } from 'react';

// 生成排序数据
const arr = [];
for (let i = 1; i < 20; i++) {
  arr.push({
    id: i,
    name: `lock${i}`,
  });
}
const [list, setList] = useState(arr);

// 排序完成后，更新当前state
const order = (data: any) => {
  setList(data.list);
};

// 排序项渲染
const _renderItem = (item: any) => {
  return (
    <View style={{ height: itemHeight }}>
      <Text style={{ color: '#000' }}>{item.name}</Text>
    </View>
  );
};

// 排序容器高度
const itemHeight = 60;

return (
  <View style={{ flex: 1 }}>
    <TYIpcDragSort
      itemHeight={itemHeight}
      onOrder={order}
      data={list}
      renderItem={_renderItem}
      orderWidth={60}
    />
  </View>
);

上一篇消息播放器

下一篇GPS 信号强度