开发者工具

开发者工具，使在使用 React Navigation 时更容易进行调试。

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

npm

npm install @react-navigation/devtools

Yarn

yarn add @react-navigation/devtools

pnpm

pnpm add @react-navigation/devtools

此包中的 Hooks 仅在开发期间有效，并在生产环境中禁用。您无需执行任何特殊操作即可从生产构建中删除它们。

API 定义

该包公开了以下 API

useLogger

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

用法

要使用此 Hook，请导入它并将 ref 传递给 NavigationContainer 作为其参数

静态

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

动态

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

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

用法

要使用此 Hook，请导入它并将 ref 传递给 NavigationContainer 作为其参数

静态

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

动态

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 app 调试您的应用时。