# @bam\.tech/flow-navigator 中文文档

规范地址：https://npmcn.com/package/%40bam.tech/flow-navigator/

版本：0\.0\.2
npm 元数据更新时间：2026-10-13T12:37:50.641Z
中文译文更新时间：2026-11-07T15:58:09.178Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40bam.tech/flow-navigator
原文对照：https://npmcn.com/package/%40bam.tech/flow-navigator/?lang=original
项目主页：https://github.com/bamlab/flow-navigator#readme
源码仓库：https://github.com/bamlab/flow-navigator

弃用说明：No longer maintained\. It targets @react-navigation v6 and React Native 0\.72\. Build multi-step flows on @react-navigation/native-stack v7 instead\.

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

- 包体积（解压后）：746 kB，56 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \*，react-native ^0\.72\.6，@react-navigation/native ^6\.1\.9，@react-navigation/native-stack ^6\.9\.17
- 首次发布：2023-11-14T10:10:41.943Z
- 最新版本发布：2024-03-15T08:52:34.377Z
- 近 30 天下载量：6955（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 0 个）

## 中文简介

反应导航的流程导航器

## 安装

```sh
npm install @bam.tech/flow-navigator
```

也可以使用：`pnpm add @bam.tech/flow-navigator`、`yarn add @bam.tech/flow-navigator`、`bun add @bam.tech/flow-navigator`

## README

![Alt text](https://npmcn.com/package/%40bam.tech/flow-navigator/image.png)

# 回放导航的流程导航

## 简化本地反应中的流程导航

流程导航提供了简化的 API ,用于管理您的 React 本地应用程序中的导航流量 [反应导航](https://reactnavigation.org/)。它总结了流程管理的复杂性,允许单个屏幕使用简单的方法导航流程,例如 `goToNextStep` 财务报告和审定财务报表 `goToPreviousStep`,而不需要理解整个导航堆栈,或者知道哪个页是下一个页.

## 特征

-   **简化流程管理**: 获得一个单一位置上您流量的全面概览. 这使得新开发者能够快速地理解整个流量,而无需单独检查每个页面.
-   **责任分离**:屏幕不知道其在流量中的具体位置. 他们不需要知道下一页是哪页;他们只是顺着流中的下一页来导航.
-   **宣布屏幕顺序**: 以声明方式定义导航流中屏幕的顺序,确保清晰可维护的导航结构.

## 安装

流道导航以反应-通航的本土堆栈导航器为上部. 所以,它需要两个 [反应导航](https://reactnavigation.org/docs/getting-started/) 编辑 [本地堆栈导航器](https://reactnavigation.org/docs/native-stack-navigator/) 已安装.

要安装流导, 运行 :

```bash
yarn add @bam.tech/flow-navigator
# or
npm install @bam.tech/flow-navigator
```

## 使用量

### 基本用途

```tsx
import { createFlowNavigator } from '@bam.tech/flow-navigator';

const FlowNavigator = createFlowNavigator();

export const FlowNavigatorExample = () => {
   // Define your screens and their order in the flow
  return (
    <FlowNavigator.Navigator>
      <FlowNavigator.Screen name="Step1" component={Step1Page} />
      <FlowNavigator.Screen name="Step2" component={Step2Page} />
      <FlowNavigator.Screen name="Step3" component={Step2Page} />
    </FlowNavigator.Navigator>
  );
};
```

在每一个屏幕组件中,可以使用:

```tsx
import { useFlow } from '@bam.tech/flow-navigator';

const Step1Page = () => {
  const { goToNextStep, goToPreviousStep, currentStep } = useFlow();

  return (
    <Button title="Go to next page" onPress={() => goToNextStep()} />
  )
};
```

您可以在 [实例](https://npmcn.com/package/%40bam.tech/flow-navigator/example/App.tsx) 文件夹.

![Alt text](https://npmcn.com/package/%40bam.tech/flow-navigator/Nov-15-2023%2015-29-57.gif)

### 定义有条件的步骤

在某些情况下,流动可能包括有条件的步骤。 这些步骤可能取决于用户的具体情况,或取决于某些行动是否已经完成。 您可以在导航流中声明管理这样的有条件步骤 .

以下是根据hasTopassStep2变量有条件地显示"步骤2"的例子. 此变量可能是从后端获取的一块数据, 也可能是您应用程序中的状态 。 就我们而言,我们用Jotai 在当地储存用户数据.

```tsx
import { createFlowNavigator } from '@bam.tech/flow-navigator';

export const flagAtom = atom(false);

const FlowNavigator = createFlowNavigator();

export const FlowNavigatorExample = () => {
  const [flag] = useAtom(flagAtom);

  return (
    <FlowNavigator.Navigator>
      <FlowNavigator.Screen name="Step1" component={Step1Page} />
      {flag && <FlowNavigator.Screen name="Step2" component={Step2Page} />}
      <FlowNavigator.Screen name="Step3" component={Step3Page} />
    </FlowNavigator.Navigator>
  );
};
```

在这个例子中,Step2屏幕只有在有ToPassStep2评价为真的情况下才会被包含在流量中.

您可以通过设置布尔状态来启用或禁用您流中的任意路径 : `setFlag(false)`

```tsx
import { useFlow } from '@bam.tech/flow-navigator';

export const Step1Page = () => {
  const {goBack, goToNextStep} = useFlow();
  const [flag] = useAtom(flagAtom);

  const onNextPress = async () => {
    setFlag(false);
    goToNextStep();
  };

  const onBackPress = () => {
    goBack();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.pageTitle}>Current page: 1</Text>
      <FlowInfos />
      <Button title="next" onPress={onNextPress} />
      <Button title="back" onPress={onBackPress} />
    </View>
  );
};
```

您可以在 [实例](https://npmcn.com/package/%40bam.tech/flow-navigator/example/src/FlowNavigatorExample.tsx) 文件夹

### 使用多个屏幕定义步骤

在某些情况下,流量的单步可能包含多个屏幕. 要在一步内组合这些屏幕, 您有几种选项: 使用 [组](https://reactnavigation.org/docs/group/) 或者说 [嵌入式导航器](https://reactnavigation.org/docs/screen-options-resolution/)。 。 。 . 两种方法的实例可见于示例文件夹. 如果适合你的用法,我们建议使用小组 然而,需要注意的一个限制是: `currentStep` 将反映当前焦点屏幕的名称,而不是组名称。 所以台阶上所有的屏幕都不一样 `currentStep` 数值。 与巢而通航, `currentStep` 是子导航器的名称,它为步骤提供了更一致的表示. 请注意,子导航器的所有页会对应一个进度指数的递增,在整个步骤中保持不变.

### 使用大小写

Flows是具有预定义顺序的页面序列,引导用户通过您应用程序内部的特定进程. 无论是复杂还是直截了当,流量都是许多应用程序用户体验的一个基本部分. 以下是流程导航特别有用的一些常见例子:

-   登入流量
-   出版后流程
-   订阅流程
-   购物车检出程序
-   反馈流量调查
-   配置设置流程

## API 定义

### 流动导航器

流程导航基于 [本地堆栈](https://reactnavigation.org/docs/native-stack-navigator/#api-definition),它继承了相同的API.

### 使用花纹

在流程导航下定义的屏幕内,您可以使用 `useFlow` `useFlow` 提供下列帮助:

-   `goToNextStep`:根据导航流中屏幕的顺序来导航到流量的下一步.
-   `goToPreviousStep`:根据导航流中屏幕的顺序来导航到流量中上一步.
-   `quitFlow`:为出出流.

`useFlow` 还提供关于流动当前步骤的信息。 它包含以下属性:

-   `currentStep`: 表示流中当前步骤标识符的字符串。 基于屏幕的名称.
-   `progress`:一个数字,表示流动中的进展。 它被计算为当前指数与路线总数之比.
-   `canGoToPreviousStep`:布尔表示是否可通向上一个步骤.
-   `canGoToNextStep`:布尔表示是否可通向下一步.

## 捐款

调用请求和专题建议非常受欢迎!

### 测试您的更改

您可以在示例文件夹中尝试您的更改 . 使用 [线条链接](https://classic.yarnpkg.com/lang/en/docs/cli/link/) 以尝试本地图书馆版本 :

1.  在根目录中 `@bam.tech/flow-navigator`运行

```bash
  cd packages/lib
  yarn link
```

2.  实例项目的链接 :

```bash
  cd packages/example
  yarn link "@bam.tech/flow-navigator"
```

3.  将代码从TS转至JS, 以尝试例子中的变化。 您可以在 repo 根运行此命令

```bash
  yarn transpile:lib
```

4.  完成时解除链接, 更改一旦发布 :

```bash
  cd packages/example
  yarn unlink "@bam.tech/flow-navigator"
  yarn install
```

### 发布软件包

1.  将套件./包装/lib/包装.json增加
2.  执行更改 git 承诺 - m "chore: tump 版本"
3.  添加匹配版本的标签

```bash
   git tag vx.x.x && git push --tags
```

3.  然后发布软件包: 在 repo 根处运行此命令

```bash
  yarn publish:lib
```

## 常见问题

### @bam\.tech/flow-navigator 是什么？

反应导航的流程导航器注意：该包已被作者标记为弃用——No longer maintained\. It targets @react-navigation v6 and React Native 0\.72\. Build multi-step flows on @react-navigation/native-stack v7 instead\.

### 如何安装 @bam\.tech/flow-navigator？

在项目目录运行 npm install @bam\.tech/flow-navigator，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（^0\.72\.6）、@react-navigation/native（^6\.1\.9）、@react-navigation/native-stack（^6\.9\.17）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bam\.tech/flow-navigator 支持 TypeScript 吗？

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

### @bam\.tech/flow-navigator 支持 ESM 还是 CommonJS？

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

### @bam\.tech/flow-navigator 可以商用吗？

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

### @bam\.tech/flow-navigator 的下载量有多少？

根据 npm 官方下载统计，@bam\.tech/flow-navigator 在 2026/10/08 – 2026/11/06 这 30 天内被下载 6,955 次，日均约 232 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bam\.tech/flow-navigator 还在维护吗？

最新版本 0\.0\.2 发布于 2024/03/15（2 年前）；至今共发布 9 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/11/14。作者已将其标记为弃用，新项目建议寻找替代方案。