@dev-plugins/反应-导航

可在 Expo App 中运行的回放导航 DevTools

安装

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

npx expo install @dev-plugins/react-navigation

使用量

使用方式 react-navigation

整合 react-navigation 用 DevTools 钩子

import { useNavigationContainerRef } from '@react-navigation/native';
import { useReactNavigationDevTools } from '@dev-plugins/react-navigation';

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 '@dev-plugins/react-navigation';

export default function RootLayout() {
  const navigationRef = useNavigationContainerRef();
  useReactNavigationDevTools(navigationRef);

  return <Stack />
}

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