コンテンツにスキップ

初期化

SDKの初期化処理を行います。

モジュールのインポート

import { RFLaunchMode, RichFlyer } from 'react-native-richflyer';


初期化の実行

// RichFlyerクラス
RichFlyer.initialize(settings: RFSettings): Promise<any>
パラメータ 内容
settings 設定値を保持したRFSettingsオブジェクト

(iOS)通知許可ダイアログの表示

initializeメソッドを呼ぶと、プッシュ通知受信の許可確認ダイアログが表示されます。


RFSettings

プッシュ通知に関する設定を保持します。iOSまたはAndroidのみで有効な設定も含みます。

export type RFSettings = {
  serviceKey: string;
  launchMode: string[];
  groupId: string;
  sandbox: boolean;
  prompt: RFPrompt;
  themeColor: string;
};
プロパティ OS 内容
serviceKey 共通 管理サイトで発行されたSDK実行キー
SDK実行キーの取得方法
launchMode 共通 起動時通知を有効にする通知の種類(詳細)
groupId iOS AppGroupsのGroup ID
sandbox iOS プッシュ通知を開発・検証環境で実施するか(true / false)
prompt iOS OSが表示するプッシュ通知の許可ダイアログの表示前に、プロモーション表示をする場合、その情報を格納するオブジェクト
themeColor Android プッシュ通知詳細ダイアログの枠線およびカスタムアクションボタンの色(#RGBで指定)


起動時通知の設定

起動時通知の設定

通知受信後に通知を開封せずにアプリを起動した際に、直前に受信した通知を表示することができます。(起動時通知)
通知のタイプ(テキストのみ、静止画添付、GIF添付、動画添付)によって有効、無効を設定できます。
デフォルトでは、動画またはGIFが添付された通知で起動時通知が有効になっています。
無効にする場合は、空の配列を指定します。

  export const RFLaunchMode = {
    Text: 'Text',
    Image: 'Image',
    Gif: 'Gif',
    Movie: 'Movie',
  };

プッシュ通知受信許可を促すダイアログ

プッシュ通知受信許可ダイアログ

iOSでは、プッシュ通知の受信許可をユーザーに確認するダイアログがOSによって表示されます。
RichFlyerでは、このダイアログが表示される前に受信の許可をユーザーに促すためのダイアログを表示できます。
詳細な設定方法はこちらを参照してください。

  export type RFPrompt = {
    title: string; //ダイアログに表示するタイトル
    message: string; //メッセージ
    image: string;  //Xcodeに追加した画像の名前
  };

実装例

初期化
const richflyer = new RichFlyer();

// RFSettings
const settings = {
  serviceKey: '11111111-aaaa-bbbb-cccc-222222222222',
  launchMode: [RFLaunchMode.Movie, RFLaunchMode.Gif],
  groupId: 'group.net.richflyer.app',
  sandbox: true,
  themeColor: '#468ACE',
  prompt: {
    title: 'お得な情報をお知らせ',
    message: 'プッシュ通知を許可するとお得な情報が届きます!',
    image: 'pushImage',
  },
};
// 初期化
richflyer
  .initialize(settings)
  .then((code: string) => {
    console.log(`code:${code}`);
  })
  .catch((err: any) => {
    console.log(`code:${err.code} message:${err.message}`);
  });

iOSの実装

iOSプロジェクト(.xcworkspace)を起動して処理を加えます。
参考: RichFlyer SDK for iOSご利用ガイド

(編集するファイル)

  • AppDelegate.h
  • AppDelegate.m
AppDelegate.h
#import <RichFlyer/RichFlyer.h>
// <RFNotificationDelegate>を追加する。
@interface AppDelegate : RCTAppDelegate<RFNotificationDelegate>

@end
AppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"RichflyerExample";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  [RFApp setRFNotificationDelegate:self];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
  [RFApp registDevice:deviceToken completion:^(RFResult * _Nonnull result) {
    NSLog(@"register device result:%@", result.result?@"success": @"failed");
  }];
}