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

こんばんは。今日は、画面遷移時に再レンダリングさせる方法のメモです。

例えば、プロフィール等の更新画面で情報を更新したのち、前の画面に戻った時に更新後の情報を表示させたい、といった場合にどうにか強制的に再レンダリングさせる方法はないのか、と探していて見つけました。

それでは参ります。

実装

結論、これはreact-navigationのuseIsFocused Hookを使って実現できます。

import { useIsFocused } from '@react-navigation/native';

export const ProfileScreen = (props) => {
    useIsFocused();
    return (
        XXXXXXXXX
    );
}

ヒントはこのStack Overflowで得ることができました。

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

また、useIsFocusedの説明は、こちらの公式ドキュメントにあります。

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

ちなみに、この方法は関数コンポーネントでしか使えないのですが、Classベースの実装の場合でも実現する方法も併せて紹介されています。

https://reactnavigation.org/docs/use-is-focused/#using-with-class-component

ご参考になりましたら幸いです!

おしまい!

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

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

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

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

ABOUT US

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