react-native-richflyer

This is plugin that use RichFlyer.

Installation

npm install react-native-richflyer

サンプルアプリ(example)の使い方

yarn のインストール

yarn をインストールされていない場合は以下のコマンドを実行します。(参照)

npm install --global yarn

ライブラリのインストール

プロジェクトのルート直下で以下のコマンドを実行し、ライブラリをインストールします。

yarn

Android

"app"直下の build.gradle に以下を追加する

  repositories {
    maven {
      url "https://infocity.github.io/richflyer-maven/"
    }
  }

apply plugin: 'com.google.gms.google-services'

"app/src/main"直下の AndroidManifest.xml の manifest タグの属性に下記を追記

xmlns:tools="http://schemas.android.com/tools"

"app/src/main"直下の AndroidManifest.xml の application タグの属性に下記を追記

tools:replace="android:allowBackup"

"app"直下に google-services.json を追加(参照)

プロジェクトルートの build.gradle に以下を追加

dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
}

res/ 通知用アイコンを設定する。ファイル名: rf_notification.png 配備する場所: src/main/res直下の各フォルダ mipmap-hdpi mipmap-mdpi mipmap-xhdpi mipmap-xxhdpi

iOS

Xcode のプロジェクト設定を行う(参考)

プロジェクトルートにある Podfile に以下を追加(参考)

target 'NotificationContent' do
inherit! :search_paths
end

target 'NotificationService' do
inherit! :search_paths
end

※以下は追加不要

pod 'ObjectiveRichFlyer', '1.4.6'

AppDelegate.h を編集

#import <RichFlyer/RichFlyer.h>

@interface AppDelegate : RCTAppDelegate<RFNotificationDelegate>

AppDelegate.m を編集

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // delegateの設定
  [RFApp setRFNotificationDelegate:self];
}

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

Extension の実装

Notification Service Extension(参考)
Notification Content Extension(参考)

React

ライブラリのインポート

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

メソッド呼び出し（初期化）で SDK 実行キーや GroupId などの初期値を設定

const richflyer = new RichFlyer();
const settings = {
  serviceKey: '11111111-aaaa-bbbb-cccc-222222222222',
  groupId: 'group.net.richflyer.app',
  sandbox: true,
  themeColor: '#468ACE',
  launchMode: [RFLaunchMode.Movie, RFLaunchMode.Gif],
};
richflyer
  .initialize(settings)
  .then((code: string) => {
    console.log(`code:${code}`);
  })
  .catch((err: any) => {
    console.log(`code:${err.code} message:${err.message}`);
  });

Metro

"example"直下で以下のコマンドを実行し Metro サーバーを起動

yarn start

サンプルアプリの起動

新しいターミナルを開き、"example"直下に移動

Android の起動

yarn android

iOS の起動

yarn ios

ローカルで自前のアプリに取り込む方法

RichFlyerDevelopment_ReactNative をクローンする
自前のアプリのプロジェクトのルートディレクトリで以下を実行 ※npm link は使えないらしい

npm install (RichFlyerDevelopment_ReactNativeのパス)