Skip to main content
Version: 6.x

开发者工具

使用 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 install @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:

useFlipper​

此钩子为 React Native 应用提供与 Flipper 的集成。

¥This hook provides integration with Flipper for React Native apps.

警告

这在 Expo 管理的应用中不起作用，因为它们不支持 Flipper。

¥This doesn't work in Expo managed apps since they don't support Flipper.

为了能够使用这个钩子，你需要：

¥To be able to use this hook, you need to:

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

    ¥Configure Flipper in your React Native app if it's not configured already

  • 在你的应用中安装 react-native-flipper 包：

    ¥Install the react-native-flipper package in your app:

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

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

    ¥Install the react-navigation plugin in the Flipper app

Install Flipper

用法：

¥Usage:

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

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

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 开发工具。

¥Now, you'll be able to use the React Navigation devtools in Flipper whenever your device is connected to Flipper.

React Navigation Logs

React Navigation Linking

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:

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.