Package Exports

react-native-richflyer
react-native-richflyer/lib/commonjs/index.js
react-native-richflyer/lib/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-richflyer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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のパス)