帮助中心 > 技术文档 > 客户端SDK > 跨平台框架 > React Native > SDK配置

React Native接入流程主要分为两个步骤(两个文档)

1、SDK配置:将对应的SDK集成到您的产品项目中,然后进行初始化代码处理;
2、SDK接入:将需要埋点的数据,按照SDK包装不同的方法进行数据上送,其中功能主要包含两大类:全埋点(自动采集数据上送)、自定义埋点(手动设置业务数据上送)。


1. 集成RN模块

1.1 安装 RN 模块

对于 React Native 开发的应用,可以使用 npm 或 yarn 方式,集成RN模块。

(1)通过github

npm install --save https://github.com/hinadt/hina-react-native-lib.git

(2)通过npm

npm install hina-react-native-lib

或者

yarn add hina-react-native-lib

注意:React Native 0.60 及以上版本会 autolinking,不需要执行下边的 react-native link 命令。

react-native link hina-react-native-lib

1.2 执行命令

在项目路径下执行 node 命令

node node_modules/hina-react-native-lib/HinaDataRNHook.js -run

注:如果需要恢复原始代码,可执行 reset 命令

node node_modules/hina-react-native-lib/HinaDataRNHook.js -reset

2. 集成原生SDK

2.1 Android 端

Android SDK集成文档

2.1.1 手动注册Package类

如果需要把 React Native 组件集成到 Android 应用中,需要在加载 ReactRootView 的 Activity 中添加 RNHinaReactNativeLibPackage 并实现相关回调。

public class RNPageActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    public static ReactInstanceManager mReactInstanceManager;
    private final static String TAG = "RNPageActivity";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setCurrentActivity(this)
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .addPackage(new RNHinaReactNativeLibPackage())//添加RNHinaReactNativeLibPackage类
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        // 这个"MyApp"名字一定要和我们在index.js中注册的名字保持一致AppRegistry.registerComponent()
        mReactRootView.startReactApplication(mReactInstanceManager, "MyApp", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @Override
    protected void onResume() {
        super.onResume();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
            Log.d(TAG, "onResume");
        }
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
            Log.d(TAG, "onPause");
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
            Log.d(TAG, "onBackPressed");
        } else {
            super.onBackPressed();
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy(this);
            Log.d(TAG, "onDestroy");
        }
        if (mReactRootView != null) {
            mReactRootView.unmountReactApplication();
        }
    }

    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (BuildConfig.DEBUG) {
            if (keyCode == KeyEvent.KEYCODE_MENU) {//Ctrl + M 打开RN开发者菜单
                mReactInstanceManager.showDevOptionsDialog();
                return true;
            }
        }
        return super.onKeyUp(keyCode, event);
    }
}

注意:
需要在 onResume()、onPause()、onDestroy() 回调方法中实现 mReactInstanceManager.onHostResume(this, this)、mReactInstanceManager.onHostPause(this)、mReactInstanceManager.onHostDestroy(this) 方法,否则可能出现点击事件全埋点无法触发情况。

2.2 iOS 端

iOS SDK配置

2.2.1 在项目目录下执行:

cd ios && pod install && cd ..

注意:
如果pod集成出现问题,也可以参考原生手动集成方式。

2.2.2 在iOS原生端集成SDK

在 AppDelegate 的 -application:didFinishLaunchingWithOptions: 中添加初始化代码:

  // 初始化配置
  HNBuildOptions *options = [[HNBuildOptions alloc] initWithServerURL:@"#<数据接收地址>" launchOptions:launchOptions];
  // 开启全埋点,可根据需求进行组合
  options.autoTrackEventType = HNAutoTrackAppStart |
  HNAutoTrackAppEnd |
  HNAutoTrackAppClick |
  HNAutoTrackAppScreen;
#ifdef DEBUG
  // SDK 开启 Log
  options.enableLog = YES;
#endif
  /**
   * 其他配置
   */
  // 初始化 SDK
  [HinaCloudSDK startWithConfigOptions:options];

3. SDK初始化

3.1 导入模块

import hinaCloud from 'hina-react-native-lib'

3.2 初始化SDK

说明:使用init方法,按如下方式进行初始化。

var param = {
  serverUrl:"数据接收地址",
  enableLog:true//日志打开,默认关闭
};

hinaCloud.init(param)

初始化可选参数

参数key(String类型) 参数value类型 参数说明
serverUrl String 【必填】配置采集上报地址URL(在线获取
flushInterval int 【可选】上报时间间隔(毫秒)
flushPendSize int 【可选】自定义上报缓存条数
enableLog bool 【可选】开启日志
maxCacheSizeForAndroid long 【可选】自定义缓存上限(Android用)
maxCacheSizeForIOS int 【可选】自定义缓存上限(iOS用)
autoTrackTypePolicy int 【可选】开启全埋点
networkTypePolicy int 【可选】自定义上报网络条件
enableJSBridge bool 【可选】App打通H5
作者:邓昊  创建时间:2023-04-01 17:12
最后编辑:王建华  更新时间:2024-10-31 14:08