Skip to content

Latest commit

 

History

History
226 lines (184 loc) · 15.4 KB

react-native-drax.md

File metadata and controls

226 lines (184 loc) · 15.4 KB

模板版本：v0.2.2

react-native-drax

Supported platforms License

[!TIP] Github 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@react-native-oh-tpl/react-native-drax Releases 。对于未发布到npm的旧版本，请参考安装指南安装tgz包。

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

npm

npm install @react-native-oh-tpl/react-native-drax

yarn

yarn add @react-native-oh-tpl/react-native-drax

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

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

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { DraxProvider, DraxView } from 'react-native-drax';


export const GestureHandleExample = () => {
  const viewPropsExtractor = (data: any) => {
    return {
      style: {
        backgroundColor: data.isDragging ? 'lightblue' : 'white',
      },
    };
  };
  return (
    <DraxProvider>
      <GestureHandlerRootView>
        <View style={styles.container}>
          <DraxView
            style={styles.draggable}
            onDragStart={() => {
              console.log('start drag');
            }}
            payload="world"
          />
          <DraxView
            style={styles.receiver}
            onReceiveDragEnter={({ dragged: { payload } }) => {
              console.log(`hello ${payload}`);
            }}
            onReceiveDragExit={({ dragged: { payload } }) => {
              console.log(`goodbye ${payload}`);
            }}
            onReceiveDragDrop={({ dragged: { payload } }) => {
              console.log(`received ${payload}`);
            }}
          />
        </View>
      </GestureHandlerRootView>
    </DraxProvider>
  );
};

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
    marginTop: 100,
    marginLeft: 100
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: 800,
    paddingTop: 500
  },
  draggable: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
  receiver: {
    width: 100,
    height: 100,
    backgroundColor: 'green',
  },
});

Link

本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-gesture-handler 的原生端代码，如已在鸿蒙工程中引入过这个库，则无需再次引入，可跳过本章节步骤，直接使用。

如未引入请参照@react-native-oh-tpl/react-native-gesture-handler 文档 进行引入

约束与限制

兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：@react-native-oh-tpl/react-native-drax Releases

属性

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 Yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

DraxView

Name Description Type Required Platform HarmonyOS Support
onDragStart Callback function at the start of dragging function no iOS/Android Yes
onDrag Callback function during dragging function no iOS/Android Yes
onDragEnter Callback function when a drag is entered function no iOS/Android Yes
onDragOver Callback function when dragging the floating top function no iOS/Android Yes
onDragExit Callback function when the drag exits function no iOS/Android Yes
onDragEnd Callback function at the end of dragging function no iOS/Android Yes
onDragDrop Callback function when dragging and releasing function no iOS/Android Yes
onSnapbackEnd Callback function at the end of the rebound animation function no iOS/Android Yes
onReceiveDragEnter Callback function when a drag is entered function no iOS/Android Yes
onReceiveDragOver Callback function when dragging and hovering function no iOS/Android Yes
onReceiveDragExit Callback function when the drag exits function no iOS/Android Yes
onReceiveDragDrop Callback function when dragging and releasing function no iOS/Android Yes
onMonitorDragStart Callback function when the start of a drag is detected function no iOS/Android Yes
onMonitorDragEnter Callback function when a drag entry is detected function no iOS/Android Yes
onMonitorDragOver Callback function when dragging is detected function no iOS/Android Yes
onMonitorDragExit Callback function when a drag exit is detected function no iOS/Android Yes
onMonitorDragEnd Callback function when the end of dragging is detected function no iOS/Android Yes
onMonitorDragDrop Callback function after a drag release is detected function no iOS/Android Yes
animateSnapback Whether to animate hovering view snapshots after drag release boolean no iOS/Android Yes
payload Data passed when dragging any no iOS/Android Yes
dragPayload Data transferred by the drag party any no iOS/Android Yes
receiverPayload Data transferred by the receiver any no iOS/Android Yes
dragInactiveStyle Style of the drag side before the drag object no iOS/Android Yes
draggingStyle The style applied to the drag side during the drag object no iOS/Android Yes
draggingWithReceiverStyle The style applied to the drag side when the drag side is directly above the recipient object no iOS/Android Yes
draggingWithoutReceiverStyle The style applied to the drag side when the drag side is not directly above the recipient object no iOS/Android Yes
dragReleasedStyle The style applied to the drag side when the drag side is released object no iOS/Android Yes
hoverStyle Drag sideDrag sideThe style applied to the drag side snapshot when the snapshot is hovered object no iOS/Android Yes
hoverDraggingStyle Drag side The style applied to the drag side snapshot when dragging object no iOS/Android Yes
hoverDraggingWithReceiverStyle The style applied to the snapshot of the drager when the drager is directly above the recipient object no iOS/Android Yes
hoverDraggingWithoutReceiverStyle The style applied to the drag side snapshot when the drag side is not directly above the recipient object no iOS/Android Yes
hoverDragReleasedStyle Drag side The style applied to the drag side snapshot when the drag stops object no iOS/Android Yes
receiverInactiveStyle The style applied to the recipient before the drag starts object no iOS/Android Yes
receivingStyle The style applied to the recipient when the drag is directly above the recipient object no iOS/Android Yes
otherDraggingStyle Styles applied to the drag side during other drags object no iOS/Android Yes
otherDraggingWithReceiverStyle The style applied to the drag side when the other drag side is directly above the recipient object no iOS/Android Yes
otherDraggingWithoutReceiverStyle The style applied to the drag party when the other drag party is not directly above the recipient object no iOS/Android Yes
renderContent Renders the content of the internal subnodes of the drag-and-drop component function no iOS/Android Yes
renderHoverContent Used to render the content of the internal subnodes of the drag-and-drop copy component function no iOS/Android Yes
registration Callback function, which can receive data transferred within the component function no iOS/Android Yes
onMeasure Callback function, which can receive data transferred within the component function no iOS/Android Yes
lockDragXPosition Indicates whether to lock the drag in the horizontal direction (x axis) boolean no iOS/Android Yes
lockDragYPosition Indicates whether to lock the drag in the vertical direction (y axis) boolean no iOS/Android Yes
children Renders the content of the internal subnodes of the drag-and-drop component. This parameter is valid only when the renderContent rendering method does not exist React Element no iOS/Android Yes
noHover Sets whether to disable the drag-and-drop copy function boolean no iOS/Android Yes
longPressDelay Sets the minimum time (in milliseconds) for the view to recognize touch and hold gestures number no iOS/Android Yes
draggable Indicates whether dragging is allowed. The default value is true boolean no iOS/Android Yes

DraxScrollView

Name Description Type Required Platform HarmonyOS Support
children Component React Node subnode React Element no iOS/Android Yes
onScroll Sliding event callback method function no iOS/Android Yes

DraxList

Name Description Type Required Platform HarmonyOS Support
data Data source of the DraxList component array no iOS/Android Yes
flatListStyle Sets the style of the internal FlatList component object no iOS/Android Yes
itemStyles Sets the style of an item in the internal FlatList component object no iOS/Android Yes
renderItemContent Method for Rendering Item Items in the DraxList Component function no iOS/Android Yes
renderItemHoverContent Method of Rendering Item Snapshots in the DraxList Component function no iOS/Android Yes
onItemDragStart Callback is executed when an item in the DraxList component starts to be dragged function no iOS/Android Yes
onItemDragPositionChange Callback is executed when the position of an item in the DraxList component changes function no iOS/Android Yes
onItemDragEnd Callback when the drag of an item in the DraxList component ends function no iOS/Android Yes
onItemReorder Callback for recording the moving index position of an item function no iOS/Android Yes
reorderable Sets whether to enable automatic sorting boolean no iOS/Android Yes
viewPropsExtractor Props can be returned based on the data of each item function no iOS/Android Yes
onScroll Sliding event callback method function no iOS/Android Yes
itemsDraggable Indicates whether items in the FlatList component can be dragged boolean no iOS/Android Yes
lockItemDragsToMainAxis Indicates whether to lock the drag direction of items in the FlatList component to the main axis direction boolean no iOS/Android Yes

遗留问题

  • DraxList和DraxScrollView组件存在拖拽不流畅的情况，issue#1

其他

开源协议

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