【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に不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。