# @appandflow/react-navigation-bottom-sheet 中文文档

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

版本：1\.1\.2
npm 元数据更新时间：2025-11-11T15:24:48.027Z
中文译文更新时间：2026-11-09T22:23:28.481Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40appandflow/react-navigation-bottom-sheet
原文对照：https://npmcn.com/package/%40appandflow/react-navigation-bottom-sheet/?lang=original
项目主页：https://github.com/AppAndFlow/react-navigation-bottom-sheet#readme
源码仓库：https://github.com/AppAndFlow/react-navigation-bottom-sheet

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

- 包体积（解压后）：50.6 kB，35 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@gorhom/bottom-sheet \*，@react-navigation/native \*，react \*，react-native \*，react-native-safe-area-context \*，react-native-screens \*
- 首次发布：2025-11-11T15:17:26.046Z
- 最新版本发布：2025-11-11T15:24:47.777Z
- 近 30 天下载量：1706（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 3 个）

## 中文简介

React 导航和博览路由器底层工作表组件

## 安装

```sh
npm install @appandflow/react-navigation-bottom-sheet
```

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

## README

# @ appandflow/ react-navigation- bottom- singet (中文(简体) )

反应导航的底板导航.

也可以与 Expo 路由器合作 [实例](https://npmcn.com/package/%40appandflow/react-navigation-bottom-sheet/example/expo-router/)

整合 [@ gorhom/ 下表](https://github.com/gorhom/react-native-bottom-sheet) 与 [反应导航](https://github.com/react-navigation/react-navigation)。 。 。 .

## 安装

```sh
yarn add @appandflow/react-navigation-bottom-sheet @react-navigation/native @gorhom/bottom-sheet
```

如果你还没有这些,你还需要安装 [@ gorhom/ 下表依赖性](https://gorhom.github.io/react-native-bottom-sheet/#dependencies) 反应-内生再活化和反应-内生-地相-手相.

## 使用量

```js
import { createBottomSheetNavigator } from '@appandflow/react-navigation-bottom-sheet';

// ...

const BottomSheet = createBottomSheetNavigator();

<BottomSheet.Navigator
  // Default options
  screenOptions={{ snapPoints: ['60%', '90%'] }}
>
  {/* The first screen should be your app content */}
  <BottomSheet.Screen name="app" component={MyApp} />
  <BottomSheet.Screen name="firstSheet" component={FirstSheetComponent} />
  <BottomSheet.Screen
    name="secondSheet"
    component={SecondSheetComponent}
    // Can pass any prop from @gorhom/bottom-sheet's BottomSheetModal
    options={{ snapPoints: [200, '100%'], index: 1 }}
  />
</BottomSheet.Navigator>;

// ...

// Open like any regular react-navigation screen.
navigation.navigate('firstSheet', { id: 1 });
```

见反应导航 [示例应用程序](https://npmcn.com/package/%40appandflow/react-navigation-bottom-sheet/example/react-navigation/src/SimpleExample.tsx) 或 博览会路由器示例 [`example/expo-router/app`](https://npmcn.com/package/%40appandflow/react-navigation-bottom-sheet/example/expo-router/app) 完全使用细节.

### 运行实例

-   `yarn example:react-navigation` - 发射经典回放导航样本
-   `yarn example:expo-router` - 启动世博会路由器样本

## API 密码

### 导航选项

#### `snapPoints`

```ts
Array<string | number>;
```

底层工作表的接点,应该从下到上排序。 它接受数和字符串的数组.

默认为 `['66%']`。 。 。 .

#### 其他选择

多数道具来自 `BottomSheetModal` 被曝光为导航选项。 见 [@gorhom/下表网站](https://gorhom.github.io/react-native-bottom-sheet/modal/props) 用于完整文档.

### 导航助手

导航辅助工具可用于 `navigation` 对象.

#### `snapTo`

```ts
(index: number) => void
```

将当前工作表对齐到 `index`。 。 。 .

## 捐款

见 [贡献指南](https://npmcn.com/package/%40appandflow/react-navigation-bottom-sheet/CONTRIBUTING.md) 学习如何为储存库和发展工作流程作出贡献.

## 许可证

麻省理工学院

## 常见问题

### @appandflow/react-navigation-bottom-sheet 是什么？

React 导航和博览路由器底层工作表组件

### 如何安装 @appandflow/react-navigation-bottom-sheet？

在项目目录运行 npm install @appandflow/react-navigation-bottom-sheet，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@gorhom/bottom-sheet（\*）、@react-navigation/native（\*）、react（\*）、react-native（\*）、react-native-safe-area-context（\*）、react-native-screens（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @appandflow/react-navigation-bottom-sheet 支持 TypeScript 吗？

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

### @appandflow/react-navigation-bottom-sheet 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @appandflow/react-navigation-bottom-sheet 可以商用吗？

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

### @appandflow/react-navigation-bottom-sheet 的下载量有多少？

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

### @appandflow/react-navigation-bottom-sheet 还在维护吗？

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