今回は、React Native 遷移先ページから遷移元ページで定義した関数を実行する方法についてです。
親コンポーネントの関数を子コンポーネントから実行する処理に関しては何度もやっているのでわかっているのですが、ページ遷移が間に挟まる書き方はしたことがなかったので、最初は何をしたか良いかすら分かりませんでした。
ちなみに実装したい機能は、Twitter のように記事の詳細ページでいいね！をした後、前のページに戻ったら、そのいいね！をTLのいいね数に反映し、かつ記事をいいね済みにするというものです。
なお、ページ遷移には React Navigation を使っております。
で、一番参考になった記事がこちら。
React navigation goBack() and update parent state – Stack Overflow
https://stackoverflow.com/questions/44223727/react-navigation-goback-and-update-parent-state
this.props.navigation.navigate() を使ってページ遷移をする際に、遷移先ページに遷移元ページの実行したい関数を渡す方法です。
サンプルコードは下記のとおりです。
まず、遷移元のページから pageB に遷移する際、第二引数の params に関数を渡します。
this.props.navigation.navigate('pageB', { action: this.action });
遷移元のページに追加するのは以上です。
遷移先ページの pageB では、遷移元ページの関数を実行したいタイミングで下記を実行すればOKです！
const { route } = this.props;
route.params.action();
勿論、関数に定義してあれば引数を渡すこともできます。
処理としては以上です！
私が実装したいいね機能は、この遷移元ページの action という関数内で、TL のいいね済/未いいねのフラグといいね数の管理をするようにしています。
そのため、遷移先ページの pageB でいいね！処理を行う API を呼び出し、それが成功したタイミングで、action 関数を呼び出すようにしました。
結果は大成功！
思った通り、pageB でいいね済みにした後、遷移元のページに戻ったところ、記事がいいね済みの表示になっており、いいね数も増えていました。
思ったよりも簡単にできて良かったです…！
以上、React Native の React Navigation を使って、遷移元ページで定義した関数を遷移先ページから実行する方法についてでした。
ご参考になれば幸いです。
