【React Navigation 5.x】navigationオブジェクトを取得できず困った時の対応方法

React Navigationを使っていてナビゲーションをネストしていると、子コンポーネントからnavigationオブジェクトを取得できず困った経験ないでしょうか?

こんな時バージョン5からuseNavigationというフックが追加され簡単にnavigationオブジェクトを取得できるようになりました。

使い方は簡単で、以下のとおりnavigationオブジェクトを使いたいモジュールでuseNavigationフックをimport①して、呼び出す②だけです。

import { useNavigation } from ‘@react-navigation/native’  ・・・①
const MyComponent = () => {
    const navigation = useNavigation()・・・②
}

公式サイトのドキュメントではクラスコンポーネントでの使い方も書かれています。併せてご参照ください。

`useNavigation` is a hook which gives access to `navigation`…

 

sponsor