【React Native開発】Functionでしか使えない機能をClassでも使えるようにする方法（力技）

こんにちは。今日は、タイトルの件について、対処法をメモに残しておこうと思います。

背景

もともと、React Nativeで、各コンポーネントをクラスベースで開発していたのですが、そんな時、ある機能がFunctionでしか使えず、Classベースだと使えないことが判明。

useIsFocusedというモジュールだったかな？

こいつを今のコンポーネントの作りを大きく変えずになんとか使えないか、と探した結果、以下の解決法に辿り着きました！

最近のアップデートで、全て関数ベースで作り直したので、もはや必要のない仕組みになりましたが、記念にこの記事に実装を残しておこうと思います。

実装

以下のように、ClassコンポーネントをFunctionから呼び出す形にして、functionの方をExportすることで解決。

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

class Profile extends Component {
    constructor(props){
        super(props)
    }

    render() {
        const { isFocused } = this.props;
        return (
           //処理
        )
    }
};

export default function(props) {
    const isFocused = useIsFocused();
    return <Profile {...props} isFocused={isFocused} />;
}

このコンポーネントを呼び出す際には、import Profile from ‘パス’でOK。

この方法が、どなたかの参考になりましたら幸いです・・・！（いいねをいただけると励みになります！）

おしまい

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

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

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

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