【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} />;
}

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

おしまい

この記事を気に入っていただけたらシェアをお願いします!

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。