useNavigationState

useNavigationStateは、画面を含むナビゲーターのナビゲーション状態にアクセスできるフックです。ナビゲーション状態に基づいて何かをレンダリングしたいというまれなケースで役立ちます。

警告

ナビゲーターの状態オブジェクトは内部的なものであり、マイナーリリースで変更される可能性があることに注意してください。本当に必要でない限り、ナビゲーション状態オブジェクトのプロパティは、indexとroutesを除いて使用しないでください。状態オブジェクトの構造に依存せずに達成できない機能がある場合は、問題を報告してください。

引数としてセレクター関数を取得します。セレクターは完全なナビゲーション状態を受け取り、状態から特定の値を返すことができます。

const index = useNavigationState((state) => state.index);

セレクター関数は、不要な再レンダリングを減らすのに役立つため、気にしている場合のみ画面が再レンダリングされます。状態オブジェクト全体が必要な場合は、明示的に行うことができます。

const state = useNavigationState((state) => state);

警告

このフックは高度なケースに役立ちますが、注意しないとパフォーマンスの問題が発生しやすいため、ほとんどの場合、ナビゲーターの状態は必要ありません。

useNavigationStateとnavigation.getState()の違いは何ですか？

navigation.getState()関数も現在のナビゲーション状態を返します。主な違いは、useNavigationStateフックは値が変更されたときに再レンダリングをトリガーするのに対し、navigation.getState()はトリガーしないことです。例えば、次のコードは正しくありません。

function Profile() {
  const routesLength = navigation.getState().routes.length; // Don't do this

  return <Text>Number of routes: {routesLength}</Text>;
}

この例では、新しい画面をプッシュしても、このテキストは更新されません。フックを使用すると、期待通りに動作します。

function Profile() {
  const routesLength = useNavigationState((state) => state.routes.length);

  return <Text>Number of routes: {routesLength}</Text>;
}

では、いつnavigation.getState()を使用するのでしょうか？これは主に、レンダリングされる内容を気にしないイベントリスナー内で役立ちます。ほとんどの場合、フックを使用することをお勧めします。

クラスコンポーネントでの使用

フックを使用するには、クラスコンポーネントを関数コンポーネントでラップできます。

class Profile extends React.Component {
  render() {
    // Get it from props
    const { routesLength } = this.props;
  }
}

// Wrap and export
export default function (props) {
  const routesLength = useNavigationState((state) => state.routes.length);

  return <Profile {...props} routesLength={routesLength} />;
}