ネイティブと React Native のハイブリッド開発¶
プロジェクトがネイティブ開発であり、一部のページやビジネスフローで React Native を利用している場合、SDK のインストールと初期化設定は以下の方法を参考にしてください。
インストール¶
RN SDK のインストールが完了したら、ネイティブ側で改めて Android または iOS SDK を個別にインストールする必要はありません。すでにインストール済みの場合は、バージョン競合を防ぐため、以下の方法で対応することを推奨します。
Android¶
android/app/build.gradle ファイルに、以下の依存関係を追加します。
// バージョンは Guance RN SDK により設定されます
implementation 'com.cloudcare.ft.mobile.sdk.tracker.agent:ft-sdk'
implementation 'com.cloudcare.ft.mobile.sdk.tracker.agent:ft-native'
また、node_modules/@cloudcare/react-native-mobile/android/build.gradle から対応するネイティブ SDK のバージョン情報を確認することもできます。
iOS¶
iOS 環境では、React Native は cocoapods で依存ライブラリを管理します。iOS SDK のインストールも同様に cocoapods を使用し、ios/Podfile ファイルに以下の設定を追加します。
また、node_modules/@cloudcare/react-native-mobile/FTMobileReactNativeSDK.podspec から対応するネイティブ SDK のバージョン情報を確認することもできます。
初期化¶
iOS SDK 初期化設定 と Android SDK 初期化設定 を参照し、ネイティブプロジェクト内で初期化設定を行ってください。
React Native 側の設定¶
RN SDK 0.3.11 以降で対応
React Native 側では再度初期化する必要はありません。React Native Error と React Native Action を自動収集する場合は、以下の方法を使用します。
import { FTRumActionTracking, FTRumErrorTracking } from '@cloudcare/react-native-mobile';
FTRumActionTracking.startTracking();
FTRumErrorTracking.startTracking();
ネイティブプロジェクトの設定¶
RN SDK 0.3.11 以降で対応
RUM Resource の自動収集を有効にする場合、開発環境でのみ発生する React Native のシンボル化呼び出しリクエストと Expo ログ呼び出しリクエストをフィルタリングする必要があります。
iOS¶
#import <FTMobileReactNativeSDK/FTReactNativeUtils.h>
#import <FTMobileSDK/FTMobileAgent.h>
FTRumConfig *rumConfig = [[FTRumConfig alloc]initWithAppid:rumAppId];
rumConfig.enableTraceUserResource = YES;
#if DEBUG
rumConfig.resourceUrlHandler = ^BOOL(NSURL * _Nonnull url) {
return [FTReactNativeUtils filterBlackResource:url];
};
#endif
Android¶
import com.ft.sdk.reactnative.utils.ReactNativeUtils;
import com.ft.sdk.FTRUMConfig;
FTRUMConfig rumConfig = new FTRUMConfig().setRumAppId(rumAppId);
rumConfig.setEnableTraceUserResource(true);
if (BuildConfig.DEBUG) {
rumConfig.setResourceUrlHandler(new FTInTakeUrlHandler() {
@Override
public boolean isInTakeUrl(String url) {
return ReactNativeUtils.isReactNativeDevUrl(url);
}
});
}
import com.ft.sdk.reactnative.utils.ReactNativeUtils
import com.ft.sdk.FTRUMConfig
val rumConfig = FTRUMConfig().setRumAppId(rumAppId)
rumConfig.isEnableTraceUserResource = true
if (BuildConfig.DEBUG) {
rumConfig.setResourceUrlHandler { url ->
return@setResourceUrlHandler ReactNativeUtils.isReactNativeDevUrl(url)
}
}
具体的な使用例は example を参照してください。