# @ankhorage/react-native-reanimated-dnd-web 中文文档

规范地址：https://npmcn.com/package/%40ankhorage/react-native-reanimated-dnd-web/

版本：0\.4\.4
npm 元数据更新时间：2026-09-28T15:41:05.188Z
中文译文更新时间：2026-11-06T05:13:17.863Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ankhorage/react-native-reanimated-dnd-web
原文对照：https://npmcn.com/package/%40ankhorage/react-native-reanimated-dnd-web/?lang=original
项目主页：https://github.com/ankhorage/react-native-reanimated-dnd-web#readme
源码仓库：https://github.com/ankhorage/react-native-reanimated-dnd-web

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：164 kB，27 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=18，react-native \>=0\.80，react-native-worklets \>=0\.7，react-native-reanimated \>=4\.2，react-native-gesture-handler \>=2\.28
- 首次发布：2026-02-28T01:24:09.242Z
- 最新版本发布：2026-09-28T15:41:04.705Z
- 近 30 天下载量：5274（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

用于反应-原生-再生-dnd的网络适配器,具有上游通路和等同相容的网络拖放和可排序支持.

## 安装

```sh
npm install @ankhorage/react-native-reanimated-dnd-web
```

也可以使用：`pnpm add @ankhorage/react-native-reanimated-dnd-web`、`yarn add @ankhorage/react-native-reanimated-dnd-web`、`bun add @ankhorage/react-native-reanimated-dnd-web`

## README

# 反应-原生-活化-dnd-web

跨平台兼容软件包 `react-native-reanimated-dnd`。 。 。 .

-   原产地进口通过上游包装.
-   网络导入决心到此软件包的 React Introduct Web 指针事件适配器 .
-   Expo SDK 57 与 Expo 默认 Babel 配置合作;不需要明确的再动或工作板插件.

## 安装

对于Expo SDK 57,安装包和由Expo支持的动画堆:

```bash
bunx expo install react-native-gesture-handler react-native-reanimated react-native-worklets
bun add @ankhorage/react-native-reanimated-dnd-web
```

经验证的SDK 57矩阵是"博览会" 57.0.15,"反应19.2.3","反应原住民"0.86.2,"反应", 反应原生网络0.21.2,手掌机2.32.0,再动4.5.1和Worklets0.10.1. 不在 Expo 57 Babel 配置中添加一个明确的再激活或 Worklets 变换插件 。 这个 软件包不需要 Worklets 捆绑模式.

## 使用量

```tsx
import { Draggable, Droppable, DropProvider } from '@ankhorage/react-native-reanimated-dnd-web';

export function DragAndDrop() {
  return (
    <DropProvider>
      <Droppable onDrop={(item) => console.log(item)}>
        <Draggable data={{ id: 'item-1' }}>{/* React Native content */}</Draggable>
      </Droppable>
    </DropProvider>
  );
}
```

选择缓冲器 `dist/index.native.js` 反应原生和 `dist/index.web.js` 用于网络。 见 [`WEB_SUPPORT.md`](https://npmcn.com/package/%40ankhorage/react-native-reanimated-dnd-web/WEB_SUPPORT.md) 行为证据和故意的网络疏漏.

## 兼容合同

原生依赖链需要回放"原生"0.80+,"手柄"2.28+,"再生" 4.2+,以及工作室0.7+. 平台对等方在此包装边框仍然可选, 所以只使用网络 消费者可以在不导入本地动画运行时间的情况下使用自有适配器.

## 常见问题

### @ankhorage/react-native-reanimated-dnd-web 是什么？

用于反应-原生-再生-dnd的网络适配器,具有上游通路和等同相容的网络拖放和可排序支持\.

### 如何安装 @ankhorage/react-native-reanimated-dnd-web？

在项目目录运行 npm install @ankhorage/react-native-reanimated-dnd-web，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ankhorage/react-native-reanimated-dnd-web 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ankhorage/react-native-reanimated-dnd-web 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @ankhorage/react-native-reanimated-dnd-web 可以商用吗？

@ankhorage/react-native-reanimated-dnd-web 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ankhorage/react-native-reanimated-dnd-web 的下载量有多少？

根据 npm 官方下载统计，@ankhorage/react-native-reanimated-dnd-web 在 2026/10/06 – 2026/11/04 这 30 天内被下载 5,274 次，日均约 176 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ankhorage/react-native-reanimated-dnd-web 还在维护吗？

最新版本 0\.4\.4 发布于 2026/09/28（1 个月前）；至今共发布 11 个版本，其中过去 12 个月发布了 11 个；首次发布于 2026/02/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。