React NativeでPush Notificationについて (iOS)

React NativeでPush Notificationを実現する方法について紹介します。まず、今回、利用したモジュールは、react-native-push-notificationというモジュールです。

まず、通常通り、次のようなコマンドでモジュールをプロジェクトに追加します。

2行目は、追加したモジュールの設定を各プラットフォーム(iOS / Android)のプロジェクトファイルに追加するためのコマンドになります。ただ、このモジュールは単にプロジェクトの設定を変更するだけでは利用できないため、このまま実行すると「Native module cannot be null」というエラーが発生すると思います。

そのため、手動で変更する方法について紹介します。基本的には、react nativeの公式サイトに書かれていることです。

1.React Native公式のPush Notification iOS用プロジェクトのインポート

まず、React Nativeプロジェクト・フォルダのiosフォルダ直下にあるxxx.xcodeprjファイルをクリックして、XCodeでプロジェクトを開きます。

次に、FinderでReact Nativeプロジェクト・フォルダ直下にあるnode_modules以下のreact-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeprojファイルをXCode上のプロジェクトのLibrariesディレクトリの直下にドラッグ&ドロップします。

2.インポートしたプロジェクトとReact Nativeのプロジェクトをつなぐ

次に、インポートしたプロジェクトとReact Nativeのプロジェクトを繋ぎます。具体的には、左側のペインでプロジェクトを選択し、プロジェクトの設定を開きます。そして、Build Phasesを選択し、”Link Binary with Libraries”へ、左側のペインにある先ほど追加したプロジェクトのProductsディレクトリ配下にあるlibRCTPushNotification.aファイルをドラッグ&ドロップします。

さらに、Build Settingsを選択し、Header Search Pathsに、”$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS”のパス(non-recursive)を追加する。

3.AppDelegate.mファイルを修正する

XCode上で、AppDelegate.mを次のように変更します。

まず、先頭に次の行を追加し、必要なヘッダファイルを読み込むようにします。

そして、@endより上の行に次の行を追加します。

以上で動作するようになります。

参考サイト

スポンサーリンク
スポンサーサイト
スポンサーサイト

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーサイト