首页 > 用户手册 > 开发者文档 > 集成React NativeSDK

集成React Native SDK

1. 集成SDK的准备工作

1.1 获取AppKey

集成数极客SDK之前,您首先需要到数极客官网(https://www.shujike.com)注册并且添加新应用,获得Appkey

2.集成React Native (以下简称RN)步骤

集成Demo

2.1 需要先分别集成Android 和 iOS的SDK

RN 项目结构下的 android 和 ios 两个目录分别对应的就是两个平台的应用结构,通过集成文档可初步集成。

集成 Android SDK 请参考
集成 iOS SDK 请参考

2.2 添加RN的配置

根据文档集成完Android&iOS sdk 之后,需要对不同平台进行RN的配置工作!

2.2.1 Android 配置步骤

a. 根据Android sdk 文档完成初步集成
b. 在Android 目录下找到 MainApplication.java文件,注册SjkPackage ,并初始化SDK

    package com.sjkrndemo;

    import android.app.Application;

    import com.facebook.react.ReactApplication;
    import com.facebook.react.ReactNativeHost;
    import com.facebook.react.ReactPackage;
    import com.facebook.react.shell.MainReactPackage;
    import com.facebook.soloader.SoLoader;
    //TODO <数极客SDK>
    import com.shujike.analysis.SjkAgent;
    import com.shujike.analysis.SjkPackage;

    import java.util.Arrays;
    import java.util.List;

    public class MainApplication extends Application implements ReactApplication {
        private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
            @Override
            public boolean getUseDeveloperSupport() {
                return BuildConfig.DEBUG;
            }
            //TODO <数极客SDK> 加入SjkPackage
            @Override
            protected List<ReactPackage> getPackages() {
                return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                        new SjkPackage()
                );
            }

            @Override
            protected String getJSMainModuleName() {
                return "index";
            }
        };

        @Override
        public ReactNativeHost getReactNativeHost() {
            return mReactNativeHost;
        }

        @Override
        public void onCreate() {
            super.onCreate();
            SoLoader.init(this, /* native exopackage */ false);
            //TODO <数极客SDK> 初始化
            SjkAgent.setDebugEnabled(true);//正式发版时请关闭debug模式
            SjkAgent.init(this);
        }
    }

c. 根据注释//TODO <数极客SDK> 添加好相关代码,此时android rn sdk集成完毕。

2.2.2 iOS 配置步骤

a. 根据ios sdk 文档完成初步集成
b. 下载ios rn需要的文件 点击下载
c. 将SjkModule.h和SjkModule.m 导入
d. 根据注释//TODO <数极客SDK> 添加好相关代码,此时ios rn sdk集成完毕。

2.3 检测RN sdk 是否集成成功

2.3.1 Android 检测方法:

a. 开启调试模式 SjkAgent.setDebugEnabled(true); //正式发版时请关闭debug模式
b. 在RN项目下执行 react-native run-android
c. 查看log

    05-15 10:35:53.227 32127-32127/com.sjkrndemo I/SjkLog: SjkAgent : debug模块 启动成功!
    05-15 10:35:53.283 32127-32127/com.sjkrndemo I/SjkLog: SjkAgent : agent模块 启动成功!
    05-15 10:35:53.286 32127-32127/com.sjkrndemo I/SjkLog: SjkAgent : crash模块 启动成功!
    05-15 10:35:53.287 32127-32127/com.sjkrndemo I/SjkLog: SjkAgent : sdk 初始化完成!
    05-15 10:35:53.794 32127-32146/com.sjkrndemo I/SjkLog: SjkAgent : get config接口 信息成功!
2.3.2 iOS 检测方法:

a. 开启调试模式 [[SjkAgent shareAgent] setIsLogEnabled:(true)]; //正式发版时请关闭debug模式
b. 在RN项目下执行 react-native run-ios
c. 查看log

2019-06-10 09:43:37.542182+0800 SjkAgent[2648:146909] SjkLog : debug模块 启动成功!
2019-06-10 09:43:37.547010+0800 SjkAgent[2648:146909] SjkLog : agent模块 启动成功!
2019-06-10 09:43:37.547450+0800 SjkAgent[2648:146909] SjkLog : crash模块 启动成功!
2019-06-10 09:43:38.297567+0800 SjkAgent[2648:146909] SjkLog : sdk 初始化完成!
2019-06-10 09:43:38.463103+0800 SjkAgent[2648:146909] SjkLog : get config接口 信息成功!

3.添加统计代码

android 和 iOS sdk 集成成功后,在js代码中统一调用以下统计代码即可,不需要分平台单独调用!
集成SDK成功后需要加入相应的统计代码来将数据发送到后台,系统会根据前端采集的数据来展示数据报表。

3.1添加自定义事件接口:

在需要统计事件的位置调用以下代码:

    NativeModules.SjkModule.postEvent("自定义事件类型",'{"d_name":"事件参数","m_id":"1","ea_jihua":"事件属性"}');

自定义事件信息 请参考

3.2添加自定义属性接口:

在需要定义属性的位置调用以下代码:

    NativeModules.SjkModule.setAttribute(
    '{
    "自定义属性key1":"自定义属性value1",
    "自定义属性key2":"自定义属性value2",
    "自定义属性key3":"自定义属性value3"
    }'
    );

根据json类型格式可以一次性传递多组属性。
自定义属性信息 请参考

3.3添加绑定用户信息接口:

在需要登陆入口或者其他需要绑定用户信息的地方调用以下代码:

    NativeModules.SjkModule.bindUserInfo(
    '{
        "userId":"RN123456",
        "userRegisterChannel":"shujike",
        "userSex":"男",
        "userAge":"25",
        "userType":"管理",
        "userLevel":"5级",
        "userProvince":"天津",
        "userCity":"东丽区"
    }'
    );

4.注意事项

4.1 调用SjkModule的相关统计接口之前需要先导入NativeModules ,具体的集成和接口调用方法可以参看Demo

    import { NativeModules } from 'react-native';  

4.2 统计方法的参数为json格式
4.3 ios 集成需要在工程项目中添加 "libresolv.tbd"库文件

5.技术支持

  1. 查看集成Demo
  2. 遇到问题可联系我公司客服或技术人员进行解答。

results matching ""

    No results matching ""