【ReactNative開発】ReactNavigationで画面遷移時に再レンダリングさせる方法

こんにちは。今日も自分がつまづいたポイントメモです。同じ問題につまづいた方のお役に立てれば幸いです。

前提

• 構成：React Native + Expo
• 画面遷移：React Navigation (Version5.x) を使用

問題

React Navigationで画面遷移した（例えば、戻るボタンを押した）際に、画面が再レンダリングされない。

シナリオとして、例えばプロフィール画面とプロフィール更新画面があり、プロフィール更新画面で更新が完了した後にプロフィール画面に戻った際に、更新後の情報を表示するため再レンダリングしたい、といった場合の問題を解決します。

解決方法

StackOverflowでも同じようなことを質問している人がいました。

https://stackoverflow.com/questions/60362589/how-to-re-render-component-on-going-back-using-back-button-in-react-native

ここで紹介されていたのが、”useIsFocused”フックを使う方法。

私もこのuseIsFocusedを使った方法で解決できました！ちなみに、この方法は、React Navigationの公式Docで解説されています。

https://reactnavigation.org/docs/use-is-focused/

ただし、こちらのページにも書かれているのですが、useIsFocusedのフックはClassでは利用できず、Functionでのみ利用できる機能なので（この辺りの設計思想が自分にはまだ理解できていない・・・）、Classを利用している場合には、以下のようにwrapしてやる必要があります。

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

// Wrap and export
export default function(props) {
  const isFocused = useIsFocused();

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

上記の実装を加えることで、問題が解決できました！

おしまい

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。