# @bam\.tech/react-navigation-visualizer-dev-plugin 中文文档
规范地址：https://npmcn.com/package/%40bam.tech/react-navigation-visualizer-dev-plugin/
版本：0\.1\.14
npm 元数据更新时间：2026-10-13T12:38:06.736Z
中文译文更新时间：2026-11-07T15:56:37.068Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40bam.tech/react-navigation-visualizer-dev-plugin
原文对照：https://npmcn.com/package/%40bam.tech/react-navigation-visualizer-dev-plugin/?lang=original
项目主页：https://github.com/bamlab/dev-plugins.git#readme
源码仓库：https://github.com/bamlab/dev-plugins
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：5.4 MB，21 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：expo \>=53\.0\.5，@react-navigation/core \*
- 首次发布：2024-11-28T13:26:23.296Z
- 最新版本发布：2026-05-03T21:12:15.433Z
- 近 30 天下载量：66583（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 1 个）
## 中文简介
基于 Expo DevTools 插件的可视化工具
## 安装
```sh
npm install @bam.tech/react-navigation-visualizer-dev-plugin
```
也可以使用：`pnpm add @bam.tech/react-navigation-visualizer-dev-plugin`、`yarn add @bam.tech/react-navigation-visualizer-dev-plugin`、`bun add @bam.tech/react-navigation-visualizer-dev-plugin`
## README
# @bam
基于Expo DevTools插件的可视化工具,用于回放导航.
## 安装
### 将软件包添加到您的工程中
```bash
npx expo install @bam.tech/react-navigation-visualizer-dev-plugin
```
## 使用量
### 使用方式 `react-navigation`
#### 整合 `react-navigation` 用 DevTools 钩子
```jsx
import { useNavigationContainerRef } from '@react-navigation/native';
import { useReactNavigationDevTools } from '@bam.tech/react-navigation-visualizer-dev-plugin';
export default function App() {
const navigationRef = useNavigationContainerRef();
useReactNavigationDevTools(navigationRef);
return {/* ... */};
}
```
### 使用方式 `expo-router`
使用时 `expo-router`,将 DevToole 集成到主机中 `_layout.tsx` 文档。 您可以导入 `useNavigationContainerRef` 直接从 `expo-router` 并传递给 `useReactNavigationDevTools`数字 :
```tsx
import { useNavigationContainerRef } from 'expo-router';
import { useReactNavigationDevTools } from '@bam.tech/react-navigation-visualizer-dev-plugin';
export default function RootLayout() {
const navigationRef = useNavigationContainerRef();
useReactNavigationDevTools(navigationRef);
return ;
}
```
在这种情况下, `expo-router` 自动管理导航容器,所以只需要在您的布局组件中添加 DevTool 设置即可.
## 这个插件怎么办?
### 在 Metro 中发射
在地铁发射器中,类型为Shift+ M 打开 dev 工具菜单,并选择 `@bam.tech/react-navigation-visualizer-dev-plugin`
该可视化工具可在 `Navigation Tree` 节
### 我堆着什么?
此插件的想法是显示您的当前导航状态,以及用户在通过应用程序的旅程中其进化过程.
有三类要素:
- 堆栈导航器
- 标签导航器
- 屏幕
您可以看到所有连续的导航状态( Dev 插件打开时录入), 如果需要, 您也可以通过点击它们来崩溃堆栈 .
## 常见问题
### @bam\.tech/react-navigation-visualizer-dev-plugin 是什么？
基于 Expo DevTools 插件的可视化工具
### 如何安装 @bam\.tech/react-navigation-visualizer-dev-plugin？
在项目目录运行 npm install @bam\.tech/react-navigation-visualizer-dev-plugin，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：expo（\>=53\.0\.5）、@react-navigation/core（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @bam\.tech/react-navigation-visualizer-dev-plugin 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @bam\.tech/react-navigation-visualizer-dev-plugin 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @bam\.tech/react-navigation-visualizer-dev-plugin 可以商用吗？
@bam\.tech/react-navigation-visualizer-dev-plugin 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @bam\.tech/react-navigation-visualizer-dev-plugin 的下载量有多少？
根据 npm 官方下载统计，@bam\.tech/react-navigation-visualizer-dev-plugin 在 2026/10/08 – 2026/11/06 这 30 天内被下载 66,583 次，日均约 2,219 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @bam\.tech/react-navigation-visualizer-dev-plugin 还在维护吗？
最新版本 0\.1\.14 发布于 2026/05/04（6 个月前）；至今共发布 15 个版本，其中过去 12 个月发布了 1 个；首次发布于 2024/11/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。