react-native中使用拖拽排序 （2022-7-21）

[yaogengzhu]

react-native中使用拖拽排序

比较好用的库 react-native-drag-sort

预览图

import React from "react";
import { View, Text, Image, Dimensions, StyleSheet } from "react-native";
import PropTypes from "prop-types";
import { DragSortableView } from "react-native-drag-sort";
import imgConfig from "../../../Assets/Common";

const deviceWidth = Dimensions.get("window").width;
const childrenWidth = (deviceWidth - 32) / 4;
const childrenHeight = 80;
const sortWidth = deviceWidth;

const DragSortList = (props) => {
  const { list, canEdit, onDataChange } = props;

  const renderItem = (item) => {
    return (
      <View
        style={{
          width: childrenWidth,
          height: childrenHeight,
          alignItems: "center",
          justifyContent: "center",
        }}
        key={item.id}
      >
        <View style={styles.img}>
          <Image />
        </View>
        <Text style={styles.title}>{item.title}</Text>
        {canEdit && (
          <Image source={imgConfig.work_delete} style={styles.tipImg} />
        )}
      </View>
    );
  };

  const onClickItem = (data, item, index) => {
    // console.log(item, "??");
  };

  return (
    <View style={{ flex: 1, paddingHorizontal: 16 }}>
      <DragSortableView
        dataSource={list}
        parentWidth={sortWidth}
        childrenWidth={childrenWidth}
        childrenHeight={childrenHeight}
        // onDragStart={onSelectedDragStart}
        // onDragEnd={onSelectedDragEnd}
        onDataChange={(data) => {
          onDataChange(data);
        }}
        onClickItem={onClickItem}
        keyExtractor={(item, index) => item.title}
        renderItem={renderItem}
      />
    </View>
  );
};

DragSortList.propTypes = {
  list: PropTypes.array,
  canEdit: PropTypes.canEdit,
  onDataChange: PropTypes.func,
};

DragSortList.defaultProps = {
  list: [],
  canEdit: false,
  onDataChange: () => {},
};

export default DragSortList;

const styles = StyleSheet.create({
  img: {
    marginBottom: 4,
    width: 32,
    height: 32,
    backgroundColor: "red",
  },
  tipImg: {
    width: 16,
    height: 16,
    position: "absolute",
    right: 10,
    top: 0,
  },
  title: {
    fontSize: 13,
    color: "#333",
  },
});