콘텐츠로 이동

네이티브와 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 파일에 다음 설정을 추가하세요.

# 버전은 Guance RN SDK에서 설정
pod 'FTMobileSDK'

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

import FTMobileReactNativeSDK
import FTMobileSDK

let rumConfig = FTRumConfig(appId: rumAppId)
rumConfig.enableTraceUserResource = true
#if DEBUG
rumConfig.resourceUrlHandler = { (url: URL) -> Bool in
  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을 참고하세요.

문서 평가

이 페이지가 도움이 되었나요?