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

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

ABOUT US

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