首页 > 用户手册 > 开发者文档 > 集成React NativeSDK
集成React Native SDK
1. 集成SDK的准备工作
1.1 获取AppKey
集成GeekDataSDK之前，您首先需要到GeekData官网(https://www.geekdata.com)注册并且添加新应用，获得Appkey
2.集成React Native （以下简称RN）步骤
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文件，注册GdPackage ,并初始化SDK
package com.gdrndemo;
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 <GeekDataSDK>
import com.geekdata.analysis.GdAgent;
import com.geekdata.analysis.GdPackage;
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 <GeekDataSDK> 加入GdPackage
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new GdPackage()
);
}
@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 <GeekDataSDK> 初始化
GdAgent.setDebugEnabled(true);//正式发版时请关闭debug模式
GdAgent.init(this);
}
}
c. 根据注释//TODO
2.2.2 iOS 配置步骤
a. 根据ios sdk 文档完成初步集成
b. 下载ios rn需要的文件 点击下载
c. 将GdModule.h和GdModule.m 导入
d. 根据注释//TODO
2.3 检测RN sdk 是否集成成功
2.3.1 Android 检测方法：
a. 开启调试模式 GdAgent.setDebugEnabled(true); //正式发版时请关闭debug模式
b. 在RN项目下执行 react-native run-android
c. 查看log
05-15 10:35:53.227 32127-32127/com.gdrndemo I/GdLog: GdAgent : debug模块 启动成功！
05-15 10:35:53.283 32127-32127/com.gdrndemo I/GdLog: GdAgent : agent模块 启动成功！
05-15 10:35:53.286 32127-32127/com.gdrndemo I/GdLog: GdAgent : crash模块 启动成功！
05-15 10:35:53.287 32127-32127/com.gdrndemo I/GdLog: GdAgent : sdk 初始化完成！
05-15 10:35:53.794 32127-32146/com.gdrndemo I/GdLog: GdAgent : get config接口 信息成功！
2.3.2 iOS 检测方法：
a. 开启调试模式 [[GdAgent shareAgent] setIsLogEnabled:(true)]; //正式发版时请关闭debug模式
b. 在RN项目下执行 react-native run-ios
c. 查看log
2019-06-10 09:43:37.542182+0800 GdAgent[2648:146909] GdLog : debug模块 启动成功！
2019-06-10 09:43:37.547010+0800 GdAgent[2648:146909] GdLog : agent模块 启动成功！
2019-06-10 09:43:37.547450+0800 GdAgent[2648:146909] GdLog : crash模块 启动成功！
2019-06-10 09:43:38.297567+0800 GdAgent[2648:146909] GdLog : sdk 初始化完成！
2019-06-10 09:43:38.463103+0800 GdAgent[2648:146909] GdLog : get config接口 信息成功！
3.添加统计代码
android 和 iOS sdk 集成成功后，在js代码中统一调用以下统计代码即可，不需要分平台单独调用！
集成SDK成功后需要加入相应的统计代码来将数据发送到后台，系统会根据前端采集的数据来展示数据报表。
3.1添加自定义事件接口：
在需要统计事件的位置调用以下代码：
NativeModules.GdModule.postEvent("自定义事件类型",'{"d_name":"事件参数","m_id":"1","ea_jihua":"事件属性"}');
3.2添加自定义属性接口：
在需要定义属性的位置调用以下代码：
NativeModules.GdModule.setAttribute(
'{
"自定义属性key1":"自定义属性value1",
"自定义属性key2":"自定义属性value2",
"自定义属性key3":"自定义属性value3"
}'
);
根据json类型格式可以一次性传递多组属性。
自定义属性信息 请参考
3.3添加绑定用户信息接口：
在需要登陆入口或者其他需要绑定用户信息的地方调用以下代码：
NativeModules.GdModule.bindUserInfo(
'{
"userId":"RN123456",
"userRegisterChannel":"geekdata",
"userSex":"男",
"userAge":"25",
"userType":"管理",
"userLevel":"5级",
"userProvince":"天津",
"userCity":"东丽区"
}'
);
4.注意事项
4.1 调用GdModule的相关统计接口之前需要先导入NativeModules ，具体的集成和接口调用方法可以参看Demo
import { NativeModules } from 'react-native';
4.2 统计方法的参数为json格式
4.3 ios 集成需要在工程项目中添加 "libresolv.tbd"库文件
5.技术支持
- 查看集成Demo
- 遇到问题可联系我公司客服或技术人员进行解答。