作成:2021/02/07
更新:2021/10/23
rn4wSampleApp
のフォルダを開きます。.vscode/launch.json
を作成し以下のように書き換えてください。Launch UWP
を選んで実行すれば起動するのですが今回はそれではなくAttach
を選択して実行しておいてください。windows/rn4wSampleApp.sln
を Visual Studio で開きます。x86
かx64
を選び実行します。初回は結構時間がかかるので気長に待ちます。rn4wSampleApp
プロジェクトを右クリックし、「追加」->「新しい項目」と選択します。rn4wSampleApp
内にあるReactPackageProvider.cpp
に今作ったファイルを include させます。include の末尾に次の行を加えてください。
MouseHandler.h
を編集します。以下のように書き換えてください。実行してエラーが出なければ成功です。REACT_MODULE
でモジュールを指定します。そして指定した構造体の中にいろいろ書いていきます。REACT_METHOD
とREACT_EVENT
を使っていますが、REACT_METHOD
は関数を JS から実行できるものでREACT_EVENT
は JS 側で登録しで JS 側のイベントを発火させることができます。App.tsx
を次のように書き換えます。NativeModules.上のREACT_MODULEで指定した名前.REACT_METHODで指定した名前
の形でネイティブの関数を呼び出すことができます。そして NativeEventEmitter のインスタンスを作り addListener の第一引数にREACT_EVENTで指定した名前
を入れることでネイティブからのイベントを実行することができるようになります。Ctrl+Shift+D
を押して「Reload Javascript」を選択してください。Native Modules · React Native for Windows + macOS
microsoft.github.io
Windows UWP 名前空間 - Windows UWP applications
docs.microsoft.com
Building a React Native module for Windows
techcommunity.microsoft.com