模板版本：v0.2.2

[!TIp] Git 地址

介绍

该项目基于react-native-draggable-flatlist开发。

安装与使用

进入到工程目录并输入以下命令：

1. Follow installation instructions for by Reanimated and React Native Gesture Handler.
2. Install this package using npm or yarn

npm

npm install @tuya-oh/react-native-draggable-flatlist

yarn

yarn add @tuya-oh/react-native-draggable-flatlist

下面的代码展示了这个库的基本使用场景：

[!WARNING] 使用时 import 的库名不变。

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import DraggableFlatList from 'react-native-draggable-flatlist';

export const DraggableFlstlist = () => {
  // 测试数据
  const initialData = Array.from({ length: 10 }, (_, i) => ({
    id: `item-${i}`,
    text: `可拖动项目 ${i + 1}`,
    bgColor: `hsl(${Math.random() * 360}, 70%, 80%)`,
  }));

  const [data, setData] = useState(initialData);

  // 渲染主项目
  const renderItem = ({ item, drag, isActive }) => {
    return (
      <TouchableOpacity
        style={[
          styles.item,
          { backgroundColor: isActive ? 'lightgrey' : item.bgColor },
          isActive && styles.activeItem,
        ]}
        onLongPress={drag}
        delayLongPress={200}>
        <Text style={styles.text}>{item.text}</Text>
        <Text style={styles.subText}>长按拖动</Text>
      </TouchableOpacity>
    );
  };

  const handleDragEnd = ({ data: newData }) => {
    console.log(
      '拖拽结束，新数据顺序:',
      newData.map(i => i.id || i.text || '未知项'),
    );
    setData(newData);
  };

  return (
    <GestureHandlerRootView>
      <DraggableFlatList
        data={data}
        keyExtractor={item => item.id}
        renderItem={renderItem}
        onDragEnd={handleDragEnd}
        style={{ height: 500, width: '100%' }}
      />
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
    borderRadius: 8,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
  },
  activeItem: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 3 },
    shadowOpacity: 0.3,
    shadowRadius: 6,
    elevation: 8,
  },
  text: {
    fontSize: 16,
    fontWeight: '500',
  },
  subText: {
    fontSize: 12,
    color: '#666',
    marginTop: 4,
  },
});

使用Codegen

本库未带rc.x的版本号是已经适配了 Codegen ，在使用前需要主动执行生成三方库桥接代码，详细请参考 Codegen 使用文档。

约束与限制

4.API reference

| Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------- | ------------------------------------------------------------ | --------------- | -------- | -------- | ----------------- | | data | Items to be rendered. | object | yes | All | yes | | renderItem | Call drag when the row should become active (i.e. in an onLongPress or onPressIn). | function | no | All | yes | | renderPlaceholder | Component to be rendered underneath the hovering component | function | no | All | yes | | keyExtractor | Unique key for each item | function | no | All | yes | | onDragBegin | Called when row becomes active. | function | no | All | yes | | onRelease | Called when active row touch ends. | function | no | All | yes | | onDragEnd | Called after animation has completed. Returns updated ordering of data | function | no | All | yes | | autoscrollThreshold | Distance from edge of container where list begins to autoscroll when dragging. | number | no | All | no | | autoscrollSpeed | Determines how fast the list autoscrolls. | number | no | All | no | | ref | Returns underlying Animated FlatList ref. | function | no | All | no | | animationConfig | Configure list animations. See reanimated spring config | Partial | no | All | yes | | activationDistance | Distance a finger must travel before the gesture handler activates. Useful when using a draggable list within a TabNavigator so that the list does not capture navigator gestures. | number | no | All | yes | | layoutInvalidationKey | Changing this value forces a remeasure of all item layouts. Useful if item size/ordering updates after initial mount. | number | no | All | yes | | onScrolloffsetChange | Called with scroll offset. Stand-in for onScroll. | function | no | All | no | | onPlaceholder IndexChange | Called when the index of the placeholder changes | function | no | All | yes | | dragItemOverflow | If true, dragged item follows finger beyond list boundary. | number | no | All | no | | dragHitSlop | Enables control over what part of the connected view area can be used to begin recognizing the gesture. Numbers need to be non-positive (only possible to reduce responsive area). | object | no | All | yes | | debug | Enables debug logging and animation debugger. | boolean | no | All | yes | | containerStyle | Style of the main component. | View Style Prop | no | All | yes |

All props are spread onto underlying FlatList

遗留问题

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。