@bam

基于Expo DevTools插件的可视化工具,用于回放导航.

安装

将软件包添加到您的工程中

npx expo install @bam.tech/react-navigation-visualizer-dev-plugin

使用量

使用方式 react-navigation

整合 react-navigation 用 DevTools 钩子

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 <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>;
}

使用方式 expo-router

使用时 expo-router,将 DevToole 集成到主机中 _layout.tsx 文档。 您可以导入 useNavigationContainerRef 直接从 expo-router 并传递给 useReactNavigationDevTools数字 :

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 <Stack />;
}

在这种情况下, expo-router 自动管理导航容器,所以只需要在您的布局组件中添加 DevTool 设置即可.

这个插件怎么办?

在 Metro 中发射

在地铁发射器中,类型为Shift+ M 打开 dev 工具菜单,并选择 @bam.tech/react-navigation-visualizer-dev-plugin

该可视化工具可在 Navigation Tree 节

我堆着什么?

此插件的想法是显示您的当前导航状态,以及用户在通过应用程序的旅程中其进化过程.

有三类要素:

• 堆栈导航器

  

• 标签导航器

  

• 屏幕

  

您可以看到所有连续的导航状态( Dev 插件打开时录入), 如果需要, 您也可以通过点击它们来崩溃堆栈 .