[React Native]SDKを導入する (Expo)

🚧

導入時の注意事項

新規でのReact Native環境への導入、もしくは既存環境をReact Native環境に移行する場合、担当から詳細をご案内しております。
適宜担当までご連絡をお願い致します。

Expoでの導入は、Managed WorkflowかBare Workflowかによって方法が異なります。

導入手順(Managed Workflow)

1. パッケージをインストールする

下記パッケージをインストールします。

npm install @react-native-karte/core
npm install @react-native-karte/notification
npm install @react-native-karte/in-app-messaging
npm install karte-expo-plugin
🚧

パッケージ導入に関する注意点

karte-expo-plugin では @react-native-karte/core @react-native-karte/in-app-messaging @react-native-karte/notification の導入が必須です。

2. React Native Firebase を導入する

npm install @react-native-firebase/app
npm install @react-native-firebase/messaging

導入に関しては、下記ドキュメントをご覧ください。

3. KARTE 設定ファイルをプロジェクトに追加する

iOS, Android それぞれの設定ファイルダウンロードします。

ダウンロード方法に関しては、下記ドキュメントをご覧ください。

ダウンロードしたファイルをプロジェクトのルートディレクトリに移動します。

4. app.json ファイルを編集する

app.json ファイルに、設定ファイルのパスを指定します。Firebaseプラグインの設定も追加します。

{
  "expo": {
    "plugins": [
      [
        "karte-expo-plugin",
        {
          "karteInfoPlist": "./Karte-Info.plist",
          "karteXml": "./karte.xml"
        }
    	],
      "@react-native-firebase/app",
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ]
  }
}

5. ネイティブコードを生成する

Expoのプラグインを追加した際はios/androidディレクトリを再生成する必要があるため以下のコマンドを実行します。

npx expo prebuild --clean

詳細については Expo のドキュメントをご覧ください。

🚧

実行環境について

ExpoプラグインはExpo Go環境では動作しません。 npx expo prebuild --clean コマンド実行後、プラットフォームに合わせて以下のコマンドを実行するかXcode/AndroidStudioからネイティブ環境で実行してください。

npx expo run:ios
npx expo run:android

導入手順(Bare Workflow)

1. パッケージをインストールする

下記パッケージをインストールします。

npm install @react-native-karte/core
npm install @react-native-karte/notification
npm install @react-native-karte/in-app-messaging

2. React Native Firebase を導入する

npm install @react-native-firebase/app
npm install @react-native-firebase/messaging

導入に関しては、下記ドキュメントをご覧ください。

3. KARTEのセットアップを行う

以下のドキュメントに従って、KARTEのセットアップを行なってください。