开发者工具

使用 React Navigation 时可以更轻松地进行调试的开发者工具。

¥Developer tools to make debugging easier when using React Navigation.

要使用开发者工具，请安装 @react-navigation/devtools：

¥To use the developer tools, install @react-navigation/devtools:

npm

npm install @react-navigation/devtools

Yarn

yarn add @react-navigation/devtools

pnpm

pnpm add @react-navigation/devtools

此包中的钩子仅在开发期间起作用，在生产中被禁用。你不需要执行任何特殊操作即可将它们从生产版本中删除。

¥Hooks from this package only work during development and are disabled in production. You don't need to do anything special to remove them from the production build.

API 定义

¥API Definition

该包公开了以下 API：

¥The package exposes the following APIs:

useLogger

此钩子为 React Navigation 提供了一个记录器。它将导航状态和操作记录到控制台。

¥This hook provides a logger for React Navigation. It logs the navigation state and actions to the console.

用法：

¥Usage:

要使用该钩子，请导入它并将 ref 传递给 NavigationContainer 作为其参数：

¥To use the hook, import it and pass a ref to the NavigationContainer as its argument:

Static

import * as React from 'react';
import {
  createStaticNavigation,
  useNavigationContainerRef,
} from '@react-navigation/native';
import { useLogger } from '@react-navigation/devtools';

/* content */

export default function App() {
  const navigationRef = useNavigationContainerRef();

  useLogger(navigationRef);

  return <Navigation ref={navigationRef} />;
}

Dynamic

import * as React from 'react';
import {
  NavigationContainer,
  useNavigationContainerRef,
} from '@react-navigation/native';
import { useLogger } from '@react-navigation/devtools';

export default function App() {
  const navigationRef = useNavigationContainerRef();

  useLogger(navigationRef);

  return (
    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
  );
}

useReduxDevToolsExtension

该钩子提供与 Redux DevTools 扩展 的集成。它也适用于包含此扩展的 React Native Debugger app。

¥This hook provides integration with Redux DevTools Extension. It also works with React Native Debugger app which includes this extension.

用法：

¥Usage:

要使用该钩子，请导入它并将 ref 传递给 NavigationContainer 作为其参数：

¥To use the hook, import it and pass a ref to the NavigationContainer as its argument:

Static

import * as React from 'react';
import {
  createStaticNavigation,
  useNavigationContainerRef,
} from '@react-navigation/native';
import { useReduxDevToolsExtension } from '@react-navigation/devtools';

/* content */

export default function App() {
  const navigationRef = useNavigationContainerRef();

  useReduxDevToolsExtension(navigationRef);

  return <Navigation ref={navigationRef} />;
}

Dynamic

import * as React from 'react';
import {
  NavigationContainer,
  useNavigationContainerRef,
} from '@react-navigation/native';
import { useReduxDevToolsExtension } from '@react-navigation/devtools';

export default function App() {
  const navigationRef = useNavigationContainerRef();

  useReduxDevToolsExtension(navigationRef);

  return (
    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
  );
}

现在，你将能够在 Redux DevTools Extension 中查看来自 React Navigation 的日志，例如当你使用 React Native Debugger 应用调试应用时。

¥Now, you'll be able to see logs from React Navigation in Redux DevTools Extension, e.g. when you're debugging your app with React Native Debugger app.