useLinkBuilder

useLinkBuilder のフックを使用すると、現在のナビゲーションの状態の画面のリンクに使用するパスを構築できます。画面にフォーカスする name と params を引数として受け取って、linking オプション に基づいたパスを返します。

import { Link, CommonActions, useLinkBuilder } from '@react-navigation/native';

// ...

function DrawerContent({ state, descriptors }) {
  const buildLink = useLinkBuilder();

  return state.routes((route) => (
    <Link
      to={buildLink(route.name, route.params)}
      action={CommonActions.navigate(route.name)}
    >
      {descriptors[route.key].options.title}
    </Link>
  ));
}

このフックはナビゲーションで使用して、ドロワーとタブのナビゲーションなど、ナビゲーション内のさまざまなページへのリンクを表示することを目的としています。カスタムナビゲーション、カスタムドロワーコンテンツ、カスタムタブバーなどを構築する場合は、このフックを使用することもできます。

注意すべき重要な事項がいくつかあります。

• 宛先画面は現在のナビゲーションに存在する必要があります。親ナビゲーションまたは子にネストされたナビゲーションには存在できません。
• これは複数のアプリで再利用できるようにカスタムナビゲーションでのみ使用することを想定しています。通常のアプリコードでは、画面のパスを構築するのではなく、パスを直接使用するか、パスの処理を透過的に処理する Link と useLinkProps を使用します。