SDKを導入する (Expo)
Expoプラグインは Beta 版として提供中です
Expoプラグインは現在 Beta 版として提供しております。
そのため、今後予告なく仕様変更を伴う機能改善やAPIの破壊的変更が行われる可能性があります。またexpoではビジュアルトラッキング、設定値配信については動作未検証です。
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 設定ファイルをプロジェクトに追加する
iOS, Android それぞれの設定ファイルダウンロードします。
ダウンロード方法に関しては、下記ドキュメントをご覧ください。
ダウンロードしたファイルをiOSおよびAndroidのルートディレクトリに配置します。
4. Karteのセットアップを行う
現在ExpoをBare Workflowでセットアップする場合、 Module Import(@import KarteCore;)をAppDelegate.mmで行うと
Expoでビルドエラーが発生するという事象が確認されているため、以下の1または2、いずれかワークアラウンドを推奨しております。
※2024.10.22時点、expo:0.51系で確認
1.AppDelegate.mmの拡張子を.mに変更する
XCodeでAppDelegate.mmの拡張子を.mに変更するパターンです。
AppDelegate.mmをXCode上でAppDelegate.mとRenameした上で、
AppDelegate.mを https://developers.karte.io/docs/setup-react-native-sdk-v2#step3-sdk%E3%81%AE%E5%88%9D%E6%9C%9F%E5%8C%96%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B
にそってセットアップします。
2.KarteHelperというobjective-cのクラスを作成する
iOSのプロジェクトファイルに、KarteHelperというObjective-cのクラスを作成した上で、
ヘッダーファイルをAppDelegate.mmでimportします。
// KarteHelper.h
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface KarteHelper : NSObject
+ (void)setup;
+ (BOOL) openUrl:(UIApplication *)app openURL:(NSURL *)url;
@end
NS_ASSUME_NONNULL_END
// KarteHelper.m
#import "KarteHelper.h"
@import KarteCore;
@implementation KarteHelper
+ (void)setup
{
[KRTApp setupWithConfiguration:[KRTConfiguration default]];
}
+ (BOOL)openUrl:(UIApplication *)app openURL:(NSURL *)url
{
return [KRTApp application:app openURL:url];
}
@end
// AppDelegate.mm
#import "KarteHelper.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[KarteHelper setup];
...
}
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
return [KarteHelper openUrl:app openURL:url];
}
Updated 6 months ago