跳转至

原生与 React Native 混合开发

如果您的项目是原生开发，部分页面或业务流程使用 React Native 实现，SDK 的安装与初始化配置可参考以下方案。

安装

RN SDK 安装 成功后，原生侧无需再单独安装 Android 或 iOS SDK。若已安装，为防止版本冲突，建议使用以下方式处理。

Android

在 android/app/build.gradle 文件中添加如下依赖项设置：

// 版本由 观测云 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 文件中添加如下设置：

# 版本由 观测云 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。

文档评价

文档内容是否对您有帮助？ ×