教你轻松在React Native中集成统计(umeng)的功能(最新版)
作者:互联网
关于在react-native中快速集成umeng统计,网上的文章或者教程基本来自----贾鹏辉老师的文章http://www.devio.org/2017/09/03/React-Native-Integrated-analysis-function/或者是umeng的官方文档
可能是因为react-native版本问题(这里我使用的react-native为0.58),又或者是因为我装的android-studio版本比较新,总之搞了半天,虽然集成上去了,但是只能称之为简陋版吧,因为自定义事件等,无法使用
后来放了一天后,又拿来看,最终集成好了(事实证明,当你卡在一个地方时间很久的时候,不防放下,去干别的事情,等你空闲的时候再回来看,你也许就会找到方案)
好了下面是我的完整集成过程
第一步,在android/app/build.gradle中添加如下代码(这里使用的基础组件为2.0.0和统计组件8.0.0,如果低于这个版本,会略有不同,这里不做解释)
dependencies { ........ implementation 'com.umeng.umsdk:common:2.0.0' //基础组件 implementation 'com.umeng.umsdk:utdid:1.1.5.3' implementation 'com.umeng.umsdk:analytics:8.0.0' //统计 implementation 'com.umeng.umsdk:push:5.0.2' //推送 ........ }
第二步,在android/app/src/main/AndroidManifest.xml中添加权限
<manifest……> <uses-sdk android:minSdkVersion="8"></uses-sdk> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.READ_PHONE_STATE"/> <application ……> …… <activity ……/> <meta-data android:value="YOUR_APP_KEY" android:name="你的APPKEY"/> <meta-data android:value="Channel ID" android:name="UMENG_CHANNEL"/> </application> </manifest>
第三步,在android/app/src/main/java/com/你的项目名/MainActivity.java中添加以下代码
//引入资源包 import com.umeng.analytics.MobclickAgent; import com.umeng.commonsdk.UMConfigure; //重写onCreate方法 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 注意:如果您已经在AndroidManifest.xml中配置过appkey和channel值,可以调用此版本初始化函数。 UMConfigure.init(this, "你的appkay", "Umeng", UMConfigure.DEVICE_TYPE_PHONE, null); // interval: 单位是毫秒,默认Session间隔时间是30秒 MobclickAgent.setSessionContinueMillis(30000); MobclickAgent.setPageCollectionMode(MobclickAgent.PageMode.LEGACY_MANUAL); UMConfigure.setProcessEvent(true); } //增加以下代码 public void onResume() { super.onResume(); MobclickAgent.onResume(this); } public void onPause() { super.onPause(); MobclickAgent.onPause(this); }
第四步,下载umeng提供modules
下载一下三个文件:下载地址(https://github.com/umeng/React_Native_Compent/tree/master/android/app/src/main/java/com/umeng/soexample/invokenative) AnalyticsModule.java //统计包 DplusReactPackage.java // 桥接文件 RNUMConfigure.java //相关配置
其他文件说明(这里暂时不下载)
PushModule.java //消息推送
ShareModule.java //第三方分享
第五步,导入资源包
1.在android/app/src/main/java/com/你的项目名,新建目录invokenative 2.将之前下载的三个文件放入该目录下
第六步,修改之前下载的文件的package路径,将其修改为你的工程路径。这里以我的路径为例
原本的package路径 package com.umeng.soexample.invokenative; 修改后的package路径 package com.github_rn.invokenative; (AnalyticsModule.java、DplusReactPackage.java,RNUMConfigure.java)三个文件全部要依次修改(代码位于文件的最顶端)
第七步,在android/app/src/main/java/com/你的项目名/MainApplication.java中添加以下代码
//导入我们第五六步修改好的资源包 import com.github_rn.invokenative.DplusReactPackage; @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new DplusReactPackage() // 实例化一下 ); }
第八步,导出react-native原生模块(这里我们可以直接使用umeng提供的文件直接在你的项目中使用,地址https://github.com/umeng/React_Native_Compent/blob/master/native/AnalyticsUtil.js)
var { NativeModules } = require('react-native'); module.exports = NativeModules.UMAnalyticsModule;
第九步,使用
.... import AnalyticsUtil from '../util/AnalyticsUtil'; .... AnalyticsUtil.onEvent('SearchClick'); .......
最后到这里关于umeng统计的全部代码已经集成完毕,
转载请说明出处,略略略.......
标签:java,umeng,app,React,MobclickAgent,android,最新版,com 来源: https://www.cnblogs.com/songdongdong/p/10684327.html