任意のコンポーネントからナビゲーションプロパティにアクセスする

useNavigation はnavigationオブジェクトにアクセスできるフックです。navigationプロパティをコンポーネントに直接渡せない場合、または深くネストされた子コンポーネントの場合に渡したくない場合に便利です。

画面コンポーネントではない普通のコンポーネントは、ナビゲーションプロパティを自動的に受け取りません。たとえば、このGoToButtonコンポーネントの場合

import * as React from 'react';
import { Button } from 'react-native';

function GoToButton({ navigation, screenName }) {
  return (
    <Button
      title={`Go to ${screenName}`}
      onPress={() => navigation.navigate(screenName)}
    />
  );
}

この例外を解決するには、画面からそれをレンダリングするときに、navigationプロパティをGoToButtonに渡すことができます。 <GoToButton navigation={props.navigation} />のように。

または、useNavigationを使用してnavigationプロパティを（興味があれば、Reactコンテキストを介して）自動的に提供することができます。

コンポーネントでのuseNavigation

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function GoToButton({ screenName }) {
  const navigation = useNavigation();

  return (
    <Button
      title={`Go to ${screenName}`}
      onPress={() => navigation.navigate(screenName)}
    />
  );
}

このアプローチを使用すると、navigationプロパティを明示的に渡さなくてもアプリの任意の場所にGoToButtonをレンダリングでき、期待どおりに機能します。