react-navigationのページ遷移先でパラメーターを取得できない問題

#サマリー

FW

React Native

パッケージ

react-navigation v5

問題

ページ遷移先にパラメーターを渡しているのに、遷移先のページでパラメーターを取得しようとするとエラーがおきる

原因

react-navigationのバージョンによってパラメーターの取得方法が異なり、使用しているバージョンとは違うやり方をしていたこと。

ネットだとバージョン４系に対応した書き方が沢山出てくるかと思いますが、最新は5系になりますので書き方が違います。 もし、”undefined"だったり、"...is not a function"みたいなエラーが出ていたら、バージョンにあった書き方をしているかどうか確認してみてください！ 以下より詳細に解説していきます。 #コード ##問題のコード パラメーターの取得方法がネットでは２種類のやり方がありましたが、両方ダメでした。

IndexScreen.js

// 遷移元（これは問題ない）
// navigate()の第２引数に、渡したいパラメーターをセットしている
<Button
 title="詳細を見る"
 onPress={() => this.props.navigation.navigate('DetailScreen', { id: 'hogehoge' })
/>

DetailScreen.js

// 遷移先（問題あり）
// 渡されたパラメーターを取得しようとしているがエラーが出る

// エラーがでる取得方法1
<Text>
  {this.props.navigation.getParam('id')}
</Text>
// エラー文 => "TypeError: this.props.navigation.getParam is not a function..."

// エラーがでる取得方法2
<Text>
  {this.props.navigation.state.params.id}
</Text>
// エラー文 => "Cannot read property params of undefined"

##成功したコード

DetailScreen.js

// 遷移先
// パラメーターの取得に成功した方法
<Text>
  {this.props.route.params.id}
</Text>

#まとめ

• 初歩的なエラーが出たら、バージョンに合った書き方ができてない可能性アリ
• 4系と5系では取得する書き方違うよ！
• てかドキュメントに書いてあったわ...公式のドキュメントちゃんと読みます😭

#参考ページ
Stack Overflow
https://stackoverflow.com/questions/61126610/typeerror-this-props-navigation-getparam-is-not-a-function-while-passing-parame

React Navigation 公式ドキュメント
https://reactnavigation.org/docs/params