コンテンツにスキップ

サンプルプロジェクト

サンプルプロジェクトを公開しています。

BundleIDやパッケージネームについて

サンプルプロジェクトをご利用の際は、BundleIDやパッケージネームを開発環境に合わせて変更してご利用ください。

ご利用手順

  1. RichFlyerサービスの利用登録を行い、SDK実行キーを発行する。
    SDK実行キーの取得方法

  2. サンプルプロジェクトを取得する。

    リポジトリ全体ではなく example フォルダだけを使ってください

    公開リポジトリはyarnワークスペース構成になっており、リポジトリ全体でyarn installを実行するとreact-native-richflyerが正しく解決できない場合があります。exampleフォルダだけを自分のプロジェクトとして切り出してご利用ください。

    git clone https://github.com/INFOCITY/richflyer-sdk-react-native.git
    cp -r richflyer-sdk-react-native/example ~/MyRichFlyerApp
    cd ~/MyRichFlyerApp
    
  3. 依存関係をインストールする。

    npm install
    
  4. SDK実行キーなどの初期値を初期化処理で設定する。
    初期値の設定

  5. 各OS向けの設定を行う

    (Android)
    1. パッケージ名を開発環境に合わせて変更する。

    2. Firebaseコンソールにてアプリの登録、サーバーキーの取得、google-services.jsonファイルの取得を行う。
      手順例はこちら

    3. 取得したgoogle-services.jsonをexample/android/app直下に配置する。
      設定例

    (iOS)
    1. iosディレクトリでCocoaPodsをインストールする(初回のみ)。

      cd ios
      bundle install
      RCT_NEW_ARCH_ENABLED=1 pod install
      cd ..
      
    2. RichFlyerApp.xcworkspaceを起動して、開発環境に合わせてBundleIdやApp Groupsの設定を行う。
      設定方法

    3. Podfileの編集を行い、プロジェクトに反映させる。
      編集方法

    pod update実行時のエラー

    pod updateを実行したときに次のエラーが発生したときは、Podfileの下記の箇所を削除してお試しください。
    (エラーの内容)
    Unable to find a target named `RichFlyerAppTests` in project `RichFlyerApp.xcodeproj`

    (削除する箇所)

    target 'RichFlyerAppTests' do
        inherit! :complete
        # Pods for testing
    end        
    

  6. Metroサーバーを起動する。

    npx react-native start
    
    (別のターミナルで起動したままにしておく)

  7. ビルドする。

    # Android(実機・エミュレータ接続時)
    npx react-native run-android
    
    # iOS(シミュレータ)
    npx react-native run-ios
    
    iOS実機の場合は、RichFlyerApp.xcworkspaceをXcodeで開き、実機を選択してビルド・実行してください。

New Architecture(Fabric/TurboModules) / Old Architectureの切り替えについて

本SDKはNew ArchitectureとOld Architectureの両方に対応しており、ソースコードを変更することなく、ビルド時の設定だけでどちらでも動作します。

(Android)

android/gradle.propertiesnewArchEnabledを切り替えてください。

newArchEnabled=true   # New Architecture
newArchEnabled=false  # Old Architecture
(iOS)

iosディレクトリで実行するpod installのコマンドを切り替えてください。

# Old Architecture
pod install

# New Architecture
RCT_NEW_ARCH_ENABLED=1 pod install

RCT_NEW_ARCH_ENABLEDpod install実行時だけ一時的に設定される環境変数で、PodfileがこれをもとにFabric関連のPod(React-RCTFabricなど)を組み込むかどうかを切り替えています。一度New Architecture向けにpod installした後にOld Architectureへ戻す場合も、必ず環境変数を付けずにpod installを実行し直し、Podfile.lockを更新してください。

AndroidとiOSは揃えてください

Android/iOSで異なるアーキテクチャの組み合わせでも動作はしますが、意図しない不具合の原因になりやすいため、通常は両OSで同じアーキテクチャに揃えてビルドしてください。

切り替え後にビルドエラーが出る場合

Xcodeのビルドキャッシュ(DerivedData)が古い設定を保持したままになっていることがあります。Product → Clean Build Folder を実行するか、DerivedDataフォルダを削除してから再ビルドしてください。


RichFlyer管理サイトで必要な設定を行えば通知が配信できるようになります。
管理サイトご利用ガイドはこちら