本文へ移動
バージョン: 6.x

開発者ツール

React Navigationを使用する際のデバッグを容易にするための開発者ツール。

開発者ツールを使用するには、@react-navigation/devtoolsをインストールします。

npm install @react-navigation/devtools

このパッケージのフックは開発中のみ機能し、本番環境では無効になります。本番ビルドから削除するために特別な操作は必要ありません。

API定義​

このパッケージは以下のAPIを提供します

useFlipper​

このフックは、React NativeアプリでFlipperとの統合を提供します。

警告

Expoマネージドアプリでは、Flipperをサポートしていないため、これは機能しません。

このフックを使用するには、以下が必要です。

  • まだ設定されていない場合は、React NativeアプリでFlipperを設定する

  • アプリにreact-native-flipperパッケージをインストールする

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

  • Flipperアプリにreact-navigationプラグインをインストールする

    Install Flipper

使用方法

フックを使用するには、インポートして、引数としてNavigationContainerにrefを渡します。

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アプリとも連携します。

使用方法

フックを使用するには、インポートして、引数としてNavigationContainerにrefを渡します。

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

これで、React Native Debuggerアプリでアプリをデバッグしている場合など、Redux DevTools ExtensionでReact Navigationからのログを確認できるようになります。