在现代 Web 开发中，前端框架和库越来越受欢迎也越来越强大。React Native 是其中一个备受欢迎的框架，用于构建跨平台移动应用程序。而 react-native-useful-dnd 是一个用于 React Native 的强大 npm 包，它提供了易于使用的拖放和可排序组件。本文将介绍如何在 React Native 应用程序中使用 react-native-useful-dnd。
安装 react-native-useful-dnd
首先，您需要将 react-native-useful-dnd 安装到您的项目中。打开命令行并输入以下命令：
npm install react-native-useful-dnd --save
引入 react-native-useful-dnd
在您的 React Native 项目中，您可以使用以下命令引入 react-native-useful-dnd：
import { DragDropContext, Droppable, Draggable } from 'react-native-useful-dnd';使用 DragDropContext
DragDropContext 提供了一个容器，用于包含您的可排序对象。必须使用 DragDropContext 包装应用程序的根组件。
import { DragDropContext } from 'react-native-useful-dnd';
<DragDropContext>
…
</DragDropContext>DragDropContext 还接受一个 onDragEnd 属性，该属性在项目排序更改时将调用一个函数。
import { DragDropContext } from 'react-native-useful-dnd';
<DragDropContext onDragEnd={(result) => console.log(result)}>
…
</DragDropContext>添加 Droppable
Droppable 是一个布局容器，它将包含您的可排序对象。Droppable 必须在 DragDropContext 内使用。Droppable 接受一个 droppableId 属性，该属性是所有可排序对象的父容器。
import { DragDropContext, Droppable } from 'react-native-useful-dnd';
<DragDropContext>
<Droppable droppableId="my-droppable">
{…}
</Droppable>
</DragDropContext>Droppable 还提供了一个 direction 属性用于指定排序方向。默认情况下，方向为“垂直”，但您可以使用“水平”进行水平排序。
import { DragDropContext, Droppable } from 'react-native-useful-dnd';
<DragDropContext>
<Droppable droppableId="my-droppable" direction="horizontal">
{…}
</Droppable>
</DragDropContext>添加 Draggable
Draggable 是可以拖动排序的个体，它必须包含在 Droppable 中。Draggable 接受一个 draggableId 属性，该属性是该可排序对象的唯一标识符。Draggable 还接受一个 index 属性，用于确定该对象在排序列表中的位置。index 属性的起始值为 0。
-- -------------------- ---- -------
------ - ---------------- ---------- --------- - ---- --------------------------
-----------------
---------- ---------------------------
----------- -- -
---------- ---------------------------- ----------
----------- -- -
----- ----------------------- --------------------------------
-
-------
--
------------
--
------------
------------------Draggable 还提供了一个 isDragDisabled 属性，该属性用于指定该对象是否可以拖动排序。默认情况下，isDragDisabled 为 false。
-- -------------------- ---- -------
------ - ---------------- ---------- --------- - ---- --------------------------
-----------------
---------- ---------------------------
----------- -- -
---------- ---------------------------- --------- ----------------------
----------- -- -
----- ----------------------- --------------------------------
-
-------
--
------------
--
------------
------------------Draggable 还需提供一个 renderClone 属性，该属性为提供的方法提供一个复制体。
-- -------------------- ---- -------
------ - ---------------- ---------- --------- - ---- --------------------------
-----------------
---------- ---------------------------
----------- -- -
----------
----------------------------
---------
----------------------- -- -
-----
-----------------------
-------------------------------- -----------------------
-
-
-------
--
-
----------- -- -
----- ----------------------- --------------------------------
-
-------
--
------------
--
------------
------------------示例代码
下面是一个示例 React Native 应用程序，演示使用 react-native-useful-dnd 进行拖放排序：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- ----- ---- - ---- ---------------
------ - ---------------- ---------- --------- - ---- --------------------------
------ ------- -------- ----- -
----- ------- --------- - ----------
- --- ---- -------- ----- -- --
- --- ---- -------- ----- -- --
- --- ---- -------- ----- -- --
---
----- --------- - -- ------------ ------ -- -- -
-- -------------- -------
----- -------- - ------------------
----- --------- - ----------------------------- ---
---------------------------------- -- ---------
-------------------
--
------ -
----- -------------------------
---------------- ----------------------
---------- --------------------
----------- -- -
----- ---------------------------- ------------------------
------------- --- ------- -- ------ -- -
---------- -------- ---------------- --------------
----------- -- -
-----
-----------------------
-------------------- -------------------------
-----------------------------
-
----------------------
-------
--
------------
---
----------------------
-------
--
------------
------------------
-------
--
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
----- -
---------------- ----------
-------- ---
--------------- --
------------- --
--
---总结
react-native-useful-dnd 是一个强大的 npm 包，可用于创建可排序的拖放组件，是 React Native 开发中一个非常有用的框架。本文介绍了如何在 React Native 应用程序中使用它。如果您正在开发一个需要拖放排序的应用程序，那么 react-native-useful-dnd 是值得一试的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5f51ab1864dac671ce