跳至主要内容
版本: 6.x

开发者工具

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

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

npm install @react-navigation/devtools

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

API 定义​

该包公开了以下 API

useFlipper​

此钩子提供了与 Flipper 的集成，用于 React Native 应用程序。

警告

由于 Expo 管理的应用程序不支持 Flipper，因此此功能在其中无法使用。

要使用此钩子，您需要

  • 在您的 React Native 应用程序中配置 Flipper（如果尚未配置）

  • 在您的应用程序中安装 react-native-flipper 包

    npm install --save-dev react-native-flipper

  • 在 Flipper 应用程序中安装 react-navigation 插件

    Install Flipper

用法

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

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

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

  useFlipper(navigationRef);

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

现在，只要您的设备连接到 Flipper，您就可以在 Flipper 中使用 React Navigation 开发工具。

React Navigation Logs

React Navigation Linking

useReduxDevToolsExtension​

此钩子提供了与 Redux DevTools Extension 的集成。它也适用于 React Native Debugger 应用程序，其中包含此扩展。

用法

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

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 应用程序调试应用程序时。