- 平台介绍
- 接入指引
- 版本信息
- 使用流程
- 功能手册
- 操作视频
- 技术文档
- 基础知识
- 客户端SDK
- 服务端SDK
- 数据导入
- API功能
- SQL手册
- DML
- SQL函数
- 日期函数
- convert_tz
- curdate,current_date
- current_timestamp
- curtime,current_time
- date_add
- date_format
- date_sub
- datediff
- day
- dayname
- dayofmonth
- dayofweek
- dayofyear
- from_days
- from_unixtime
- hour
- makedate
- minute
- month
- monthname
- now
- second
- str_to_date
- time_round
- timediff
- timestampadd
- timestampdiff
- to_date
- to_days
- unix_timestamp
- utc_timestamp
- week
- weekday
- weekofyear
- year
- yearweek
- localtime,localtimestamp
- quarter
- last_day
- extract
- date_trunc
- minutes_add
- minutes_diff
- minutes_sub
- seconds_add
- seconds_diff
- seconds_sub
- hours_add
- hours_diff
- hours_sub
- days_add
- days_diff
- days_sub
- weeks_add
- weeks_diff
- weeks_sub
- months_add
- months_diff
- months_sub
- years_add
- years_diff
- years_sub
- 字符串函数
- append_trailing_char_if_absent
- to_base64
- from_base64
- ascii
- length
- bit_length
- char_length
- lpad
- rpad
- lower
- lcase
- upper
- ucase
- initcap
- repeat
- reverse
- char
- concat
- concat_ws
- substr
- substring
- sub_replace
- ends_with
- starts_with
- trim
- ltrim
- rtrim
- null_or_empty
- not_null_or_empty
- hex
- unhex
- elt
- instr
- locate
- find_in_set
- replace
- left
- right
- strleft
- strright
- split_part
- split_by_string
- substring_index
- money_format
- parse_url
- convert_to
- extract_url_parameter
- uuid
- space
- sleep
- 日期函数
- 数据类型
- 数据管理
- 常见问题
- 合规说明
- 资源下载
- AB测试
SDK配置
帮助中心 > 技术文档 > 客户端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 端
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 端
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 |
最后编辑:王建华 更新时间:2024-09-05 21:06