# @delacour/react-native-bottom-sheet 中文文档

规范地址：https://npmcn.com/package/%40delacour/react-native-bottom-sheet/

版本：0\.9\.0
npm 元数据更新时间：2026-11-10T17:17:50.881Z
中文译文更新时间：2026-11-11T21:29:09.464Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40delacour/react-native-bottom-sheet
原文对照：https://npmcn.com/package/%40delacour/react-native-bottom-sheet/?lang=original
项目主页：https://ui.delacour.co.nz/docs/bottom-sheet
源码仓库：https://github.com/delacournz/delacour-ui

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

- 包体积（解压后）：419 kB，144 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：react \>=19，react-native \>=0\.88，react-native-teleport \>=1\.2，react-native-worklets \>=0\.5，react-native-reanimated \>=4，react-native-gesture-handler \>=3\.3，react-native-safe-area-context \>=5，react-native-keyboard-controller \>=1\.18
- 首次发布：2026-10-04T03:58:04.707Z
- 最新版本发布：2026-11-10T17:17:50.474Z
- 近 30 天下载量：12730（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：86（近 12 个月 86 个）

## 中文简介

React Natural 的无头底工作表引擎 — 没有符号, 没有类Name

## 安装

```sh
npm install @delacour/react-native-bottom-sheet
```

也可以使用：`pnpm add @delacour/react-native-bottom-sheet`、`yarn add @delacour/react-native-bottom-sheet`、`bun add @delacour/react-native-bottom-sheet`

## README

# @ delacour/ react- native-下表

用于 React Natural 的无头底工作表引擎 — Gusture Handler for the 锅,为运动而重新激活,为键盘控制器, 传送传送门.

没有标志,没有 `className`,没有主题。 每个半径、颜色和内置都是 `style` 你通过。 如果你想要一张已经穿戴设计系统的工作表,请使用 [`@delacour/react-native-ui/bottom-sheet`](https://ui.delacour.co.nz/docs/native/components/bottom-sheet), (中文(简体) ), 是这个引擎 上面有符号.

联合国 [ui.delacour.co.nz/docs/下表](https://ui.delacour.co.nz/docs/bottom-sheet)。 。 。 .

> **阿尔法.** 这个包裹, `@delacour/react-native-ui` 财务报告和审定财务报表 `@delacour/react-native-charts` 发布到 npm `alpha` 标记,每个字母 也为 `latest`。 。 。 .

## 安装

```bash
bun add @delacour/react-native-bottom-sheet@alpha
bunx expo install react-native-gesture-handler react-native-reanimated react-native-worklets react-native-keyboard-controller react-native-safe-area-context react-native-teleport
```

本地的同龄人会经历的 `expo install`,所以SDK 选择可以 建造; `react` 财务报告和审定财务报表 `react-native` 已经在任何应用程序中.

**只有Fabric,只有dev客户端.** `react-native-teleport` 移动本地视图 在主机之间, 需要新的架构—— 自 React 以来的默认 原生地为0.76,也是世博会SDK53及后期唯一的建筑. 这是本地人 模块,所以它不会在 Expo Go 中运行: 构建 dev 客户端 (单位:千美元)`npx expo run:ios`,或者EAS开发建筑),并在之后重建 安装.

| 端点 | 范围 | 为什么 |
| --- | --- | --- |
| `react` | `>=19` | 参考文件 |
| `react-native` | `>=0.88` | 家具 `getBoundingClientRect` |
| `react-native-gesture-handler` | `>=3.3` | 手柄和内容 |
| `react-native-reanimated` | `>=4` | 每个动画值 |
| `react-native-worklets` | `>=0.5` | `scheduleOnRN` 从 UI 线程 |
| `react-native-keyboard-controller` | `>=1.18` | 唯一的键盘来源——帧精确高度和进度 |
| `react-native-safe-area-context` | `>=5` | 粘贴脚下最下面的乐队 |
| `react-native-teleport` | `>=1.2` | 入口——反应树保留,所以上下文到达每个部分 |

软件包本身没有运行时间依赖.

## 供应商

您的应用程序上载了4个,按照这个顺序。 该套装只使最后一个——a 有巢的手势根是枯重的 有巢的 `KeyboardProvider` 是一个 第二键盘与第一键不一致.

```tsx
import { BottomSheetProvider } from "@delacour/react-native-bottom-sheet";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { KeyboardProvider } from "react-native-keyboard-controller";
import { initialWindowMetrics, SafeAreaProvider } from "react-native-safe-area-context";

<GestureHandlerRootView style={{ flex: 1 }}>
  <SafeAreaProvider initialMetrics={initialWindowMetrics}>
    <KeyboardProvider>
      <BottomSheetProvider>{children}</BottomSheetProvider>
    </KeyboardProvider>
  </SafeAreaProvider>
</GestureHandlerRootView>;
```

`BottomSheetProvider` 是根主机, 每张工作表都会传送到, 所以是一个工作表 画出航海家的作品 没有它 `Portal` 将它编成一个内置的工作表.

## 解剖学

```tsx
import { BottomSheet } from "@delacour/react-native-bottom-sheet";

<BottomSheet snapPoints={["40%", "90%"]}>
  <BottomSheet.Trigger>
    <Text>Open</Text>
  </BottomSheet.Trigger>
  <BottomSheet.Portal>
    <BottomSheet.Overlay style={{ backgroundColor: "rgba(0,0,0,0.4)" }} />
    <BottomSheet.Container>
      <BottomSheet.Background style={{ backgroundColor: "#fff", borderTopLeftRadius: 16, borderTopRightRadius: 16 }} />
      <BottomSheet.Handle style={{ alignItems: "center", paddingVertical: 12 }}>
        <View style={{ width: 36, height: 5, borderRadius: 3, backgroundColor: "#ccc" }} />
      </BottomSheet.Handle>
      <BottomSheet.Content style={{ padding: 16 }}>
        <BottomSheet.Title>Filters</BottomSheet.Title>
        <BottomSheet.Description>Narrow the list down.</BottomSheet.Description>
        <BottomSheet.TextInput placeholder="Search" />
        <BottomSheet.Close>
          <Text>Close</Text>
        </BottomSheet.Close>
      </BottomSheet.Content>
      <BottomSheet.Footer padding={16}>
        <Button title="Apply" onPress={apply} />
      </BottomSheet.Footer>
    </BottomSheet.Container>
  </BottomSheet.Portal>
</BottomSheet>;
```

`Container` 是移动的面板; `Content` 里面是静态的身体. 把尸体换掉 `BottomSheet.ScrollView`, (中文(简体) ), `FlatList` 或者说 `SectionList` 财务报告和审定财务报表 列表的内容大小成为工作表本身的坐标点; 转换为 `BottomSheet.Steps` 控制器从 `useSheetMachine` 和床单 高度滑翔在打字机的台阶之间. `Footer` 被粘着 默认,站在安全区域带上并骑着键盘的边缘. `<BottomSheet.Portal inline>` 落实; `<BottomSheet.Host name>` \* 向土著模式提供自己的目标; `detached` 将工作表显示为 纸牌.

尺寸和行为—— `snapPoints`, (中文(简体) ), `dynamicSizing`, (中文(简体) ), `maxDynamicContentSize`, (中文(简体) ), `keyboardBehavior`, (中文(简体) ), `detached`可能的工作道具是根的. 每个角色都参与 `style` 财务报告和审定财务报表 `ref`,以及提供文本或媒体的部分 带 `asChild` 把他们的行为交给你的一部分.

## 数学本身

`@delacour/react-native-bottom-sheet/core` 每一个坐标点、键盘、页脚 和包中的几何计算,加上可导入的步机 模块图中没有本地模块 :

```ts
import { defineSheetMachine, positionFor, UNMEASURED } from "@delacour/react-native-bottom-sheet/core";
```

## 许可证

麻省理工学院

## 常见问题

### @delacour/react-native-bottom-sheet 是什么？

React Natural 的无头底工作表引擎 — 没有符号, 没有类Name

### 如何安装 @delacour/react-native-bottom-sheet？

在项目目录运行 npm install @delacour/react-native-bottom-sheet，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19）、react-native（\>=0\.88）、react-native-teleport（\>=1\.2）、react-native-worklets（\>=0\.5）、react-native-reanimated（\>=4）、react-native-gesture-handler（\>=3\.3）、react-native-safe-area-context（\>=5）、react-native-keyboard-controller（\>=1\.18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @delacour/react-native-bottom-sheet 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/delacour\_\_react-native-bottom-sheet 是否存在。

### @delacour/react-native-bottom-sheet 支持 ESM 还是 CommonJS？

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

### @delacour/react-native-bottom-sheet 可以商用吗？

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

### @delacour/react-native-bottom-sheet 的下载量有多少？

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

### @delacour/react-native-bottom-sheet 还在维护吗？

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